CSS 盒子模型

序

学习工作室授课讲稿大纲。如有错误请指出。
2019/12/20：实例网页已删除。
2020/04/27：实例网页已找到...

一、概述

盒子模型主要内容包括：

• 内容 ( content )
• 内边距 ( padding )
• 边框 ( border )
• 外边距 ( margin )

图示：

盒子模型 ( 来自 百度百科 )

二、详解

1. 内容(content)

在一般的标签中，标签内的元素或文字就是内容(content)。而在伪类元素中(before、after)，content是其显示的内容。
我们在设置对应标签的宽高时，实际上是修改内容(content)的宽度和高度。
具体演示请点击 此处 。

2. 内边距(padding)

如概述中的图所示，内边距就是内容(content)和边框(border)之间的区域。
在 CSS 样式中，内边距(padding)有五个属性。

属性	描述
padding	设置所有外边距
padding-top	设置上边距
padding-right	设置右边距
padding-bottom	设置下边距
padding-left	设置左边距

以上属性有以下几种可选值：

值	描述
auto	浏览器自动计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px (零像素)。
%	基于父元素的宽度的百分比的内边距。
inherit	从父元素继承内边距。

接下来，我们用一些实例来演示具体的使用方法。

padding

padding属性的用法大致有以下几种：

1. padding: 10px;
   /* 设置上、右、下、左边距皆为10像素。 */
2. padding: 5px 30px;
   /* 设置上、下边距为5像素，左、右边距为30像素。*/
3. padding: 10px 20px 30px 40px;
   /*设置上边距为10像素，右边距为20像素，下边距为30像素，左边距为40像素。 */
4. padding: auto | inherit ;
   /* 选填auto或inherit，内边距大小将由浏览器自动设置。 */

padding-*

padding-top、padding-right、padding-bottom、padding-left这四个属性用法为：
padding-*: length | auto | %;
其中*指代top、right、bottom、left其中任意一个，length表示具体大小(例如5px)，auto表示浏览器自动计算，%表示采用百分比确定大小。

点击 此处 查看以上全部padding实例。

3. 边框(border)

如概述中的图片所示，边框(border)即为内边距(padding)外的细线边框。

定义和用法

border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：

属性	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。

我们来看看具体的边框样式有哪些：

样式	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。

我们来看一看具体用法：
border: 1px solid red; /* 设置大小为1像素，样式为实线，颜色为红色的边框。 */
border: 2px dotted blue; /* 设置大小为2像素，样式为点状，颜色为蓝色的边框。 */
注意：需要按顺序写明属性，可省略部分项。

点击 此处 查看以上全部border实例。

4. 外边距

如概述中的图片所示，外边距(margin)即为边框(border)外的区域。
在 CSS 样式中，外边距(margin)有五个属性。

属性	描述
margin	设置所有外边距
margin-top	设置上边距
margin-right	设置右边距
margin-bottom	设置下边距
margin-left	设置左边距

外边距的用法与内边距一样，大家可以参考外边距的用法进行设置。
具体例子请点击此处查看。

三、应用

了解完盒子模型的知识，我们用盒子模型来粗略的绘制一个网站的盒子组成结构。
具体实例请看盒子模型应用演示。