CSS3中的盒模型包含内容、内边距、边框和外边距。标准盒模型宽度和高度只算内容，而IE（替代）盒模型则包括内容、内边距和边框。开发者可使用`box-sizing`属性切换这两种模型，默认为`content-box`。添加`<!Doctypehtml>`可确保使用标准盒模型。
CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
CSS 盒模型是指在网页布局中，每个 HTML 元素都被表示为一个矩形的盒子。这个盒子包含了元素的内容、内边距、边框和外边距。CSS 盒模型由四个部分组成：
- Content（内容区域）：该部分显示元素的内容，包括文本、图像、背景等。
- Padding（内边距）：在内容和边框之间的空间称为内边距。它可以使用 CSS 属性
padding来设置。 - Border（边框）：围绕内容和内边距的边框。它可以使用 CSS 属性
border来设置。 - Margin（外边距）：在边框和相邻元素之间的空间称为外边距。它可以使用 CSS 属性
margin来设置。
CSS 盒模型允许开发者更好地控制网页布局，使元素在页面上具有更加准确的位置和尺寸。
标准盒模型（content-box）：
在标准盒模型中，元素的宽度和高度只包括内容的宽度和高度，不包括内边距、边框和外边距的宽度。
content-box 的宽度和高度只包括内容区域，不包括边框、内边距和外边距。
content-box 的总宽度 = 内容宽度 + 左右边框 + 左右内边距 + 左右外边距
怪异盒模型（border-box）：
在怪异盒模型中，元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的宽度，不包括外边距的宽度。
border-box 的宽度和高度包括内容区域、边框和内边距，不包括外边距
border-box 的总宽度 = 内容宽度 + 左右外边距
使用转换方式：
1、可以通过 box-sizing 来改变元素的盒模型：
box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。
2、在文档首部加上<!Doctype html>声明，即使用标准模式。标准模式下，浏览器会按照 W3C 的标准来渲染页面，而不是按照各自的兼容模式，即必然使用w3c的标准盒模型。
扫一扫
1400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
