网络技术问题 | CSS 测验 |第 2 组 |问题 10

问题描述

在CSS中，有两种不同的盒模型，它们分别是哪两种？

答案

CSS中有两种不同的盒模型，分别是标准盒模型 (content-box) 和 IE 盒模型 (border-box)。

标准盒模型

标准盒模型是指在CSS3之前广泛采用的盒模型，盒子的尺寸由 content、padding 和 border 三个区域组成，其中 content 区域指的是盒子的内容，padding 区域指的是内容区域和边框之间的空间，border 区域指的是盒子的边框。

对于标准盒模型，盒子的总宽度和高度等于 content 、padding 和 border 的值之和。

IE 盒模型

IE 盒模型是指IE浏览器中采用的盒模型，不同于标准盒模型，IE 盒模型将 border 区域以及 padding 区域包含在 content 区域内，并且将 border 区域和 padding 区域的宽度和高度计算在 content 区域的值中。

对于IE 盒模型，盒子的总宽度和高度等于 content 区域的值。

选择盒模型

在默认情况下，所有的浏览器都采用标准盒模型，但是我们也可以通过 CSS 的 box-sizing 属性来控制元素使用何种盒模型。

/* 标准盒模型 */
box-sizing: content-box;

/* IE 盒模型 */
box-sizing: border-box;

参考链接

• CSS盒子模型