[学习交流] 【上海校区】CSS盒子模型浅析

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

标准盒子模型：

IE盒子模型：

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

CSS盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。

<body>标签也有margin

<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：

padding区域也有颜色

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。

效果如下：

padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种：

第一种写小属性：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

第二种写综合属性，用空格隔开：

(上、右、下、左)（顺时针方向。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果只写了三个值，则顺序相当于：上、右、下、右。

如果只写了两个值，则顺序相当于：上、右、上、右。

如果有小大属性的混用，

如：

padding: 20px;
padding-left: 30px;

要用小属性层叠大属性：即相当于：padding: 20px 20px 20px 30px

如：

div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }

则相当于：padding: 10px 40px 30px 20px（40>20所以用40层叠20）

但是要切记，不要把小属性写在大属性前面padding: 20px;

padding-left: 30px;

padding: 20px;

这样写是错误的。这样写会起不到小属性层叠大属性的效果：

div{ width: 200px; height: 200px; padding-left: 10px; padding-right: 20px; padding:40px 50px 60px; padding-bottom: 30px; border: 1px solid #000; }

则相当于：padding: 40px 50px 30px 50px;

border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

比如

border的所有的线型如下：（我们可以通过查看

border拆分

border是一个大综合属性。比如说：

border:10px solid red;

就相当于：

border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。

由于border有四个方向，所以也相当于:

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

由于每个border方向都有width、style、color属性，所以也相当于：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

但是工作中尽量追求简单。

上面的实现：

border:10px solid red;
border-right-color:blue; //小属性写在大属性下面，小会层叠大

与padding相同，如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

border-width:10px 20px; //上右下右
border-style:solid dashed dotted; //上右下右
border-color:red green blue yellow; //上右下右

所以上述实现：

border:10px solid red;
border-style:solid dashed; //小属性写在大属性下面，小会层叠大

另外：

border可以没有：

border:none;

可以某一条边没有：

border-left: none;

也可以调整左边边框的宽度为0：

border-left-width: 0;

如果利用:

width:0;
height:0;

则border就是整体了：此时若

border:50px solid green;
border-top-color:red;

则是下面的效果：

然后我们将border的底部取消：

最后设置border的左边和右边为白色：

这样，一个三角形就画好了，是不是很有趣。。

吴琼老师 · 吴琼老师

不二晨 · 不二晨

奈斯

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】CSS盒子模型浅析

2 个回复