文章目录
页面显示时，浏览器怎么知道标签与标签之间应该显示多大的间距呢？我们自己如何控制这些间距？
1、页面中的盒
元素在页面中显示成一个方块，类似一个盒子，在body中每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。CSS盒子模型就是使用现实中盒子来做比喻。
页面中的盒
每个块标签所在的盒尽可能的占据页面的整个宽度，而内联标签不会占据容器的一整行，内容的多少决定了它的宽度。
2、将块标签转换成内联标签
有时，你想把块标签转换成内联标签，需要设置CSS的display属性。例如：把导航栏现在的垂直显示修改为水平显示。
display:inline;
块标签之间的间距
3、盒子模型
盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型是描述标签的边框和间距的一种方式，由4部分组成：
元素的内容（content）、内边距（padding，内容和边框之间的间距）、边框（border）和外边距（margin，盒子与盒子之间的间距）。我们用一张图来表示：
padding（内边距）
padding 内边距位于内容框的外边缘与边界的内边缘之间。
padding-top:上内边距，
padding-right:右内边距，
padding-bottom:下内边距，
padding-left:左内边距。
设置内边距的写法：
padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是20 px。padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15px。padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。padding:10px;表示所有 4 个内边距都是 10 px。
注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。
示例：
可以看到，同样是设置高宽为 200 像素的盒子，有 padding 的明显要大一些，padding 在边框里面。
示例二：
border（边框）
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。你可以设置它的粗细，样式和颜色。
边框语法：
border: border-width||border-style||border-color;
设置一边的边框，例如顶部边框，可以按如下设置：
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) 、 dashed(虚线) 、 dotted(点线); */
上面三句可以简写成一句：
border-top:10px solid red;
设置其它三个边的方法和上面一样，把上面的’top‘换成’left‘就是设置左边，换成’right‘就是设置右边，换成’bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
div {
border: 10px solid red;
}
这条代码能给 div 设置边框粗细为 10px、样式为实线、颜色为红色的边框。
注意：border-style（边框样式）的常用样式有：dashed（虚线）、dotted（点线）、solid（实线）.
你可以按照上右下左的格式，分别写出元素的各个边框的属性。
例子：
div {
border-style: solid;
border-width: 15px 5px 15px 5px;
}
也可以简写为：
div {
border-style: solid;
border-width: 15px 5px;
}
也可以单独设置一个方向的边框：
div {
border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/
以此类推：
border-right：右边框
border-left：左边框
border-bottom：下边框
边框的颜色可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
p {
border-style: dashed;
border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
margin（外边距）
外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。
注：与 padding 不同的是 margin 可以是负值。
4、计算盒子的尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
通过上面的页面得出结论：CSS 定义的宽和高，指的是填充以里的内容范围，即盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高。盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。
盒子的真实尺寸计算公式如下：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
思考题：
在布局中，如果我想增大内容和边框的距离，又不想改变盒子显示的尺寸，应该怎么做？
5、外边距合并问题
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
外边距合并示例图：
解决方法如下：
- 使用这种特性
- 设置一边的外边距，一般设置margin-top
- 将元素浮动或者定位
6、margin-top塌陷
两个盒子嵌套时，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，称为margin-top塌陷。解决方法如下：
- 外部盒子设置一个边框
- 外部盒子设置 overflow:hidden
- 使用伪元素类：
.clearfix:before{
content: '';
display:table;
}
7、margin使用技巧
- 设置元素水平居中： margin:x auto;
- margin负值让元素位移及边框合并
8、默认浏览器样式
当你没有为网页定义样式时，浏览器会使用默认的样式
9、重置浏览器样式
把下面这段代码加入到你的CSS开始部分覆盖浏览器的默认样式，包含所有在页面中出现过的html标签
现在所有默认的样式都被重置了，可以自由的控制页面。
10、练习
请制作图中所示的标题：
扫一扫
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
