解读css盒子模型

Css盒子

第一个问题：css盒子

Css盒子是从内而外分别是border(边框)，margin（外边距），padding（内边距），盒子的宽（width），盒子的高（height），再加上最内层的元素（element），我们打开谷歌浏览器按下F12就可以看到这哥们了

在兄弟标签之间要设置间距是使用margin来设置间距，父子标签之间是用padding来设置间距的

通常如果我们的边框没有设置background-color我们设置background时，一般设置的是内容、内边距、边框，这时候我们盒子的宽高就是等于内容（element/content）+内边距(padding)+边框(border)。

此外margin是透明的不会遮挡其他元素；

这里还要提一个比较重要的知识点，我们设置的margin不属于盒子的大小，只是盒子的所占据的面积大小

当然块级标签和行内标签也是有区别的；最大的区别就是我们块级标签可以设置宽高，行内标签不行；可奇怪的是，行内标签是可以设置margin-（left、right）和padding（left、right）和border这五个值的。可以得出，行内标签的高是由内容大小决定的，其他都是可以设置的

第二个问题：盒子垂直合并的问题

盒子合并，主要是当两个盒子垂直相遇时外边距的合并，两个盒子重叠的那一边，当一个盒子A的一边的外边距（margin）大于另一个盒子B的外边距（margin），则两个盒子的的距离为盒子A的外边距（margin），这就为盒子的垂直合并

解决盒子垂直合并的问题

第一：可以通过浮动（float），然后再父盒子清除浮动即可

第二：可以定位布局

 

已经浮动的盒子和定位过的盒子不会出现盒子外边距合并，因为其已经脱离了标准流。

第三个问题：盒子模型的分类

盒子模型分为：标准盒子模型和怪异盒子模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

这两个哥们就是标准模式下的盒子模型，这里的width和height是指内容content的宽高

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

这是怪异模式下的盒子模型，这里的width和height只是内容content的宽高是指padding和border值和内容宽高总和