第5章：盒子模型
5.1 CSS盒子模型
- 页面的所有元素都可以看成一个盒子。
- 盒子模型由
content、padding、border、margin四大属性构成。
content内容
- 四大属性中的必填项。元素的内容可以是文本、图片等多种类型。
- 我们可以通过
witdh、height属性来设置元素内容的宽高，可以通过overflow属性处理内容溢出的情况。
padding内边距
- 内边距也称为“补白”，指元素内容和边框之间的距离。
- 可以通过内边距的四个方向属性设置指定方向与边框的距离：
padding-top、padding-right、padding-bottom、padding-left（也可以通过简写属性padding设置，顺时针的方向）
border边框
- 设置边框属性有三个属性：
border-width(边框宽度)、border-style(边框类型)、border-color(边框颜色)。
margin外边距
-
margin可以设定盒子与盒子之间的距离，可能是父子元素的距离，也可能是兄弟元素之间的距离。 -
margin也是CSS布局的一个重要手段。 -
margin的属性和padding一样，可以指定上下左右四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left（同样是顺时针，上右下左的顺序）。
5.2 深入border
-
border:0和border:none的区别：-
border:0是把边框的宽度定义为0，虽然页面上看不见，但浏览器依然会进行渲染； -
border:none是定义无边框，页面上看不见，同时浏览器也不会进行渲染； - 在IE6和IE7上会存在显示得不一样的兼容效果，性能上差别不大；
-
5.3 深入padding
- 通过
padding可以实现背景图片 + 偏移内容的按钮效果： - image
5.4 外边距叠加
-
margin用来设置盒子与盒子之间的距离，但如果设置上下相邻的两个盒子的margin属性的话，会出现外边距叠加的情况： - 比如说A和B两个元素垂直相邻，
A{margin-bottom:10px}，B{margin-top:15px;}，最终叠加的距离等于15px（取外边距的最大值）。 -
margin叠加的注意事项：- 只有垂直的外边距会叠加(
margin-top+margin-bottom)，而水平的外边距不会； - 外边距叠加最终的高度取外边距中的最大值；
- 垂直外边距叠加，只会在三种情况下出现：同级元素叠加、父子元素叠加、空元素；
- 只有
block和inline-block元素才会有外边距叠加的情况，inline行内元素的margin-top和margin-bottom设置无效；
- 只有垂直的外边距会叠加(
-
CSS之所以定义外边距叠加，初衷是为了更好的对文章进行排版，像文章的段落之间就是垂直相邻的，显然外边距叠加时只保留一个值排版更优美。
image - 所以我们在实际的开发中，应当统一使用
margin-top或统一使用margin-bottom，不要混用，从而可以降低出现问题的风险。
5.5 负margin技术
5.5.1 负margin简介
image
- 在普通文档流中，设置负margin的元素流动方向是从右到左，从下到上；
- 在浮动布局中，则是根据浮动的方向来定；
5.5.2 负margin技巧
-
图片与文字对齐
image -
实现自适应两列布局
image -
元素垂直居中
image - 通过
margin-top:-1来实现选中tab的下边框效果
image
5.6 overflow
-
overflow四个属性来定义当内容溢出元素边框时的处理：-
overflow:visible：默认值，溢出的内容可见； -
overflow:hidden：溢出的内容隐藏，以免影响布局； -
oveflow:scroll：通过滚动条显示内容溢出； -
overflow:auto：和scroll相似，不同的是auto值溢出时，才显示；
-
- 另外
overflow:hidden可以清除浮动。
