CSS 盒子模型概述

一、简介

 

CSS 盒子模型（元素框）由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

 

 

盒子模型，最里面的部分是实际内容；直接包围内容的是内边距；内边距的外边缘是边框；边框之外的是外边距。

 

内边距呈现了元素的背景；外边距默认是透明的，所以不会遮挡它后面的任何元素。

 

 

---

 

二、一些说明

 

内边距、边框和外边距都是可选择的，默认都为 0。

 

* {
    border:;
    margin:;
    padding:;
}

 

在 CSS 中，width 和 height 指的是内容区域的高度和宽度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

 

 

举个例子：假设元素框的每个边上有 10px(像素)的外边距和 5px 的内边距。如果希望这个元素框达到 100px，就需要将内容的宽度设置为 70px。请看下图↓

 

 

Padding、border 和 margin 可以应用于一个元素的所有边，也可以应用于单独的边，比如 margin-top: 10px，就是只对外边距的上面起作用。

 

外边距可以是负值，很多情况下，都要使用负值的外边距。

 

 

---

 

三、万恶的 IE

 

上面我们一直说的是 W3C 标准盒子模型，但是万恶的 IE 就不（IE6 之前版本及怪异模式下的 IE6~IE8），它使用 IE 盒子模型。

 

（图片说明：IE 盒子模型）

 

我们上面有提到“在 CSS 中，width 和 height 指的是内容区域的高度和宽度。”但是 IE 盒子模型中：width 属性不是内容的宽度，而是“内容的宽度+内边距的宽度*2+边框的宽度*2”的总和；而 height = 内容的高度+内边距的高度*2+边框的高度*2。

 

怎么解决这个兼容问题呢？

 

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

 

 

---

 

四、参考链接

 

1. W3School CSS 框模型概述

 

2. 浏览器的标准模式和怪异模式以及盒子模型

 

（完）