w3c搬运CSS念念碎

w3c搬运CSS念念碎

基本使用

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

选择器

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

## 

- 

  1. id选择器:#id名

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

     2.类选择器:.类名

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

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

css

[title]

{
color:red;
}

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

css

[title=W3School]

{
border:5px solid blue;
}

​      4.属性选择器

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

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;
}

## 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);}

## 背景图像

要把图像放入背景,需要使用 [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);}

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

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

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

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

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

- 如果需要在页面上对背景图像进行平铺,可以使用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}

使用 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;}

### 使用引号

您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 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 标题,比如使用 <h1> – <h6> 来标记标题,使用 <p> 来标记段落。 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}

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

### 列表项图像

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

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

只需要简单地使用一个 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}

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;
}

请注意,上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

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

### 折叠边框

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

css
table
{
border-collapse:collapse;
}

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

### 表格宽度和高度

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

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

### 表格文本对齐

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

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

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

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

### 表格内边距

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

css
td
{
padding:15px;
}

## 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;}

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

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

### 内边距的百分比数值

前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 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;}

### 透明边框

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

CSS2 引入了边框颜色值 transparent

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

### 值复制

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

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

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

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

p {margin: 0.5em 1em;}

下图提供了更直观的方法来了解这一点:

![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,不过其包含块是视窗本身。

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇