CSS 盒子模型
序
学习工作室授课讲稿大纲。如有错误请指出。
2019/12/20：实例网页已删除。
2020/04/27：实例网页已找到...
一、概述
盒子模型主要内容包括：
图示：
盒子模型 ( 来自 百度百科 )
二、详解
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属性的用法大致有以下几种：
- padding: 10px;
/* 设置上、右、下、左边距皆为10像素。 */ - padding: 5px 30px;
/* 设置上、下边距为5像素，左、右边距为30像素。*/ - padding: 10px 20px 30px 40px;
/*设置上边距为10像素，右边距为20像素，下边距为30像素，左边距为40像素。 */ - 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 | 设置左边距 |
外边距的用法与内边距一样，大家可以参考外边距的用法进行设置。
具体例子请点击此处查看。
