Open cloudtian opened 4 years ago
浏览器渲染引擎会根据标准之一的CSS基础框盒子模型，将所有元素表示为一个个矩形的盒子。通过CSS决定这些盒子的大小，位置以及属性。
盒子模型主要由4个部分组成：
margin
border
padding
content
默认定义中，当对一个元素设置的宽(width)和高(height)属性只会应用到这个元素的内容区。
width
height
box-sizing用来设置width和height的作用对象的。
box-sizing
content-box
width = contentWidth
height = contentHeight
border-box
width = border + padding + contentWidth
height = border + padding + contentHeight
盒子模型
浏览器渲染引擎会根据标准之一的CSS基础框盒子模型，将所有元素表示为一个个矩形的盒子。通过CSS决定这些盒子的大小，位置以及属性。
盒子模型主要由4个部分组成：
margin(外边距)：清除边框外的区域，外边距是透明的。 （橙色区域）border(边框)：围绕在内边距和内容外的边框。（黄色区域）padding(内边距)：清除内容周围的区域，内边距是透明的。（绿色区域）content(内容)：盒子的内容，显示文本和图像。（蓝色区域）默认定义中，当对一个元素设置的宽(
width)和高(height)属性只会应用到这个元素的内容区。box-sizing
box-sizing用来设置width和height的作用对象的。content-box(默认值)：如果设置一个元素的宽为100px，那么这个元素的内容区就会有100px宽。 标准盒模型：width = contentWidthheight = contentHeightborder-box：如果设置一个元素的宽为100px，那么这个元素的宽+内边距+边框的值总和为100px。而内容区的实际宽度=设置的width-border-padding的值。大多数情况下，这使得我们更容易地设置一个元素的宽高。 怪异盒模型：width = border + padding + contentWidthheight = border + padding + contentHeight