box-sizing:border-box盒模型的宽度构成() content padding border margin
时间: 2023-06-19 09:09:51 浏览: 51
box-sizing:border-box盒模型的宽度构成包括content、padding和border,不包括margin。当设置了box-sizing:border-box时,元素的宽度就是设置的CSS width属性的值,它包括了元素的content、padding和border。而margin则是位于元素外部的空白区域,不属于盒模型的一部分。
相关问题
box-sizing: border-box 盒模型的宽度构成
`box-sizing: border-box;` 盒模型指的是,一个元素的宽度(width)和高度(height)不再仅仅是内容区域的宽高,而是包含了内容区域、内边距(padding)和边框(border)的宽高。因此,盒子的总宽度和高度由以下三个部分构成:
1. `content-box` 内容区域的宽度和高度,不包括内边距和边框;
2. `padding` 内边距的宽度和高度;
3. `border` 边框的宽度和高度。
使用 `box-sizing: border-box;` 后,盒子的宽度和高度就只包含了内容区域、内边距和边框的宽高,而不会再扩展到外边距(margin)的宽高。这样可以更加方便地计算盒子的宽度和高度,也可以更好地实现响应式布局和等宽布局。
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box }
这是一个CSS代码块,用于设置元素的样式。具体解释如下:
1. `padding: 0;`:设置元素的内边距为0,即元素内容与边框之间的空白区域为0。
2. `margin: 0;`:设置元素的外边距为0,即元素与相邻元素之间的空白区域为0。
3. `-webkit-box-sizing: border-box;`:设置元素的盒模型为border-box,即元素的宽度和高度包括内容、内边距和边框,不包括外边距。
4. `box-sizing: border-box`:同上,用于兼容非webkit浏览器。
这段代码的作用是将元素的内外边距设置为0,并将盒模型设置为border-box,以确保元素的尺寸计算准确。