box-sizing:border-box盒模型的宽度构成() content padding border margin
时间: 2023-06-19 07:09:51 浏览: 155
box-sizing:border-box盒模型的宽度构成包括content、padding和border,不包括margin。当设置了box-sizing:border-box时,元素的宽度就是设置的CSS width属性的值,它包括了元素的content、padding和border。而margin则是位于元素外部的空白区域,不属于盒模型的一部分。
相关问题
.row { padding: 50px 0 0 50px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin-left: -50px;}
这是一个CSS代码块,定义了一个类名为"row"的元素的样式。具体来说,这个样式会给"row"元素设置一定的内边距(top为50px,right为0,bottom为0,left为50px),并将其显示方式设置为行内块元素。接下来的几行代码则是为了解决元素盒子模型的不同实现方式而添加的前缀,以保证在不同浏览器中的兼容性。最后,使用负的左外边距将元素向左移动50px,以达到一定的布局效果。
* { 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,以确保元素的尺寸计算准确。
阅读全文
相关推荐
















