关于css:CSS标准盒子模型和怪异盒子模型参考了其他文章

4次阅读

共计 478 个字符,预计需要花费 2 分钟才能阅读完成。

一、什么是盒子?

(1)它是主观意识借助实体或者虚构体现形成主观论述状态构造的一种表白目标的物件

(2)css 中的盒子模型它是能够对元素进行布局,设置间隔的大小,这外面包含含有外边距、边框、内边距和内容主体这四个局部。

二、什么是盒子模型?

(1)CSS 中的规范盒子模型 (W3c 规范的盒子模型)


图中的 width 只蕴含 content 的 width,

* 触发条件:规范盒模型的 css 属性设置是 box-sizing:content-box

(2)怪异盒子模型 (IE 规范的盒子模型)


图中的 width 蕴含 content 的 width + 左右 padding + 左右 border

怪异盒次要体现在 IE 内核浏览器中,以后大部分浏览器反对的是 W3C 的规范盒子模型,不过其余浏览器也保留了 IE 盒子模型的反对,须要在 CSS 中增加触发怪异盒的条件。

* 触发条件:* 1. 怪异盒模型的 css 属性设置是 box-sizing:border-box
* 2. 文档构造的 doctype 不写,这个是在 IE8 IE7 IE6 IE5 等低版本上有,测试能够在 win7 零碎上比拟老旧的 IE 浏览器上,win10 自带的新 IE 浏览器不能够。
正文完
 0