w3c搬运CSS念念碎

w3c搬运CSS念念碎

基本使用

  • 当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
  • 如果值为若干单词,则要给值加引号
1
2
3
p {
font-family: "sans serif";
}
  • 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

选择器

  • 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
1
2
3
h1,h2,h3,h4,h5,h6 {
color: green;
}
  • ```CSS
    body {
    font-family: Verdana, sans-serif;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li,  dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana  字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

##

-

1. id选择器:#id

**在现代布局中,id 选择器常常用于建立派生选择器。**

2.类选择器:.类名

3.属性选择器: [属性]

下面的例子为带有 title 属性的所有元素设置样式:

css

[title]

{
color:red;
}

1
​      下面的例子为 title="W3School" 的所有元素设置样式:

css

[title=W3School]

{
border:5px solid blue;
}

1
2
3
4.属性选择器

属性选择器在为不带有 classid 的表单设置样式时特别有用:

CSS
input[type=”text”]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type=”button”]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## CSS 选择器参考手册

选择器 描述
------------------------------------------------------------ ------------------------------------------------------------
[[*attribute*\]](https://www.w3school.com.cn/cssref/selector_attribute.asp) 用于选取带有指定属性的元素。
[[*attribute*=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value.asp) 用于选取带有指定属性和值的元素。
[[*attribute*~=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp) 用于选取属性值中包含指定词汇的元素。
[[*attribute*\=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value_start.asp) 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[[*attribute*^=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_begin.asp) 匹配属性值以指定值开头的每个元素。
[[*attribute*$=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_end.asp) 匹配属性值以指定值结尾的每个元素。
[[*attribute**=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_contain.asp) 匹配属性值中包含指定值的每个元素。



- background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

- 如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

CSS
body {background-image: url(/i/eg_bg_04.gif);}

1
2
3
4
5
## 背景图像

要把图像放入背景,需要使用 [background-image 属性](https://www.w3school.com.cn/cssref/pr_background-image.asp)。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

CSS
body {background-image: url(/i/eg_bg_04.gif);}

1
2
3
大多数背景都应用到 body 元素,不过并不仅限于此。

下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:

CSS
p.flower {background-image: url(/i/eg_bg_03.gif);}

1
您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:

CSS
a.radio {background-image: url(/i/eg_bg_07.gif);}

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
- 如果需要在页面上对背景图像进行平铺,可以使用background-repeat属性

- 属性值repeat导致图像在水平垂直向上都平铺,repeat-x, repeat-y分别导致图像只在水平或垂直方向上重复。

- 用法:`background-repeat:repeat-x;`

### 背景定位

- 可以利用background-position属性改变图像在背景中的位置。为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

### 关键字

图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。

如果只出现一个关键字,则认为另一个关键字是 center。

- 下面是等价的位置关键字:

单一关键字 等价的关键字
---------- ------------------------------
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

- ## 背景关联

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

您可以通过 [background-attachment 属性](https://www.w3school.com.cn/cssref/pr_background-attachment.asp)防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

- `background-attachment:fixed(固定背景)`

- `background-attachment:scoll (跟随滚动)`

- ## CSS 背景属性

属性 描述
------------------------------------------------------------ --------------------------------------------
[background](https://www.w3school.com.cn/cssref/pr_background.asp) 简写属性,作用是将背景属性设置在一个声明中。
[background-attachment](https://www.w3school.com.cn/cssref/pr_background-attachment.asp) 背景图像是否固定或者随着页面的其余部分滚动。
[background-color](https://www.w3school.com.cn/cssref/pr_background-color.asp) 设置元素的背景颜色。
[background-image](https://www.w3school.com.cn/cssref/pr_background-image.asp) 把图像设置为背景。
[background-position](https://www.w3school.com.cn/cssref/pr_background-position.asp) 设置背景图像的起始位置。
[background-repeat](https://www.w3school.com.cn/cssref/pr_background-repeat.asp) 设置背景图像是否及如何重复。

## **CSS 文本属性可定义文本的外观。**

**通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。**

## CSS 文本属性

属性 描述
------------------------------------------------------------ -----------------------------------------------------------
[color](https://www.w3school.com.cn/cssref/pr_text_color.asp) 设置文本颜色
[direction](https://www.w3school.com.cn/cssref/pr_text_direction.asp) 设置文本方向。
[line-height](https://www.w3school.com.cn/cssref/pr_dim_line-height.asp) 设置行高。
[letter-spacing](https://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp) 设置字符间距。
[text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) 对齐元素中的文本。
[text-decoration](https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp) 向文本添加修饰。
[text-indent](https://www.w3school.com.cn/cssref/pr_text_text-indent.asp) 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
[text-transform](https://www.w3school.com.cn/cssref/pr_text_text-transform.asp) 控制元素中的字母。
unicode-bidi 设置文本方向。
[white-space](https://www.w3school.com.cn/cssref/pr_text_white-space.asp) 设置元素中空白的处理方式。
[word-spacing](https://www.w3school.com.cn/cssref/pr_text_word-spacing.asp) 设置字间距。

### 缩进文本

- 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。

- CSS 提供了 [text-indent 属性](https://www.w3school.com.cn/cssref/pr_text_text-indent.asp),该属性可以方便地实现文本缩进。

- 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

- 注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

- 提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。


### 水平对齐

[text-align]

(https://www.w3school.com.cn/cssref/pr\_text\_text-align.asp) 是一个基本的属性,它会影响一个元素中的*文本行*互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。 最后一个水平对齐属性是 justify(对单行无效)。 **注意text-align不会处理被打断的行和最后一行!** 在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。 #### 可能的值 值 描述 ——- —————————————— left 把文本排列到左边。默认值:由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。 ### 字间隔

[word-spacing 属性]

(https://www.w3school.com.cn/cssref/pr\_text\_word-spacing.asp)可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近: ### 字母间隔

[letter-spacing 属性]

(https://www.w3school.com.cn/cssref/pr\_text\_letter-spacing.asp)与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。 与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量: ### 字符转换

[text-transform 属性]

(https://www.w3school.com.cn/cssref/pr\_text\_text-transform.asp)处理文本的大小写。这个属性有 4 个值: - none - uppercase - lowercase - capitalize 默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。 作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:

h1 {text-transform: uppercase}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

### 文本装饰

接下来,我们讨论 [text-decoration 属性](https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp),这是一个很有意思的属性,它提供了很多非常有趣的行为。

text-decoration 有 5 个值:

- none
- underline
- overline
- line-through
- blink

### 处理空白符

[white-space 属性]

(https://www.w3school.com.cn/cssref/pr\_text\_white-space.asp)会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。 通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行: #### 总结 下面的表格总结了 white-space 属性的行为: 值 空白符 换行符 自动换行 ——– —— —— ——– pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许 ### 文本方向 如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

[direction 属性]

(https://www.w3school.com.cn/cssref/pr\_text\_direction.asp)影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。 注释:对于行内元素,只有当 [unicode-bidi 属性](https://www.w3school.com.cn/cssref/pr\_unicode-bidi.asp)设置为 embed 或 bidi-override 时才会应用 direction 属性。 direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。 ## CSS 字体 ### CSS 字体属性 属性 描述 ———————————————————— ———————————————————— [font](https://www.w3school.com.cn/cssref/pr\_font\_font.asp) 简写属性。作用是把所有针对字体的属性设置在一个声明中。 [font-family](https://www.w3school.com.cn/cssref/pr\_font\_font-family.asp) 设置字体系列。 [font-size](https://www.w3school.com.cn/cssref/pr\_font\_font-size.asp) 设置字体的尺寸。 [font-size-adjust](https://www.w3school.com.cn/cssref/pr\_font\_font-size-adjust.asp) 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。) [font-stretch](https://www.w3school.com.cn/cssref/pr\_font\_font-stretch.asp) 对字体进行水平拉伸。(CSS2.1 已删除该属性。) [font-style](https://www.w3school.com.cn/cssref/pr\_font\_font-style.asp) 设置字体风格。 [font-variant](https://www.w3school.com.cn/cssref/pr\_font\_font-variant.asp) 以小型大写字体或者正常字体显示文本。 [font-weight](https://www.w3school.com.cn/cssref/pr\_font\_weight.asp) 设置字体的粗细。 在 CSS 中,有两种不同类型的字体系列名称: - 通用字体系列 - 拥有相似外观的字体系统组合(比如 “Serif” 或 “Monospace”) - 特定字体系列 - 具体的字体系列(比如 “Times” 或 “Courier”) 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列: - Serif 字体 - Sans-serif 字体 - Monospace 字体 - Cursive 字体 - Fantasy 字体 ### 指定字体系列 使用 [font-family 属性](https://www.w3school.com.cn/cssref/pr\_font\_font-family.asp) 定义文本的字体系列。 ### 使用通用字体系列 如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

body {font-family: sans-serif;}

1
2
3
4
5
6
7
8
### 使用引号

您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号:

### 字体风格

[font-style 属性]

(https://www.w3school.com.cn/cssref/pr\_font\_font-style.asp)最常用于规定斜体文本。 该属性有三个值: - normal - 文本正常显示 - italic - 文本斜体显示 - oblique - 文本倾斜显示 ### italic 和 oblique 的区别(没啥区别) font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。 斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。 通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。 ### 字体变形

[font-variant 属性]

(https://www.w3school.com.cn/cssref/pr\_font\_font-variant.asp)可以设定小型大写字母。 小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。 ### 字体大小

[font-size 属性]

(https://www.w3school.com.cn/cssref/pr\_font\_font-size.asp)设置文本的大小。 有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。 请始终使用正确的 HTML 标题,比如使用

-

来标记标题,使用

来标记段落。 font-size 值可以是绝对或相对值。 绝对值: - 将文本设置为指定的大小 - 不允许用户在所有浏览器中改变文本大小(不利于可用性) - 绝对大小在确定了输出的物理尺寸时很有用 相对大小: - 相对于周围的元素来设置大小 - 允许用户在浏览器改变文本大小 注意:如果您没有规定字体大小,**普通文本(比如段落)的默认大小是 16 像素**** (**16px=1em**)。 #### 使用像素来设置字体大小 通过像素设置文本大小,可以对文本大小进行完全控制: #### 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。 链接的特殊性在于能够根据它们所处的状态来设置它们的样式。 链接的四种状态: - a:link - 普通的、未被访问的链接 - a:visited - 用户已访问的链接 - a:hover - 鼠标指针位于链接的上方 - a:active - 链接被点击的时刻 当为链接的不同状态设置样式时,请按照以下次序规则: - a:hover 必须位于 a:link 和 a:visited 之后 - a:active 必须位于 a:hover 之后 否则部分设定将冲突 用color设定字体,用background-color设定背景 ## CSS 列表 从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。 由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是一大憾事。 ### 列表类型 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。 例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。 要修改用于列表项的标志类型,可以使用属性 [list-style-type](https://www.w3school.com.cn/cssref/pr\_list-style-type.asp):

CSS
ul {list-style-type : square}

1
2
3
4
5
上面的声明把无序列表中的列表项标志设置为方块。

### 列表项图像

有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 [list-style-image](https://www.w3school.com.cn/cssref/pr_list-style-image.asp) 属性做到:

CSS
ul li {list-style-image : url(xxx.gif)}

1
2
3
4
5
6
7
8
9
只需要简单地使用一个 url() 值,就可以使用图像作为标志。

### 列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 [list-style-position](https://www.w3school.com.cn/cssref/pr_list-style-position.asp) 完成的。

### 简写列表样式

为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:[list-style](https://www.w3school.com.cn/cssref/pr_list-style.asp),就像这样:

CSS
li {list-style : url(example.gif) square inside}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

## CSS 表格

### CSS Table 属性

属性 描述
------------------------------------------------------------ ------------------------------------
[border-collapse](https://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp) 设置是否把表格边框合并为单一的边框。
[border-spacing](https://www.w3school.com.cn/cssref/pr_tab_border-spacing.asp) 设置分隔单元格边框的距离。
[caption-side](https://www.w3school.com.cn/cssref/pr_tab_caption-side.asp) 设置表格标题的位置。
[empty-cells](https://www.w3school.com.cn/cssref/pr_tab_empty-cells.asp) 设置是否显示表格中的空单元格。
[table-layout](https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp) 设置显示单元、行和列的算法。

### 表格边框

如需在 CSS 中设置表格边框,请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框:

CSS
table, th, td
{
border: 1px solid blue;
}

1
2
3
4
5
6
7
请注意,上例中的表格具有双线条边框。这是由于 tableth 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框,请使用 border-collapse 属性。

### 折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框:

css
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
### 表格宽度和高度

通过 widthheight 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%,同时将 th 元素的高度设置为 50px

### 表格文本对齐

text-alignvertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:

vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:

css
td
{
height:50px;
vertical-align:bottom;
}

1
2
3
### 表格内边距

如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:

css
td
{
padding:15px;
}

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
35
36
37
38
39
40
41
## CSS 轮廓

属性 描述 CSS
------------------------------------------------------------ -------------------------------- ----
[outline](https://www.w3school.com.cn/cssref/pr_outline.asp) 在一个声明中设置所有的轮廓属性。 2
[outline-color](https://www.w3school.com.cn/cssref/pr_outline-color.asp) 设置轮廓的颜色。 2
[outline-style](https://www.w3school.com.cn/cssref/pr_outline-style.asp) 设置轮廓的样式。 2
[outline-width](https://www.w3school.com.cn/cssref/pr_outline-width.asp) 设置轮廓的宽度。 2

## CSS盒子模型

属性 描述
------------------------------------------------------------ ----------------------------------------------------
[padding](https://www.w3school.com.cn/cssref/pr_padding.asp) 简写属性。作用是在一个声明中设置元素的所内边距属性。
[padding-bottom](https://www.w3school.com.cn/cssref/pr_padding-bottom.asp) 设置元素的下内边距。
[padding-left](https://www.w3school.com.cn/cssref/pr_padding-left.asp) 设置元素的左内边距。
[padding-right](https://www.w3school.com.cn/cssref/pr_padding-right.asp) 设置元素的右内边距。
[padding-top](https://www.w3school.com.cn/cssref/pr_padding-top.asp) 设置元素的上内边距。

### 术语翻译

- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
- width:宽度。
- height:高度。

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudzNzY2hvb2wuY29tLmNuL2kvY3RfYm94bW9kZWwuZ2lm)

元素框的最内部分是实际的内容,直接包围内容的是内边距padding。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距margin都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

### CSS padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负

内边距,只需要这样:

css
h1 {padding: 10px;}

1
您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

CSS
h1 {padding: 10px 0.25em 2ex 20%;}

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
### 内边距的百分比数值

前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

### CSS 边框

### CSS 边框属性

属性 描述
------------------------------------------------------------ ------------------------------------------------------------
[border](https://www.w3school.com.cn/cssref/pr_border.asp) 简写属性,用于把针对四个边的属性设置在一个声明。
[border-style](https://www.w3school.com.cn/cssref/pr_border-style.asp) 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
[border-width](https://www.w3school.com.cn/cssref/pr_border-width.asp) 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
[border-color](https://www.w3school.com.cn/cssref/pr_border-color.asp) 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
[border-bottom](https://www.w3school.com.cn/cssref/pr_border-bottom.asp) 简写属性,用于把下边框的所有属性设置到一个声明中。
[border-bottom-color](https://www.w3school.com.cn/cssref/pr_border-bottom_color.asp) 设置元素的下边框的颜色。
[border-bottom-style](https://www.w3school.com.cn/cssref/pr_border-bottom_style.asp) 设置元素的下边框的样式。
[border-bottom-width](https://www.w3school.com.cn/cssref/pr_border-bottom_width.asp) 设置元素的下边框的宽度。
[border-left](https://www.w3school.com.cn/cssref/pr_border-left.asp) 简写属性,用于把左边框的所有属性设置到一个声明中。
[border-left-color](https://www.w3school.com.cn/cssref/pr_border-left_color.asp) 设置元素的左边框的颜色。
[border-left-style](https://www.w3school.com.cn/cssref/pr_border-left_style.asp) 设置元素的左边框的样式。
[border-left-width](https://www.w3school.com.cn/cssref/pr_border-left_width.asp) 设置元素的左边框的宽度。
[border-right](https://www.w3school.com.cn/cssref/pr_border-right.asp) 简写属性,用于把右边框的所有属性设置到一个声明中。
[border-right-color](https://www.w3school.com.cn/cssref/pr_border-right_color.asp) 设置元素的右边框的颜色。
[border-right-style](https://www.w3school.com.cn/cssref/pr_border-right_style.asp) 设置元素的右边框的样式。
[border-right-width](https://www.w3school.com.cn/cssref/pr_border-right_width.asp) 设置元素的右边框的宽度。
[border-top](https://www.w3school.com.cn/cssref/pr_border-top.asp) 简写属性,用于把上边框的所有属性设置到一个声明中。
[border-top-color](https://www.w3school.com.cn/cssref/pr_border-top_color.asp) 设置元素的上边框的颜色。
[border-top-style](https://www.w3school.com.cn/cssref/pr_border-top_style.asp) 设置元素的上边框的样式。
[border-top-width](https://www.w3school.com.cn/cssref/pr_border-top_width.asp) 设置元素的上边框的宽度。

在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

### 边框的颜色

设置边框颜色非常简单。CSS 使用一个简单的 [border-color 属性](https://www.w3school.com.cn/cssref/pr_border-color.asp),它一次可以接受最多 4 个颜色值。

### 边框的宽度

您可以通过 [border-width 属性](https://www.w3school.com.cn/cssref/pr_border-width.asp)为边框指定宽度。

### 边框的样式

样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。

CSS 的 [border-style 属性](https://www.w3school.com.cn/cssref/pr_border-style.asp)定义了 10 个不同的非 inherit 样式,包括 none。

例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:

css
a:link img {border-style: outset;}

1
2
3
4
5
6
7
8
9
10
11
12
13
### 透明边框

我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。

CSS2 引入了边框颜色值 transparent

写两个颜色,这样写法称为*值复制*

### 值复制

还记得吗?我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

有时,我们会输入一些重复的值:

p {margin: 0.5em 1em 0.5em 1em;}

1
通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:

p {margin: 0.5em 1em;}

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
35
36
37
38
39
40
41
42
43
下图提供了更直观的方法来了解这一点:

![CSS 值复制](https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudzNzY2hvb2wuY29tLmNuL2kvY3RfY3NzX21hcmdpbl92YWx1ZS5naWY)

换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

### CSS margin 属性

属性 描述
------------------------------------------------------------ ------------------------------------------
[margin](https://www.w3school.com.cn/cssref/pr_margin.asp) 简写属性。在一个声明中设置所有外边距属性。
[margin-bottom](https://www.w3school.com.cn/cssref/pr_margin-bottom.asp) 设置元素的下外边距。
[margin-left](https://www.w3school.com.cn/cssref/pr_margin-left.asp) 设置元素的左外边距。
[margin-right](https://www.w3school.com.cn/cssref/pr_margin-right.asp) 设置元素的右外边距。
[margin-top](https://www.w3school.com.cn/cssref/pr_margin-top.asp) 设置元素的上外边距。

设置外边距的最简单的方法就是使用 [margin 属性](https://www.w3school.com.cn/cssref/pr_margin.asp)。

margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。

margin 的默认值是 0

在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外

## CSS 定位 (Positioning)

## CSS 定位和浮动

CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

## 一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为*一块内容*,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

您可以使用 [display 属性](https://www.w3school.com.cn/cssref/pr_class_display.asp)改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

some text

Some more text.

```

在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS position 属性

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性

描述

position

把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top

定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right

定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom

定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left

定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow

设置当元素的内容溢出其区域时发生的事情。

clip

设置元素的形状。元素被剪入这个形状之中,然后显示出来。

vertical-align

设置元素的垂直对齐方式。

z-index

设置元素的堆叠顺序。

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

  • static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  • relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  • absolute 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  • fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。