CSS 页面布局三大布局之盒子模型 超详细介绍

CSS 盒子模型 超详细介绍

盒子模型组成（Box Model）

border content padding margin

（一）元素边框 border

边框的的设置由三部分组成：border-width border-style border-color

边框样式如下

边框复合写法
eg:

border: 1px solid red; <!-- 粗细/虚实/颜色 没有顺序 -->

若只要部分边框（边框分开写法）其写法为：
eg1:

 border-top:1px solid red;

eg2:

border-top:5px solid pink;
border-bottom:10px dashed purple;

注意：边框的设置会影响盒子实际大小，即盒子的长和宽都会多出增加的边框宽度。让盒子设置的宽度和高度（width&height）减去多出的边框宽度即可调整。

（二）内边距 padding

padding设置盒子内容与盒子边框之间的距离

注意1：若盒子设置好了宽高，则内边距的增加也会影响盒子实际大小，即盒子的长和宽都会增加所添的内边距的宽度。让盒子设置的宽度和高度（width&height）减去多出的内边距宽度即可调整。
Input:

div {
       color: red;
       width: 200px;
       height: 200px;
       padding: 20px;
}

盒子本身设定为200x200，增加20px的内边距后，盒子变为220x220

<div class="nav">
        I'm testing.
</div>

Output:


注意2：若盒子没设置宽高，则内边距的增加不会影响盒子实际大小（不会撑开盒子）

（三）外边距 margin

margin用于设置外边距，控制盒子与盒子之间的距离

注意：
1、margin简写方式和padding一致
2、对于行内元素、行内块元素，为了兼容性尽量只设置左右内外边距（不要设置上下内外边距），可能设置了也没有效果出现。但是对于块级元素是有效的。

利用外边距使盒子水平居中

1、对于块级元素：

margin: auto;

Auto可以理解为 居中对齐的意思
2、对于行内块/行内元素

text-align: center;

外边距塌陷问题

塌陷问题是对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷相对较大的外边距值。（若没有设置则上外边距默认设置为0）

如上图所示：父级元素的上外边距塌陷下来，两个元素嵌套在一起，外边距合起来为20px

解决方案 SOLUTION
如何让盒子里的子级元素与父级元素分开？

1、为父级元素定义上边框

border: 1px solid transparent

可以设置颜色为无色，从而相对避免影响效果

2、为父级元素定义上内边距

padding-top: 1px

3、为父级元素添加 overflow：hidden

overflow：hidden

清除内外边距

引入：在google浏览器中，body有默认的8px的外边距。不同浏览器带有默认的内外边距，这样在不同浏览器页面会有效果，因此在布局前，首先要清除内外边距。

* {
       margin: 0; <!--清楚外边距-->
       padding: 0; <!--清楚内边距-->
}