盒子模型（一）——block box

最新推荐文章于 2022-04-07 17:55:12 发布

maomaolaoshi

最新推荐文章于 2022-04-07 17:55:12 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： css 盒子模型标准盒子模型 IE盒子模型 block-box

本文链接：https://blog.csdn.net/maomaolaoshi/article/details/77540091

版权

9 篇文章 0 订阅

订阅专栏

盒子模型作为CSS的一个重中之重，被大众所熟知。但是我们平时讨论的盒子模型更多的是块级盒子（block box），其实还有一种盒子模型叫做行级盒子（line box），行级盒子我将在下一篇文章中讲述。

这就是我们所熟悉的盒子模型，包含了margin（外边距）、border（边框）、padding（内边距）、content（内容）。

这里写图片描述

对于块级元素，浏览器会采用block box模型来进行渲染。
不过，早期的IE和W3C有不同的解释。

早期的IE浏览器（IE6之前）采用IE盒子模型，现在多采用标准模式（W3C模式）

这里写图片描述

(content)width = content-width + padding-width + border-width
(content)height = content-height + padding-height + border-height

标准模式看起更加容易理解一点。

这里写图片描述

(content)width = content-width 
(content)height = content-height

注意：
这里的高度和宽度并不是元素的真正宽高。这里的宽高指的是通过CSS设置的内容的宽高。
(吐槽：网上被广泛传播的这个图，我一直以为是错的…)

box-sizing属性可以让我们自由选择盒子的模式。

box-sizing:content-box/border-box/inherit

content-box——默认值，采用Standard box model
border-box——采用IE box model
inherit——继承父元素属性值

借助这个属性，我们来看看到底IE盒子和W3C标准盒子到底有什么不同。

这里的padding和margin以及border为了书写方便，全部假定为左右值都相等，大家懂这个意思就好了。

通过设置 box-sizing: content-box;，我们选定了W3C盒子模型。
图-W3C1：
这里写图片描述

图-W3C2：
这里写图片描述

通过W3C2我们可以明显的看出，contentWidth=width；即图阴影部分。
那么这个div元素的实际宽度（个人认为这个应该被称为做像素宽度）为：

contentWidth+padding*2+border*2+margin*2
=
100+50*2+0*2+200*2
=600px

IE盒子相比之下就显得很怪异了。
图-IE1：
这里写图片描述

在IE盒子的模式下，

contentWidth=width+padding*2+border*2

也就说我们设置了contentWidth=100px，但是由于padding*2=100px，所以把width的宽度消除了。
如果我们让padding=0，那么width则会恢复正常。
图-IE2
这里写图片描述

所以图-IE1中div元素的实际宽度(像素宽度)为：

width+margin*2
=
100+200*2
=500px

这里另外提一点，
如果
border+padding>width，
那么
width=border+padding; contentWidth=0;。
图—IE3
这里写图片描述

关注

专栏目录