第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可以清除浮动。
作者：梁同学de自言自语
链接：https://www.jianshu.com/p/79b668f673e6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
随时随地看视频
