CSS 盒子模型概述

时间：2016-07-21 12:49:55 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：

一、简介

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

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

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

二、一些说明

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

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

在 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 框模型概述

（完）

标签：

原文地址：http://www.cnblogs.com/zhangbao/p/5691279.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行