CSS 盒模型

林慕
1,503 阅读5分钟

本节主要介绍 CSS 盒模型的基本概念、两种盒模型类型以及如何转换。虽然开发时不常提起这些概念，但是盒模型仍润物细无声般的存在于每个页面、标签上，其重要程度可见一斑。特别是两种盒模型的对比和转换，不仅项目中会经常使用，也是求职面试时的高频考点。

学习之前我们先来思考以下两个问题：

  1. 什么是标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？

  2. box-sizing 属性如何使用？

提示：如对以上两个问题非常熟悉，可跳过本节学习。

CSS 盒模型（Box Model）概述

定义：前端开发中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， HTML 元素都具备这些属性。这些属性我们可以用盒子来比喻，所以称它为盒子模型，简称盒模型。

作用：掌握盒模型可以更好地理解页面中和标签上每一区块的内容，盒模型是在前端开发中经常用到的一种思维模型。

具体说明如下图：

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

为了更准确的计算元素的宽高，我们需了解以下两种盒模型类型：

W3C 标准盒模型

目前所有遵循 W3C 标准的浏览器（IE 5、6除外），默认都是 W3C 标准盒模型。

W3C 盒子模型包括 4 部分：margin，border，padding，content；其中，content不包括其他部分。

宽度 = margin-left + margin-right + border-left + border-right + padding-left + padding-right + width

提示：width 为内容区的宽度。

高度 = margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom + height

提示：height 为内容区的高度。

下面是一个div 元素，我们来计算一下他的宽度。

div {
    width: 300px;
    border: 10px solid yellow;
    padding: 20px;
    margin: 30px;
}

宽度 = 30px + 30px + 10px + 10px + 20px + 20px + 300px = 420px

做过一段时间前端开发的工程师，都会遇到一种问题 ———— 适配或兼容性问题。

接下来让我们看下盒模型在 IE 浏览器下的兼容性问题。

IE 盒模型（怪异盒模型）

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

此时，你是不是有疑问，那 IE8/9/10 默认是什么盒模型呢？

IE 浏览器针对盒模型的划分，是以 IE8 为分水岭，IE8 及以上默认都是标准盒模型，IE8 以下都是 IE 盒模型。

宽度 = margin-left + margin-right + width

提示：width = border-left + border-right + padding-left + padding-right + 内容区的宽度

高度 = margin-top + margin-bottom + height

提示：height = border-top + border-bottom + padding-top + padding-bottom + 内容区的高度

同样使用上面的代码示例：

div {
    width: 300px;
    border: 10px solid yellow;
    padding: 20px;
    margin: 30px;
}

宽度 = 30px + 30px + 300px = 360px

标准盒模型转为 IE 盒模型

讲到这里我来总结一下，关于盒模型，很多文档会教大家尽量避开 IE 盒模型，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。但是这样会有两个小问题：

  1. 当项目很大时，会增加很多“无用”的 HTML 标签；
  2. 根据 UI 图设置宽高时，需二次计算宽高值。

需二次计算宽高值是什么意思呢？

假设有一个 div 标签是标准盒模型，宽为 200px，你已经写了样式 width:200px，但你发现这个 div 标签左右有 10px 的填充（padding）值，于是你又加了样式 padding:10px，那么此时这个 div 盒子的宽度是多少呢？它的宽度已经变成 220px 了，所以你需要二次更改 width 属性，改为 width:180px,这样 div 的宽度才是200px。这部分不清楚的话请查看上面的分析与示例。

所以，避开不如直接使用，我们在实际开发项目时，根据 UI 图，部分内容可直接将标签都设置为 IE 盒模型，这样也能更好地解决上面的两个问题。

那么怎样将标准盒模型转化为 IE 盒模型呢？

CSS3 box-sizing：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

语法：

box-sizing: content-box|border-box|inherit;
值 描述
content-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

浏览器支持

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

Safari 支持替代的 -webkit-box-sizing 属性。

小结

本节我们首先介绍了盒模型的基本概念，接着根据不同的盒模型做了计算的案例，最后引出了 CSS3 中的 box-sizing 属性。通过以上学习，我相信你对最开始的两个问题已经有了自己的答案。

avatar
文章
阅读
粉丝