如果你希望元素的尺寸仅限于内容区域,那么怪异盒子模型可能更合适。 兼容性: 考虑到不同浏览器的兼容性,特别是旧版本的IE浏览器,可能需要使用特定的CSS声明来模拟怪异盒子模型或标准盒子模型。例如,使用box-sizing: border-box;可以模拟怪异盒子模型的行为,而box-sizing: content-box;则模拟标准盒子模型的行为。 ...
(1)css中的width, height属性,分别表示的是盒子模型中content的宽度和高度。 (2)css中的padding,表示的是盒子模型的的padding部分。 (3)css中的border,表示的是盒子模型中的border部分。 (4)css中的margin,表示的是盒子模型中的margin。 二,怪异盒子模型(ie盒子模型) 解释:在怪异盒子模型下 (1)css中的width...
实例:继续使用上面的div元素,但在怪异盒子模型下,如果设置box-sizing: border-box;,则总宽度和总高度均为200px和100px,因为此时宽度和高度已经包含了内边距和边框。 四、如何设置盒子模型 CSS中的box-sizing属性用于设置盒子模型的类型。其值可以是content-box(标准盒子模型)或border-box(怪异盒子模型)。 /* 设...
标准盒子模型,也称为w3c盒子模型,设置margin/border/padding时,会改变盒子大小 标准盒子的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右) 怪异盒子模型,也称为IE盒子模型,设置margin/border/padding时,不会改变盒子大小 怪异盒子的总宽度 = width(content + border + padding)+ m...
首先说下box-sizing的取值问题,box-sizing的可选值有三个,inheirt,content-box(标准盒式模型)和border-box(ie6等非标准浏览器的怪异盒式模型); 首先说第一个取值content-box,content-box是box-sizing的默认值。意思是:元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距。假设我们设置一个div的宽度为100...
1、怪异盒模型也叫IE盒子模型 怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。 怪异盒子(IE盒子模型)的触发条件: (1) 给元素添加CSS3属性box-sizing:border-box; (注:所以如果用CSS3新属性,就不要考虑低...
我们再来看一下怪异盒子模型 怪异盒子:box-sizing: border-box,同样我们为一个div设置了200px的宽和高,20px的内边距,10px的外边距。让我们再来看一下效果: .standard{width:200px;height:200px;padding:20px;box-sizing:border-box;border:10px solid green;display:inline-block;margin:10px;vertical-align:...
一、标准盒子模型 在标准盒子模型中，CSS中的宽度和高度属性仅表示内容区域的大小。二、怪异盒子模型（IE盒子模型）在怪异盒子模型中，宽度和高度属性除了表示内容区域外，还会包括填充和边框。总结 - 标准盒子模型与怪异盒子模型的区别 标准盒子模型与怪异盒子模型的根本区别在于宽度和高度属性对盒子模型的...
标准盒模型,一个块的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右) 怪异盒模型,一个块的总宽度 = width(content + border + padding)+ margin(左右) 以上是“CSS中怪异盒模型和标准盒模型有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的...
box-sizing:border-box;