css中盒子模型是重要的概念之一，页面中所有元素都可以看做为一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。
内边距：是内容区周围的空间，给元素应用的背景会作用于元素内容内边距，因此，内边距通常用于分隔内容，使其不致于散布到背景的边界，边框会在内边距外侧增加一条框线，边框的外侧就是外边距，外边距：是围绕在盒子可见部分之外的透明区域，用于在页面中控制元素之间的距离。
盒子大小
默认情况下，元素盒子的width和height属性指的是内容盒子，也就是元素可渲染内容区的宽度和高度，这个时候添加边框和内边距不会影响盒子的大小，但会导致整个元素盒子变大，如果想给盒子的每一边都添加5px的内边距和边框，同时又想让元素盒子的宽度为100px，则应如下设置：
.box {
width:80px;
padding:5px;
border:5px solid #f0f0f0;
}
通过修改box-sizing属性可以改变计算盒子大小的方式，box-sizing的默认值为content-box，将宽度应用到内容区，通过修改box-sizing的值，设置元素的width和height属性，就可以影响元素盒子的不同区域。但是有些浏览器出于兼容性的考虑，会给一些表单元素应用不同的box-sizing默认值。
如果把box-sizing的值修改为border-box，那么width和height属性的值将会包含内边距和边距，此时，外边距仍然会影响到盒子在页面中占据的整体空间，即它的宽度不会算到width中去。
.box {
box-sizing: border-box;
width:100px;
padding:5px;
border: 5px;
}
把box-sizing设置为border-box，这种计算盒子大小的方式将会更加的直观，IE6以及更加早期的IE版本便是这样计算盒子宽度的。
实际上，box-sizing的主要用途是应用在响应式布局中，可以通过设置box-sizing属性来覆盖默认行为，如：想要在父元素.pBox下的.cBox一直占据父元素宽度的一半，则只需要
.pBox .cBox {
width: 50%;
}
这样设置在子元素.cBox不设置边距的情况下是没有什么问题的，但是如果给.cBox加上内边距，则会打破原本设定的布局规则。
image.png
要解决这个问题，有两种解决途径，一种是增加一个内部元素，然后改为这个元素添加内边距，或者设置一个不同的box-sizing值，从而修改盒子宽度的计算方式。
.pBox .cBox {
width:50%;
box-sizing:border-box;
padding:20px;
}
box-sizing可以保证无论是否添加了内边距，内部盒子的宽度始终都是50%。
最大值max-width和最小值mix-width
使用最大值和最小值，块级盒子就可以默认自动填充父元素的宽度，但不会收缩到比min-width指定的值更窄，或者拓展到比max-width指定的值更宽
可见格式化模型
常见的p、h1和article这些元素都是块级的元素，意味着显示为内容块或块级盒子的形式，相对而言，strong、span和time这些元素就是被称为行内元素，因为他们的内容为行内盒子的形式显示在行内。
CSS中存在有几种不同的定位模型，浮动、绝对定位和相对定位，除非特别指定，否则元素盒子都会在常规文档流中生成，即position属性的默认值为static。指的是常规文档流中元素盒子的位置由元素在html文档中的位置决定。
匿名盒子
多数的盒子都是基于明确定义的元素生成的，不过有一种情况，就算不明确定义元素也会生成块级盒子，如下，在section这个块级元素的开头加入一些文本，此时，这些文本就算没有定义为块级元素，也会被当成块级元素
<section>
something
<p>more</p>
</section>
这个盒子就被称为匿名盒子，因为这个盒子并不与任何特定的元素相关。
外边距折叠
常规块盒子有一种机制叫做外边距折叠，外边距折叠是指的垂直方向上的两个外边距相遇时，会折叠为一个外边距，折叠后，外边距的高度等于两者中较大的那一个。
image.png
网友评论