标准盒模型和怪异(ie)盒模型的对比
盒模型(英语:box moldel),是W3C规定一个浏览器如何渲染、显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型。
在css中块级盒子模型也有两种,分别是标准盒模型和IE浏览器的怪异盒模型。默认为标准盒模型(box-sizing:content-box),使用box-sizing:border-box可变成怪异盒模型。
box-sizing: inherit;规定从父元素继承box-sizing。
盒模型组成:
border有多种类型的样式
solid:实线
dashed:虚线
dotted:原点虚线
标准盒模型和怪异盒模型的异同点:
标准盒模型的内容区域的宽高就是width和height值,怪异盒模型的内容区域的宽高是width-padding(左右)-border(左右)、height-padding(上下)-border(上下)
标准盒模型添加padding或者border时,整体上所占空间会变大((width/height)+padding+border);怪异盒模型添加padding或者border时,其整体所占空间不发生变化(width和height设定的大小)
标准盒模型和怪异盒模型的应用场景不同(具体根据实际应用场景而定)
// 标准盒模型 // 怪异盒模型 { { width: 200px; box-sizing: border-box; height: 200px; width: 200px; margin: 100px 0; height: 200px; padding: 10px; margin-top: 100px; border: 10px dotted green; padding: 10px; background-color: orange; border: 10px dashed green; background-color: purple; } }
效果图:
赞 (0)