---

11.6.在元素周围添加内边距

顾名思义，内边距就是元素内容周围、边框以内的空间。根据上文的类比，内边距就像是图画（内容）与画框（边框）之间的衬边。可以改变内边距的厚度，不能改变它的颜色或纹理。显示在内边距区域的颜色和纹理是元素的背景，是通过 background、background-color或者 background-image 设置的。

.about {
 background-color: #2b2b2b;
padding: .3125em .625em .625em;
}
/*
跟padding: 5px 10px 10px;
是一样的，因为字体大小是16px，且
.3125 = 5px/16px .625 = 10px/16px
*/
1
2
3
4
5
6
7
8
9

同外边距类似，如果为 padding 设置四个值，那么它们分别表示上、右、下、左（按时钟顺序）内边距。因此在这里四个边都有内边距。

padding 的简记法
同 border 和 margin 属 性 一 样，padding 也可以使用简记法，从而不必使用
padding-top、padding-right 等属性为每个边都单独设定内边距。

• padding: 5px;——使用一个值，这个值就会应用于全部四个边。
• padding: 5px 9px;——使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
• padding: 5px 9px 11px;——使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。
• padding: 5px 9px 11px 0;——使用四个值，它们会按照时钟顺序，依次应用于上、右、下、左四个边。内边距的值可以使用像素、百分数、em 或 rem 的组合。

在元素周围添加内边距的方法
输入 padding: x;，这里的 x 是要添加的空间量，表示为带单位（通常为 em 或像素）的长度或父元素宽度的百分数（如 20%）。也可以输入 padding-top: x;、paddingright: x;、padding-bottom: x; 或者 padding-left: x; 单独为一个边添加内边距。

11.7.设置边框

可以在元素周围创建边框，或针对元素的某一边设置边框，并设置它的厚度、风格和颜色。如果指定了内边距，边框将包围在元素内容和内边距的外面。

.about img {
border: 5px solid #bebebe;
}
1
2
3

边框可以应用于任何元素，包括图像。如果希望对一个以上的元素设置相同的边框样式，最好引入一个类，从而可以复用，例如.frame {border: 5px solid

#bebebe; }

.nav-main {
 /* 绿色 */
border-top: 5px solid #019443;
 /* 灰色 */
border-bottom: 1px solid #c8c8c8;
}
.nav-main li {
border-left: 1px solid #c8c8c8;
display: inline-block;
}
.nav-main li:first-child {
border-left: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这些简单的边框对页面的主导航和头部起到了下定义的作用。作为一种常见的做法，每个导航链接都包含在一个列表项目（li）里。注意，这里对第一个 li 使用了border-left: none;，以取消其左边框（即改回至它的默认样式）

1. 定义边框风格
输入 border-style: type，其中的 type可以是 none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）或outset（凸边）。
2. 设置边框宽度
输入 border-width: n，这里的 n 是需要的宽度（含单位，如 4px）。
3. 设置边框颜色
输入 border-color: color，这里的color是 颜 色 名 称、 十 六 进 制 值 或 RGB、HSL、RGBA、HSLA颜色。
4. 使用简记法同时设置多个边框属性
(1) 输入 border。
(2) 如 果 需 要， 输 入 -top、-right、-bottom 或 -left 将边框效果限制在某一条边上。
(3) 如果需要，输入 -property，这里的property 可以是 style（风格）、width（宽度）或 color（颜色），仅使用单个属性设置边框。
(4) 输入冒号（:）。
(5) 输入恰当的值（如前面介绍的那样）。如果跳过了第 (3) 步，则可以指定所有三种边 框 属 性（ 如 border:1px solid 和 borderright: 2px dashed green;）。如果在第 (3)步中指定了一种属性，则只能使用这种属性可以接受的值（如 border-right-style: dotted;）。

11.8.设置元素周围的外边距

外边距是元素与相邻元素之间的透明空间。

h1 {
 color: #212121;
 font-family: "Lato", sans-serif;
 font-size: 3.25em; /* 36px/16px */
 font-weight: 300;
 letter-spacing: -2px;
 line-height: .975;
margin-bottom: .4125em; /* 21.45px */
}
1
2
3
4
5
6
7
8
9

我用自己的设置覆盖了默认的下外边距设置。

设置元素外边距的方法
输入 margin: x，其中的 x 是要添加的空间量，可以表示为长度、相对父元素宽度的百分数或 auto。也可以输入margin-top: x;、margin-right: x;、margin-bottom: x;或者 margin-left: x; 为元素的一条边应用外边距。

.map {
margin: 1.4375em 0 .8125em;
/* 23px 0 13px */
}
.links {
margin: 1.5em 0 4.125em;
 /* 24px 0 66px */
padding: 0;
}
.links li {
margin-bottom: 1.1em;
}
1
2
3
4
5
6
7
8
9
10
11
12

11.9使元素浮动

可以通过 float 属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像其他元素周围，也可以使用这种技术创建多栏布局等。
如何让文字围绕在图像周围呢？

.post-photo {
float: left;
margin-bottom: 2px;
 margin-right: 22px;
}
1
2
3
4
5

这很简单！只要让一个设置了宽度的元素浮动，在正常情况下显示在它下面的内容就会流动到它的周围（前提是这些内容没有设置宽度）。外边距的设置让图像和文字之间有了一些空隙

让文本环绕元素的步骤
(1) 输入 float:。
(2) 输入 left，让元素浮动到左边，其他内容围绕在它右边；或者输入 right，让元素浮动到右边，其他内容围绕在它左边；或者输入none，让元素完全不浮动。（none是默认值，因此只有在特定情况下需要覆盖某个浮动元素的样式规则时才需要用到它。）
(3) 使用 width 属性显式地设置元素的宽度，以便有空间放置围绕它的内容。

11.10.控制元素浮动的位置

我们可以控制浮动什么时候停止，不过在介绍这些内容之前，需要进一步理解 float属性是如何影响页面的。
控制元素浮动位置的步骤
(1) 输入 clear:。
(2) 输入 left，阻止元素浮动在该元素的左边；或输入 right，阻止元素浮动在该元素的右边；或输入 both，阻止元素浮动在该元素的左右两边；或输入 none（默认值），允许元素浮动在该元素的左右两边。
(3) 如果要让浮动元素的祖先元素在高度上包含浮动元素，并消除浮动，可以使用clearfix 或overflow 方法替代第 (1) 步和第 (2) 步。

11.11.对元素进行相对定位

每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
偏移自然流中元素的步骤
(1) 输入 position: relative;。
(2) 输 入 top、right、bottom 或 left。再输入 :d，这里的 d 是希望元素从它的自然位置偏移的距离，可以表示为绝对值（如10px）、相对值（如 2em）或百分数。值可负可正。需要添加其他偏移量，可重复这一步。

11.12.对元素进行绝对定位

正如前面提到的，网页中的元素通常按照它们在 HTML 源代码中出现的次序进行排列，除非你使用 CSS 规则改变前面的样式。也就是说，如果 img 元素出现在 p 元素之前，图像就出现在段落的前面。

通过对元素进行绝对定位，即指定它们相对于 body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流。

这与相对定位不同，绝对定位的元素不会在原先的位置留下空白。这与让元素浮动也不同。对于绝对定位的元素，其他元素不会环绕在它的周围。事实上，其他内容不知道它的存在，它也不知道其他内容的存在。

...
<header class="masthead" role="banner">
 <p class="logo"><a href="/"><img ... /> 
➝ a>p>
 <ul class="social-sites">
 ...
 ul>
 <nav role="navigation">
 <ul class="nav-main">
 ...
 ul>
 nav>
header>
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面的报头（或为页眉）依次包含了网站的标识、社交网站图标和主导航。

对元素进行绝对定位的步骤
(1) 输入 position: absolute;。
(2) 根据需要，输入 top、right、bottom或 left。再输入 :d，这里的 d 是希望元素相对于其祖先元素偏移的距离（如 10px 或 2em）或相对于其祖先的百分数。
(3) 根据需要，对其他方向重复第 (2) 步。
(4) 根据需要，对希望成为绝对定位参照体的祖先元素添加 position: relative;。如果跳过这一步，将对元素相对于body 计算偏移量。

11.13.在栈中定位元素

当你开始使用相对定位、绝对定位和固定定位以后，很可能发现元素相互重叠的情况，这时可以选择哪些元素应该出现在顶层。
在栈中定位元素
输入 z-index: n，其中的 n 是表示元素在定位过的对象堆中的层级的数字。

<div class="box1"><p>Box 1p>div>
<div class="box2"><p>Box 2p>div>
<div class="box3"><p>Box 3p>div>
<div class="box4"><p>Box 4p>div>
div {
 border: 1px solid #666;
 height: 125px;
position: absolute;
 width: 200px;
}
.box1 {
 background: pink;
 left: 110px;
 top: 50px;
z-index: 120;
}
.box2 {
 background: yellow;
 left: 0;
 top: 130px;
z-index: 530;
}
.box3 {
 background: #ccc;
position: static;
/* 静态的，没有任何效果 */
z-index: 1000;
}
.box4 {
 background: orange;
 left: 285px;
 top: 65px;
z-index: 3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

对于定位元素，z-index 最高的数显示在最上面，不管该元素在 HTML 中出现的次序。第一条规则为所有四个div设置了position: absolute;，而定义 .box3 时又覆盖了这一规则，让 .box3 回 到 默 认 的 static。 因 此， 尽 管 它的z-index 值最高，但这没有任何效果，它总是位于最底层。

11.14.处理溢出

元素并不总是包含在它们自己的盒子里。这可能是因为盒子不够大，例如，图像比它的容器更宽就会溢出；也可能是因为使用负的外边距或绝对定位让内容处于盒子的外面；还有可能你对元素设置了显式高度，它的内容太高而无法装入盒子内部。无论是哪种情况，都可以使用 overflow 属性控制元素在盒子外面的部分。

div {
 background: #e0f7ac;
 border: 1px solid #666;
height: 88px;
 width: 300px;
}
.example-hidden { /* div 2 */
overflow: hidden;
}
.example-scroll { /* div 3 */
overflow: scroll;
}
.example-auto { /* div 4 */
overflow: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里对 div 设置了高度，不过通常最好不要对元素设置高度。这里为 div 添加了背景色和边框，很容易看出不设置高度的原因。三个类演示了控制内容溢出的三种方式

决定浏览器如何处理溢出的步骤
(1) 输入 overflow:。
(2) 输入 visible，让元素盒子中的所有内容可见，这是默认项；或者输入 hidden，隐藏元素盒子容纳不了的内容；或者输入 scroll，无论元素是否需要，都在元素上添加滚动条；或者输入 auto，让滚动条仅在访问者访问溢出内容时出现。

11.15.垂直对齐元素

可以使用除默认对齐方式以外的多种方式对齐元素，让它们在页面上显得较为整齐。
使元素垂直对齐的步骤
(1) 输入 vertical-align:。
(2) 输入 baseline，使元素的基准线对齐父元素的基准线；
或者输入 middle，使元素位于父元素中央；
或者输入sub，使元素成为父元素的下标；
或者输入 super，使元素成为父元素的上标；
或者输入 text-top，使元素的顶部对齐父元素的顶部；
或者输入 text-bottom，使元素的底部对齐父元素的底部；
或者输入 top，使元素的顶部对齐当前行里最高元素的顶部；
或者输入 bottom，使元素的底部对齐当前行里最低元素的底部；
或者输入元素行高的百分比，可以是正数，也可以是负数；
或者输入某个值（正负均可，单位为像素或 em）分别按照特定的值向上或者向下移动元素。

11.16.修改鼠标指针

一般情况下，浏览器负责控制鼠标指针的形状。大多数时候使用箭头形状，指向链接时使用手指形状，等等。使用 CSS 可以修改指针的形状。
修改指针形状的步骤
(1) 输入 cursor:。
(2) 输入 pointer 表示停留在链接上时通常显示的指针形状（ ）或default表示箭头（ ），或者输入crosshair（ ）、move（ ）、wait（ ）、help（ ）、text（ ）或 progress（ ）；或者输入 auto 显示特定情形下通常使用的指针形状；或者输入 x-resize 显示双向箭头，这里的 x 是其中一个箭头需要指向的方向，可以是 n（北）、nw（西北）、e（东），等等。例如，e-resize 指针显示成 。