CSS基础：深入理解盒模型的两种类型

发表时间: 2024-05-21 17:37

两种盒模型

我们在盒模型的属性中提到过标准盒模型, 这是因为除了标准盒模型外, 还有在IE浏览器中使用的怪异盒模型。我们现在用一段代码分别演示这两种盒模型。

<html><head><style>div{    width: 200px;    height: 100px;    padding: 10px;    border: 1px solid #000;    margin: 20px;}.content-box{    box-sizing: content-box;}.border-box{    box-sizing: border-box;}</style></head><body><!-- 标准盒模型 --><div class="content-box">我是content-box</div><!-- 怪异盒模型 --><div class="border-box">我是border-box</div></body></html>

这两个盒子中, 使用了 box-sizing:content-box; 属性的就是标准模式, 用了 box-sizing:border-box; 属性的就是怪异模式。

标准盒模型, 标准盒模型这个标准是由 W3C 组织制定的, 现在除了低版本IE以外, 基本所有浏览器都遵循这个标准。

标准盒模型中, width 和 height 属性所指定的宽高就是实际内容区的大小,

而盒子实际大小是：横向空间：width + padding宽度 + border宽度

纵向空间：height + padding宽度 + border宽度

怪异盒模型, 怪异盒模型是微软在 IE6、7、8 中使用的一种盒模型, 所以也把怪异盒模型叫做 IE盒模型。

在怪异模式下，width 和 height 做指定的宽高就是盒子的实际宽高, 而它内容区部分的大小是在 width 或 height 指定尺寸的基础上, 再减去 border 和 padding 所占的宽度。

页面的加载和渲染全过程当我们在浏览器里输入一个 URL 后, 最终会呈现一个完整的网页。

这中间会经历如下的过程:

1 HTML 的加载

输入 URL 后, 最先拿到的是 HTML 文件。HTML是一个网页的基础, 所以要在最开始的时候下载它。

HTML下载完成以后就会开始对它进行解析。

2 其他静态资源下载

HTML 在解析的过程中, 如果发现 HTML 文本里面夹杂的一些外部的资源链接, 比如 CSS、JS 和图片等时, 会立即启用别的线程下载这些静态资源。

这里有个特殊的是 JS 文件, 当遇到 JS 文件的时候，HTML 的解析会停下来, 等 JS 文件下载结束并且执行完, HTML 的解析工作再接着来。

这样做是因为 JS 里可能会出现修改已经完成的解析结果, 有白白浪费资源的风险，所以 HTML 解析器干脆等 JS 折腾完了再干。

3 DOM 树构建

在 HTML 解析的同时, 解析器会把解析完的HTML转化成DOM 对象, 再进一步构建 DOM 树。

4 CSSOM 树构建

当 CSS 下载完, CSS 解析器就开始对 CSS 进行解析, 把 CSS 解析成 CSS 对象, 然后把这些 CSS 对象组装起来, 构建出一棵 CSSOM 树。

5 渲染树构建

DOM 树和 CSSOM 树都构建完成以后, 浏览器会根据这两棵树构建出一棵渲染树。

6 布局计算

渲染树构建完成以后，所有元素的位置关系和需要应用的样式就确定了。这时候浏览器会计算出所有元素的大小和绝对位置。

7 渲染

布局计算完成以后，浏览器就可以在页面上渲染元素了。比如从 (x1, y1) 到 (x2, y2)的正方形区域渲染成蓝色。经过渲染引擎的处理后，整个页面就显示在了屏幕上。

内联样式的权重是1000

ID 选择器里样式的权重是100

类选择器、属性选择器和伪类选择器里样式的权重是10

标签选择器里样式的权重是1

通用选择器直接忽略

CSS基础：深入理解盒模型的两种类型

热门阅读

推荐阅读