CSS 盒子模型概述

一、简介
 
CSS 盒子模型(元素框)由元素内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
 
CSS 盒子模型概述
CSS 盒子模型概述
 
盒子模型,最里面的部分是实际内容;直接包围内容的是内边距;内边距的外边缘是边框;边框之外的是外边距。
 
内边距呈现了元素的背景;外边距默认是透明的,所以不会遮挡它后面的任何元素。
 
 

 
二、一些说明
 
内边距、边框和外边距都是可选择的,默认都为 0。
 
* {
border:;
margin:;
padding:;
}
 
在 CSS 中,width 和 height 指的是内容区域的高度和宽度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
 
CSS 盒子模型概述
 
CSS 盒子模型概述
举个例子:假设元素框的每个边上有 10px(像素)的外边距和 5px 的内边距。如果希望这个元素框达到 100px,就需要将内容的宽度设置为 70px。请看下图↓
 
CSS 盒子模型概述
 
Padding、border 和 margin 可以应用于一个元素的所有边,也可以应用于单独的边,比如 margin-top: 10px,就是只对外边距的上面起作用。
 
外边距可以是负值,很多情况下,都要使用负值的外边距。
 
 

 
三、万恶的 IE
 
上面我们一直说的是 W3C 标准盒子模型,但是万恶的 IE 就不(IE6 之前版本及怪异模式下的 IE6~IE8),它使用 IE 盒子模型。
 
CSS 盒子模型概述
(图片说明:IE 盒子模型)
 
我们上面有提到“在 CSS 中,width 和 height 指的是内容区域的高度和宽度。”但是 IE 盒子模型中:width 属性不是内容的宽度,而是“内容的宽度+内边距的宽度*2+边框的宽度*2”的总和;而 height = 内容的高度+内边距的高度*2+边框的高度*2。
 
怎么解决这个兼容问题呢?
 
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
 
 

 
四、参考链接
 
 
 
(完)
 
上一篇:NOIP2009靶形数独[DFS 优化]


下一篇:BZOJ - 2588 Spoj 10628. Count on a tree (可持久化线段树+LCA/树链剖分)