盒子模型
来源:互联网 发布:矩阵每一列的归一化 编辑:程序博客网 时间:2024/05/18 05:56
一·盒子模型概述:
在“CSS盒子模型”理论中,所有页面中的元素都可以看成一个盒子,并且占据着一定的页面空间。
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系
每个元素都看成一个盒子,盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。
二·盒子模型属性值:
border (边框)元素边框
margin (外边距)用于定义页面中元素与元素之间的距离
padding (内边距)用于定义内容与边框之间的距离
content (内容)可以是文字或图片
1、内容区
内容区是CSS盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他的3部分都是可选的。
内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区而言,并不包括padding部分。
当内容信息太多时,超出内容区所占范围时,可以使用overflow溢出属性来指定处理方法。对于overflow这个属性,我们在后面会详细讲解到。
2、内边距
内边距,指的是内容区和边框之间的空间,可以被看做是内容区的背景区域。
关于内边距的属性有5种,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。
3、边框
在CSS盒子模型中,边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。
其中border-width指定边框的宽度,border-style指定边框类型,border-color指定边框的颜色。
“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。
4、外边距
外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。
外边距的属性也有5种,即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- CSS3 transition-timing-function 属性
- Android的ActivityNotFoundException异常
- [windows]_[避免线程死锁]
- [九度OnlineJudge][剑指Offer]题目1512:用两个栈实现队列
- 查询MySQL中某个数据库中有多少张表
- 盒子模型
- Java创建单链表并直接选择排序输出
- DP还是要熟练的好啊
- MySQL的 GRANT REVOKE用法
- 页面包含二维码时的相关问题
- 生成COM Dll的tlb文件的两种方法
- IOS中内存的分配
- 认识观察者模式
- 2015年9月21日-9月27日(共15小时,剩3470小时)