CSS3 盒尺寸 box-sizing属性

在CSS中，通过 width 和 height 属性来定义一个盒子的宽度和高度，可以用长度值或百分比来设置，不允许负值。使用百分比时，根据父元素的宽度进行计算盒子的宽度，根据父元素的高度进行计算盒子的高度。

如果一个盒子没有显式定义 width 属性，则宽度的计算结果跟定位类型相关：静态定位或相对定位的盒子，其宽度为父元素宽度的100%；绝对定位和浮动的盒子，其宽度根据所包含内容自动扩展，最大宽度为包含块宽度的100%。

由于历史原因，在计算一个盒子的尺寸时，浏览器对盒模型存在两种不同的解析模式，一种是标准模式（strict mode），另一种是怪异模式（quirks mode）。

所谓标准模式，是指浏览器遵从W3C标准解析执行；怪异模式则是使用浏览器自己的方式解析执行，因为不同浏览器解析执行的方式不同，故称为怪异模式。IE的早期版本，包括IE6都使用怪异模式，而现代浏览器都使用标准模式。

在标准模式下，一个盒子的尺寸是指 content-box 区域的尺寸；而在怪异模式下，一个盒子的尺寸是指border-box 区域在内。无论哪种模式，一个盒子所占据的页面空间，都是 margin-box 区域的尺寸。如：

.box {
width: 200px;
height: 200px;
margin: 30px;
padding: 50px;
border: 20px solid black;
}

在标准模式下，由于 padding 和 border 不占据盒子的尺寸，所以，盒子 content 区域的尺寸，始终等于盒子的 width 和 height 属性的值，即 200×200，而盒子所占用的空间会随 padding、border 和 margin 向外扩展。

盒子在水平方向所占用的空间 = 盒尺寸 + padding + border + margin = width + padding + border + margin = 200 + (50 + 20 + 30) * 2 = 200 + 200 = 400。垂直方向的计算方法相同。如图 4‑52 所示：

图4-52 标准模式盒模型

在怪异模式下，盒子的尺寸始终等于盒子的 width 和 height 属性的值，即 200×200。所以，盒子的 padding 和 border 会吞噬content 区域，导致content 区域的宽度 = width – border – padding = 200 – (20 + 50) * 2 = 200 – 70 * 2 = 200 – 140 = 60。

盒子在水平方向所占用的空间 = 盒尺寸 + margin = width + margin = 200 + (30) * 2 = 260。垂直方向的计算方法相同。如图 4‑53 所示：

图4-53 怪异模式盒模型

在CSS3之前，设计师常常被这两种不同的盒模型所困扰，在一个浏览器下好好的布局，到了另一个浏览器下却变得支离破碎。

为了解决这个问题，CSS3 新增了一个盒模型属性 box-sizing，使这种不统一的局面得到改善。

设计师可以通过 box-sizing属性，来自行选择一个盒子的解析模式。box-sizing属性的可选值有content-box | border-box，默认值为 content-box。content-box 表示使用标准模式来解析计算盒尺寸，border-box 表示使用怪异模式解析计算盒尺寸。

虽然IE 对盒模型的解释不符合W3C的规范，但它更符合常理。它的好处是，无论如何修改元素的边框或内边距的大小，都不会影响元素生成框的总尺寸，也就不会破坏页面的整体布局。

而在标准模式下，一旦修改元素的边框或内边距的大小，就不得不重新计算元素生成框的尺寸，从而影响整个页面的布局，这无疑增加了页面布局的难度。所以，使用 border-box 会使页面布局更加方便，它将会成为盒模型的主流。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS3 盒尺寸 box-sizing属性相关推荐

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
CSS世界-第四章盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
【 CSS 尺寸/宽高属性 heightwidth 】
CSS 尺寸/宽高属性 height&width CSS 尺寸/宽高属性 1. height 属性: 设置元素的高度 (auto/长度值/ 百分比值) 1.1 max-height 属性 ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
不是css3新增的技术,css3新增属性有哪些？css3中常用的新增属性总结，分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...
css3属性文字换行,CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

CSS3 盒尺寸 box-sizing属性

CSS3 盒尺寸 box-sizing属性相关推荐

最新文章

热门文章