前端速学：css盒子模型

——让忙碌的你了解一下前端。

本专题的目的就是让初学入门，外行了解，本人备案。本期内容css盒子模型

话不多说，先划重点！

一、盒子模型包含：内容（content）、填充（padding）、边框（border），外边距（margin）。

二、盒子模型分为两种：标准盒子模型和IE盒子模型。区别：

1.标准盒子模型：

宽度=内容宽度

高度=内容高度

2.IE盒子模型：

宽度=内容宽度+左填充值+右填充值+左边框值+右边框值

高度=内容高度+上填充值+下填充值+上边框值+下边框值

三、两种盒子模型可以通过box-sizing属性来切换。

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

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

（注意：会有浏览器兼容问题，大家自行总结）

以下是详细介绍，重点就看明白了，就不必往下看了。

CSS盒子模型（Box Model）

盒子模型是css的基础模型，是在布局中的基本元素。

下图即为盒子模型的图解：

盒子模型包含：内容（content）、填充（padding）、边框（border），外边距（margin）。

一个盒子模型由一个可见的边框（border）框起来，外面划定了一块区域，用来保持与外界的距离，这就是外边距（marin）。内部区域用来装文字和图片等内容（content），在内容和边框之间划定一块区域用来保持内容部分与边框之间的距离，这就是填充（border）。

其中margin和padding是不可见的，只是占地儿用的。

所有的html元素都可以看做是盒子模型。浏览器对基本的盒子模型设置不同的默认样式就形成了不同的html元素。这些html元素如同一块块积木，我们用它们就可以搭建页面了。怎么搭？就是先用html搭建基本框架，再用css设置html元素样式，让其显示出我们想要的样子。

盒子模型分为两种：标准盒子模型和IE盒子模型。

两者的区别就是在设置width、height属性的时候。

标准盒子模型：当设置元素width（宽度）值时，设置的是内容（content）的宽度。盒子模型的其他部分（padding、border、margin）另行设置，不会受到影响。高度（height）同理。

宽度=内容宽度

高度=内容高度

IE盒子模型：当设置元素width（宽度）值时，设置的是内容（content）、填充（padding）、边框（border）值的和。盒子模型的其他部分（padding、border、margin）也可以另行设置。高度（height）同理。

需要注意的是，padding、border、margin都是分上下左右的。也就是在IE盒子模型下得到如下结论：

宽度=内容宽度+左填充值+右填充值+左边框值+右边框值

高度=内容高度+上填充值+下填充值+上边框值+下边框值

那么问题来了，width是content+padding+border，padding和border可以另行设置，当单独设置的padding和单独设置的border两者相加大于width怎么办？答案就是取其大值。也就是说当单独设置的padding+border大于width的时候 你设置的width的设置就不起作用了，此时的width值为padding+border的值。相反padding+border小于等于width的时候你设置的width的值才起作用。高度（height）同理。

两种盒子模型可以通过box-sizing属性来切换。

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

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

大多数浏览器默认都是标准盒子模型，但是强（qi）大（pa）的IE比较新的版本默认标准盒子模型，老版本就比较混乱。（这就涉及到浏览器兼容问题了，建议搞清楚标准情况再去研究兼容问题）

这里就是对css box model的总结归纳，希望对大家有帮助。

回复box model可看到写的一个小栗子。