Fetch the repository succeeded.
从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的 HTML 只包含很少的显示属性。
随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于是 CSS 便诞生了。
1995年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为 w3c 的推荐标准。
1997年初，W3C 组织负责 CSS 的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的 CSS 规范第二版。
CSS3 是 CSS 层叠样式表技术的升级版本，于1999年开始制订，2001年5月23日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。
到目前为止，CSS3 的内容仍在不断的更新升级中。
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言。
作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。
前端三层：
html 结构层 从语义的角度出发搭建网页结构
css 样式层 从美观的角度出发描述页面样式
JavaScript 行为层 从交互的角度出发描述页面行为
CSS 的出现，实现了网页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们 web 开发者。
CSS 可以说是网页的美容师， 让我们的网页更加美观。
对比添加 CSS 和未添加 CSS 的网页效果：
| 有 CSS |
|---|
 |
| 无 CSS |
 |
从概念上来说，css 主要包含两个方面的内容：层叠式、样式。
其中，样式主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样 式、边距等）以及版面的布局等外观显示样式。层叠式是 css 中贯穿始终的加载特性。
首先，我们来学习一下样式的相关语法以及常用的几个文字样式、宽高样式。
学习 CSS，首先需要了解 CSS 的书写规则，CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，例如：
以上是一段使用 css 给 <p> 标签添加宽度和字号的样式设置效果。
css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式。
①内联式
内联式，也被习惯叫做行内式。
书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。
所有的 css 样式属性总体组成标签的 style 属性的属性值。
<div style="width: 100px;height: 100px;font‐size: 14px;">1</div>
缺点：
a、css 和 HTML 分离后，css 只负责样式，但是行内式还必须写在标签上，没有完全脱离标签。
b、HTML 标签上添加 css 样式代码，让标签结构繁重，不利于结构的解读。
c、一个行内式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。
因此，实际工作中不会使用行内式编写 css 代码。
②内嵌式
书写位置：在 HTML 文件中，<head> 标签内部有一个 <style> 标签， <style> 标签书写在< title> 标签后面，所有 css 代码书写在 <style> 标签内部。
<style> 标签有一个标签属性叫做 type，属性值是 ”text/css”，表示 <style> 标签内部书写的是纯文本类型的 css 代码。
<style type="text/css">
/*内部书写css代码*/
div {
width: 100px;
height: 100px;
background‐color: pink;
}
</style>
优点：
a、实现了结构和样式的初步分离，css 只负责样式，HTML 负责结构。
b、多个标签可以利用一段代码设置相同的样式，节省代码量。
缺点：
a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。
b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。
c、在 HTML 中如果 css 代码太多，会造成文件头重脚轻，不利于 HTML 文件的查看。
用途：初学阶段使用，或制作一些小的案例，但是如果是完整的网站项目不能使用内嵌式样式表。
③外联式
外联式 CSS，也可以叫做外链式 CSS、外部 CSS。
书写位置：在一个单独的扩展名为 .css 的文件中。
书写语法：在 .css 文件中书写时，不需要再加 <style> 标签，内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
外联式样式表必须引入到 HTML 文件中，才能正常进行加载。
引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入，href 属性设置引入 css 的路径。
<link rel="stylesheet" href="外联式.css" type="text/css" />
认识 <link> 标签的几个属性：
rel ：relationship，关系的意思，表示引入的外部文件与 HTML 之间的关系。css 文件引入时属性值是 stylesheet，说明引入的是样式表。
href ：hypertext reference，超文本引用，属性值是引入的路径。
type ：属性值 "text/css"，表示加载时代码按照纯文本形式的 css 代码加载。
其中，type 属性在 HTML5 中规定可以省略不写。
优点：
①实现了 HTML 和 css 完全分离。
②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量，还可以实现一个 css 变化，多个 HTML 页面同时变化。
③一个 HTML 文件可以引入多个 css 文件，多个文件中的代码都会加载到 HTML 页面中，可以帮我们实现代码分层。
用途：用于大型项目及完整网站制作。
④导入式
书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，通过导入方法，导入其他的外部的 .css 文件。
导入方式：利用一条 @import url(路径) 语句进行引入。
<style>
@import url(css/01.css);
div {
border‐color: #00f;
}
</style>
导入式样式表的作用与外联式样式表基本相同，但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。
实际工作中，较少使用导入式，推荐使用外联式样式表。
明确了样式表的几种书写方式，接下来以内嵌式样式表为例，学习样式的书写规则。
（1）所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内。
（2）css 在给某个标签设置样式前，必须使用选择器先选中标签。
（3）css 样式的属性，属性名和属性值的键值对写法为 k:v;。
（4）给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。
<style type="text/css">
div {
width: 200px;
}
</style>
（5）给一个标签添加所需要的样式时，只需要将属性名和属性值直接一一罗列出来，css 每条属性都会加载到浏览器上。
div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}
（6）分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
（7）css 中所有属性与属性之间对空格、换行、缩进不敏感。
div{width:200px;height:200px;background‐color:skyblue;margin‐bottom:10px;}
等价于：
div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}
提示：书写代码时，最好进行换行、合理缩进，有利于读取代码。 上传代码时，为了减少代码量，可以压缩代码。
前面已经了解过 HTML 中注释的写法与作用，在 CSS 中也可以使用注释。
css中的注释写法：
/*中间部分为注释内容*/
例如：
div {
width: 200px;
height: 200px;
background‐color: skyblue; /*设置标签的背景颜色*/
margin‐bottom: 10px;
}
vs code快捷键：ctrl+/。
建议：在 CSS 代码中合理书写注释内容。
为了书写样式书写的语法，也为了对后面的知识进行铺垫，需要了解几个比较常用的文字、盒模型样式属性。
文字的样式中，最常设置的属性是：颜色、字号、字体。
作用：给文字设置颜色。
属性名 k ：color
属性值 v ：颜色名、颜色值。
（1）颜色名就是使用颜色的英文单词进行表示。
需要记忆一些最常用的颜色名：
红色 red
橙色 orange
黄色 yellow
绿色 green
青色 cyan
蓝色 blue
紫色 purple
黑色 black
白色 white
灰色 gray
金色 gold
银色 silver
粉色 pink
浅黄色 lightyellow
黄绿色 yellowgreen
天蓝色 skyblue
案例：
<p style="color: cyan;">看文字颜色是什么？</p>
<p style="color: yellowgreen;">看文字颜色是什么？</p>
更多的颜色名可以通过查询手册得到：
（2）颜色值指使用具体颜色的数值表示，包括 rgb 模式和十六进制模式写法。
rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式，每个原色的取值范围是0-255，一共256个数值。
书写方法：rgb(红,绿,蓝)
需要记忆常用颜色色值：
红色 rgb(255,0,0)
绿色 rgb(0,255,0)
蓝色 rgb(0,0,255)
黑色 rgb(0,0,0)
白色 rgb(255,255,255)
灰色 rgb(128,128,128)
<p style="color: rgb(0,255,0);">看文字颜色是什么？</p>
**十六进制模式：**是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0-255 的数字。
十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行标签。
0→00
255→ff
书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
红色 #ff0000
绿色 #00ff00
蓝色 #0000ff
黑色 #000000
白色 #ffffff
灰色 #808080
<p style="color: #00ff00;">看文字颜色是什么？</p>
一部分十六进制颜色值可以进行简写，如果红、绿、蓝三个颜色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
红色 #f00
绿色 #0f0
蓝色 #00f
类似 #808080 是不能进行简化的。
**应用：**实际工作中，颜色值需要根据设计图得到。
作用：定义元素内文字的字体。
属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。
常用的中文字体：
宋体 SimSun
微软雅黑 Microsoft Yahei
常用的英文字体：
Arial
consolas
如果不设置字体属性，不同的浏览器有自己的默认字体。
注意1 ：font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
注意2 ： 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。
注意3 ：中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。
<p style="font‐family: 'arial','微软雅黑','宋体';">看文字字体是什么？abc</p>
**应用：**首选字体需要根据设计图确定，最后需要设置备用字体。
作用：设置文字的大小。
属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。
属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。
| 相对长度单位 | 说明 |
|---|---|
| px | 像素值，最常使用的单位 |
| em | 倍数，继承自祖先元素设置的字号的倍数 |
| % | 百分比，继承自祖先元素设置的字号的百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、IE，默认显示字号为 16px。
<p style="font‐size: 14px;">看文字字号是多少？</p>
不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。
chrome 浏览器最小加载显示字号为12px。
IE 浏览器最小可以支持1px的字号。
<p style="font‐size: 1px;">看文字字号是多少？</p>
注意：网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。
尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有 bug。
**应用：**实际工作中的字号，需要以设计图为准。
如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。
宽度属性 k：width
高度属性 k：height
属性值 v：常用px为单位的数值。
背景颜色 k：background-color，背景颜色是background综合属性的一个单一属性。
属性值 v：颜色名或颜色值，与color的属性值是一样的。
<div style="width: 100px;height: 100px;background‐color: pink;">1</div>
以上6个样式属性属于css中比较常用的，后期我们将接触更多的样式属性。
前面使用 CSS 样式属性时，直接将代码使用行内式书写在了标签上，如果在内嵌式和外部css中，要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素，这时需要用到 CSS 中的选择器。
选择器：选择要添加样式的 HTML 标签的一种方法、模式。
首先学习 css2.1 版本的七种选择器：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。
通过标签名去选择标签元素。
书写方式：标签名。
选择范围：选中的是HTML文件中所有的同名标签。
p {
color: red;
}
h2 {
color: blue;
}
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
<div>
<div>
<div>
<div>
<div>
<p>这是一个嵌套多层的段落</p>
</div>
</div>
</div>
</div>
</div>
优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
缺点：只能实现全选，不能对局部的标签添加特殊样式。
通过标签上的 id 属性去选择标签。
书写方式：#id 属性值
选择范围：只能选中一个标签。
id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
#ps1 {
color: red;
}
如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
#ps1 {
color: red;
}
#hl2 {
color: red;
}
缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。
通过标签的 class 属性去选择标签。
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签。
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。
.demo {
color: red;
}
特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。
<p class="demo para">这是一个普通段落</p>
.demo {
color: red;
}
.para {
font‐size: 30px;
}
优点：
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。
通过一个特殊符号选择页面内所有的标签。
书写方式：*
选择范围：包含 <html>标签在内的所有标签。
* {
color: red;
}
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意：实际上线的网站不允许使用 * 去清除默认内外边距。
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器。
高级选择器的组成部分是基础选择器。
通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
.box1 ul p {
color: red;
}
表示：选择的是类名为 box1 的盒子后代中的 <ul> 标签的后代中所有 <p> 标签。
后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
.box1 p {
color: red;
}
表示：选择的是类名为 box1 的盒子后代的所有 <p> 标签。
优点：减少 class 属性的定义使用，选择效率更高。
通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
比较常见的是标签与类的交集。
p.demo {
color: red;
}
表示：选择的是带有 demo 类名的所有的p标签。
交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
p.demo.para {
font‐size: 30px;
}
表示：选择的标签必须是 <p> 标签，同时必须具备 demo 和 para 两个类名。
IE6 不支持类名连续交集写法。
交集选择器可以作为其他高级选择器的组成部分。
.box1 p.demo {
font‐size: 30px;
}
表示：选择的是类名为 box1 盒子的后代中的类名为 demo 的 <p> 标签。
不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围：是所有的单独选择器选中的标签的并集集合。
不使用并集：
.box1 h2.demo {
color: red;
}
.box2 p.demo {
color: red;
}
等价于：
#box1 p.ps2,#box2 h3.ps1 {
color: red;
}
用途：
①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td {
margin: 0;
padding: 0;
}
CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。
如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
通过以下案例查看哪些css样式属性可以被继承：
.box {
width: 200px;
height: 200px;
border: 10px solid red;
background‐color: skyblue;
font‐size: 20px;
font‐family: "微软雅黑";
color: red;
}
总结：能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
为了方便在浏览器中查看 HTML 元素添加的 CSS 样式，要学会查看控制面板内的信息：
作用：继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>，后期所有的后代标签都可以从 <body> 进行继承。
body{font‐size: 14px; font‐family: "微软雅黑"; color: red; }
思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
接下来我们分情况来分析层叠性如何发挥作用：
（1）如果选择器都选中了标签自身。
第一步：比较多个选择器的权重，权重高的层叠权重低的。
基础选择器的权重：根据选择范围，范围越大权重越小，*** < **标签选择器 < 类选择器 < id 选择器。
* {
color: red;
}
p {
color: green;
}
.para {
color: blue;
}
#ps {
color: gold;
}
答案：金色
在浏览器的控制面板中，位置越靠上表示选择器权重越大：
高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
比较顺序：( id 个数, 类的个数, 标签的个数 )
HTML 结构：
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p class="para" id="ps">看文字颜色听谁的？</p>
</div>
</div>
</div>
选择器：
.box1 #box2 .box3 p { /*1,2,1*/
color: red;
}
.box1 #box2 #box3 p { /*2,1,1*/
color: green;
}
.box1 .box2 #box3 .para { /*1,3,0*/
color: blue;
}
答案：绿色
第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。
.box1 #box2 .box3 p {
color: red;
}
.box1 .box2 #box3 p {
color: green;
}
#box1 .box2 .box3 p { /*选择器权重相同，蓝色顺序是最后，层叠前面*/
color: blue;
}
答案：蓝色
(2) 如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的。
HTML 结构：
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p class="para" id="ps">看文字颜色听谁的？</p>
</div>
</div>
</div>
选择器：
#box1 {
color: red;
}
.box1 .box2 {
color: green;
}
.box1 .box2 .box3 { /*选中了距离p最近的div，层叠前面的*/
color: blue;
}
答案：蓝色
浏览器控制台层叠效果：
第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
#box1 .box2 .box3 { /*1,2,0*/
color: red;
}
#box1 #box2 .box3 { /*2,1,0*/
color: green;
}
.box1 .box2 .box3 { /*0,3,0*/
color: blue;
}
答案：绿色
第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
#box1 .box2 .box3{
color: red;
}
.box1 #box2 .box3{
color: green;
}
.box1 .box2 #box3{ /*权重相同，后面的层叠前面*/
color: blue;
}
答案：蓝色
(3) important 关键字
如果在比较选择器权重的过程中，遇见一个 important 关键字，可以将某条 CSS 样式属性的权重提升到最大。
书写位置：在某个css属性的属性值后面空格加 !important 。
注意：
① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大。
#box1 .box2 .box3 p {
color: red;
}
.box1 #box2 #box3 p {
color: green;
}
.box1 .box2 .box3 p {
color: blue !important;
}
答案：蓝色
浏览器控制台层叠效果：
(4) 行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
但是，与 important 关键字相比权重要低。
<style type="text/css">
#box1 .box2 .box3 p {
color: red;
}
.box1 #box2 #box3 p {
color: green;
}
#box1 #box2 div.box3 p {
color: blue;
}
</style>
<p class="ps" id="op" style="color: yellow;">看文字颜色听谁的？</p> <!‐‐ 行内样式权重最高 ‐‐>
答案：黄色
浏览器控制台层叠效果：
行内式与 important 相比：
<style type="text/css">
#box1 .box2 .box3 p {
color: red;
}
.box1 #box2 #box3 p {
color: green !important; /*important将color属性权重提升到最高，高于行内式*/
}
#box1 #box2 div.box3 p {
color: blue;
}
</style>
<p class="ps" id="op" style="color: yellow;">看文字颜色听谁的？</p> <!‐‐ 行内样式权重最高 ‐‐>
答案：绿色
浏览器控制台层叠效果：
总结：层叠性和继承性使用时的规律
了解完 CSS 中的样式语法、选择器写法、层叠式的含义，后期我们将重点学习 CSS 中一些常用的样式及用法。
常用的 CSS 样式中，最主要的内容分为 5 个部分：
页面修饰类：字体文本样式、背景样式；
布局类：盒模型、浮动、定位。
字体类样式我们已经学习过字号 font-size、字体 font-family 两个属性，接下来还有几个常用的字体属性。
作用：设置文字是否加粗显示。
属性名：font-weight，属于 font 属性的一个单一属性。
属性值有两种方式：单词类型、数字类型。
单词类型：
| 属性值 | 说明 |
|---|---|
| normal | 默认值，定义标准的字体 |
| bold | 定义粗体字符，b、strong标签的默认值 |
| bolder | 定义更粗的字体 |
| lighter | 定义更细的字体 |
案例：
p {
font‐weight: bold;
}
数字类型：100-900 之间的整百数字。数字越大，文字显示越粗。其中 400 等价于 normal，700 等价于 bold。
案例：
p {
font‐weight: 700;
}
作用：设置文字是否斜体显示。
属性名：font-style，属于 font 属性的一个单一属性。
属性值：
| 属性值 | 说明 |
|---|---|
| normal | 设置正规的字体，大多数标签的默认值 |
| italic | 设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示 |
| oblique | 设置倾斜的文字，只是将文字倾斜显示，与字体无关 |
案例：
.normal {
font‐style: normal;
}
.italic {
font‐style: italic;
}
.oblique {
font‐style: oblique;
}
实际应用中，更多的斜体效果习惯使用italic属性值。
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名：line-height，属于 font 属性的一个单一属性。
属性值：
| 属性值 | 说明 |
|---|---|
| px像素值 | 设置的行高的具体像素值 |
| 百分比数值 | 设置的本身字号像素值的百分比 |
案例：
p {
width: 300px;
background‐color: #0ff;
font‐size: 14px;
line‐height: 28px;
}
实际工作中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具。
量取工具：可以使用Fireworks软件。
Fireworks软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。
量取行高的步骤：
第一步：确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
错误的： 
正确的：
第二步：根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。
测量结果，可以直接设置到 CSS 中：
p {
font‐size: 14px;
font‐family: "宋体";
line‐height: 28px;
}
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
font: 14px "consolas","arial","SimSun","Microsoft Yahei";
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。
font: 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置。
font: italic bold 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
font: bold italic 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
文本类样式我们已经学习过颜色 color 属性，严格来说行高 line-height 也是文本类属性，由于其可以合写在 font 属性中个，暂时先归类到字体中学习，接下来还有几个常用的文本属性。
作用：设置文本水平方向的对齐。
属性值：三个方向的单词
| 属性值 | 作用 |
|---|---|
| left | 居左对齐,大部分标签的默认值 |
| center | 居中对齐 |
| right | 居右对齐 |
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
案例：
p {
text‐align: center;
}
作用：设置文本整体是否有线条的修饰效果。
属性值：
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签的默认值 |
| overline | 上划线 |
| line-through | 中划线，删除线，<del> 标签的默认值 |
| underline | 下划线，<a> 标签的默认值 |
案例：
.none {
text‐decoration: none;
}
.over {
text‐decoration: overline;
}
.through {
text‐decoration: line‐through;
}
.under {
text‐decoration: underline;
}
作用：设置段落首行是否进行缩进。
属性值:
| 属性值 | 说明 |
|---|---|
| px 单位 | 表示首行缩进多少像素 |
| em 单位 | 首行缩进几个中文字符的位置 |
| 百分比 | 表示缩进文字所在标签的父级标签的 width 属性值的百分比 |
实际工作中，最常使用 em 为单位的属性值。
案例：
p {
text‐indent: 2em;
}
属性值区分正负，正数表示向右缩进，负数表示向左缩进。
案例：
p {
text‐indent: ‐10em;
}
盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin。
通过一幅图，可以简单了解五个属性的功能：
盒模型的属性中，根据不同属性的效果，可以划分区域：
书写元素内容区域：width+height
盒子可以实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin
学习过程中，学会查看浏览器控制台中的盒模型图：
作用：设置可以添加元素内容的区域的宽度。
属性值：
| 属性值 | 说明 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度。 |
| px | 像素值定义的宽度。 |
| % | 定义参考父元素宽度 width 的百分比宽度。 |
如果一个元素不添加 width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。
设置像素值：
width: 300px;
设置百分比：参考父级宽度 width 的百分比。
width: 60%;
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。
作用：设置可以添加元素内容的区域的高度。
属性值：
| 属性值 | 说明 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| px | 像素值定义的高度。 |
| % | 定义参考父元素高度 height 的百分比高度。 |
如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
height: auto;
设置像素值：
height: 300px;
设置百分比：参考父级宽度 height 的百分比。
height: 60%;
作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
书写四个方向时，一般是按照顺时针规律书写：上、右、下、左。
单一属性：
p {
padding‐top: 10px;
padding‐right: 20px;
padding‐bottom: 30px;
padding‐left: 40px;
}
有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。
padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。
根据四个方向属性值不同，padding 有多种值的书写表示方法。
根据 padding 的属性值的个数不同，区分了四种表示法：
①四值法：设置四个属性值，分配方向上、右、下、左。
padding: 10px 20px 30px 40px;
②三值法：三个值分配给上、左右、下。
padding: 10px 20px 30px;
③二值法：两个值分配给上下、左右。
padding: 10px 20px;
④单值法：属性值只有一个，分配方向上右下左，四边的值相同。
padding: 10px;
实际应用时，根据设计图需要选择不同的表示方法。
案例：制作三边内边距相同，一边不同。
①使用四值法、三值法，进行属性值设置。
/*padding: 10px 10px 10px 20px;*/
padding: 10px 10px 20px;
②利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分。
padding: 10px;
padding‐top: 20px;
其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分。
作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 。
border: 10px solid #f00;
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
①按照属性值的类型划分：
线宽：border-width
线型：border-style
颜色：border-color
线宽：border-width，设置边框线的宽度。
属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法。
border‐width: 10px 20px 30px 40px;
线型：border-style，设置边框的线条形状。
属性值：形状的单词，总体也是类似 padding 的综合属性写法。
属性值的单词可能性：
| 属性值 | 说明 |
|---|---|
| none | 定义无边框。 |
| solid | 定义实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D 内容凹陷效果。其效果取决于 border-color 的值。 |
| outset | 定义 3D 内容凸出效果。其效果取决于 border-color 的值。 |
案例：
border‐style: solid dashed dotted double;
边框颜色： border-color,设置边框的颜色。
属性值：颜色名或颜色值，整体类似 padding 综合属性写法。
border‐color: #f00 #0f0 #00f #ff0;
②根据边框的方向划分：
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
每个单一属性都必须与复合属性 border 一致，设置三个属性值。
border‐top: 10px solid #f00;
border‐right: 10px solid #0f0;
③综合属性值方向和类型，进一步细分border属性：
类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分。
单一属性写法：border-方向-类型。
注意：细分时必须先写方向划分再写类型划分，否则属性名错误。
border‐right‐color: #0f0;
作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样的。
划分单一属性的方式，通过方向划分：
margin‐top: 20px;
margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;
也可以使用 margin 复合属性的四种值的写法。
margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;
margin: 10px 20px;
margin: 10px;
虽然我们了解了盒模型的五个属性的基本语法，但是在实际工作中还有更多的方法和技巧需要掌握，因此，我们需要扩展对盒模型的应用知识。
大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list-style 属性。
<a> 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text-decoration。
清除默认加粗效果：设置font-weight。
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
margin: 0;
padding: 0;
}
ul,ol {
list‐style: none;
}
a {
color: #666;
text‐decoration: none;
}
h1,h2,h3,h4,h5,h6,b,strong {
font‐weight: normal;
}
还可以给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承。
/*设置初始公共样式*/
body {
color: #666;
font‐size: 14px;
font‐family: "Arial","consolas","Microsoft Yahei","SimSun";
}
根据不同的需求，高度属性可以设置也可以不设置。
如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
如果不设置高度：会根据标签内部内容高度自动撑开。
以 <div> 标签为例，根据情况不同选择是否设置高度：
①必须设置高度：设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域。
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
属性值：
| 属性值 | 说明 |
|---|---|
| visible | 默认值，可见的可视的，溢出部分显示的。 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。 |
| auto | 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。 |
案例1：
overflow: hidden;
案例2：
overflow: scroll;
案例3：
overflow: auto;
②必须不设置高度： 要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
height: auto;
在网页中经常见到元素或者文字居中的效果。
水平居中：text-align属性。
text‐align: center;
垂直居中：
单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
.demo {
width: 300px;
height: 30px;
background: pink;
line‐height: 30px;
}
多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
.box {
width: 300px;
padding: 20px 10px;
border: 1px solid red;
text‐align: center;
}
一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
.box {
width: 300px;
padding: 20px 10px;
border: 1px solid red;
}
水平居中：针对类似 <div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
margin: 0 auto;
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素
错误效果1：
错误效果2：
解决方法：计算或量取尺寸时一定要计算准确，一像素都不能偏差。
**特殊情况：**父子盒模型中，一个子元素是类似 <div> 标签必须占一行的，如果要求子元素所有的水平方向的位置属性加和等于父元素的 width ，可以通过不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width，如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
<div class="box1"></div>
<div class="box2"></div>
父子元素塌陷：父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margintop 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
.demo {
width: 200px;
height: 200px;
background: skyblue;
margin‐top: 40px;
}
.demo p {
width: 100px;
height: 100px;
background: pink;
margin‐top: 50px;
}
更特殊的：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
.demo {
width: 200px;
height: 200px;
background: skyblue;
}
.demo p {
width: 100px;
height: 100px;
background: pink;
margin‐top: 40px;
}
解决margin塌陷问题的方法：
①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
另外注意：水平方向的 margin 没有塌陷现象。
在我们遇到的 HTML 元素中，有的标签元素如 <div>、<p> 等在浏览器中加载时必须独自占满一行，有的标签元素如 <a> 、<span>等则不会独占一行，原因是什么？
其实，标准文档流的性质可以帮我们解决这些问题。
标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。
①空白折叠现象。
②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。
块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。
行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等。
行内块元素：比如 <img>、<input> 等。
各种等级的元素有自己的加载特点。
a、块级元素可以设置宽高，在浏览器中正常加载。
width: 200px;
height: 100px;
b、块级元素必须独占一行，不能与其他任何标签并排一行。
c、块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。
a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
span {
width: 100px;
height: 100px;
padding: 10px;
border: 3px solid #f00;
margin: 10px;
background‐color: pink;
}
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质，例如空白折叠现象。
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。
属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
block 砖、块的意思，表示元素要以块级元素模式加载，具备块级特点
display: block;
inline 行内的意思，表示元素要以行内元素模式加载，具备行内特点
display: inline;
inline-block 行内块的意思，表示标签要以行内块模式加载，具备行内块特点
display: inline‐block;
none 没有的意思，表示标签及内部内容直接隐藏，让出原有标准流的位置
display: none;
隐藏的元素要想再次显示，可以将 display 的属性值设置为 block。
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
浮动是我们学习的第一种脱离标准流的方式。
浮动是一种非常重要的布局属性。
属性名：float，漂流、浮动的意思。
属性值：
left 左浮动
right 右浮动
作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
.box p {
float: left;
width: 100px;
height: 100px;
background‐color: skyblue;
margin‐right: 10px;
}
float: right;
为了更好的利用浮动进行布局，我们需要了解浮动相关的性质。
标准文档流特点：区分行块。
块级元素：可以设置宽高，必须独占一行。
行内元素：不能设置宽高，可以并排一行。
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
浮动前：
浮动后：
如果浮动的元素不设置宽高，会被内容自动撑开：
浮动属性值：left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。
以 left 为例：
父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
浮动前：
浮动后：并排一排，父元素宽度足够。
父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。
右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边。
应用：利用浮动依次贴边的性质，用列表结构模拟表格布局结构。
制作方法：<ul> 内部嵌套的 <li> 标签全部浮动，宽高设置相同，边框可以利用标签之间的间距和背景颜色的差异进行制作。
ul li {
float: left;
width: 100px;
height: 30px;
margin: 0 2px 2px 0;
background‐color: skyblue;
line‐height: 30px;
text‐align: center;
}
注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。
利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：
①上述表格效果。
②导航栏效果。
③常见的电商或企业网站布局。
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。
| 标准流 | 浮动 |
|---|---|
 |
 |
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
浮动前：
给粉色盒子浮动，蓝色盒子不浮动：
粉色盒子浮动后，让出了标准流位置，蓝色盒子自动占据了原来粉色盒子的标准流位置。
显示效果：浮动的盒子飘浮起来压盖住了后面的同级的元素。
在 IE6 、 7浏览器中，有兼容问题：
由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。
这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果：
标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。
如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
另外，父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
以上的问题需要被解决，解决方法是清除浮动带来的影响。
清除浮动的影响，有以下几种方法：
给标准流的父元素强制给一个合适的高度：
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。
注意：这种height清除浮动的方法，只适合父盒子高度固定的情况。
clear，清除。
作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值：
left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
clear: both;
解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
**外墙法：**在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear：both 属性。
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl"></div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
.cl {
clear: both;
height: 10px;
}
解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
问题：父元素没有高度自适应。
**内墙法：**在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性。
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<div class="cl"></div>
</div>
.cl {
clear: both;
}
解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。
本质是使用伪类方法利用css代码书写一堵内墙。
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
.clearfix:after {
content: "1"; /*添加一个文字内容*/
display: block; /*将文字转为块级元素*/
height: 0; /*将盒子高度固定为0，避免影响父盒子高度*/
clear: both; /*清除前面浮动影响*/
visibility: hidden; /*将创建的元素占位置隐藏*/
}
小偏方：给内部有浮动子元素的父元素添加溢出隐藏属性，可以解决浮动的所有问题。
overflow: hidden;
补充：overflow 属性。
元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
总结：
如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。
<a> 标签的伪类清除浮动时，我们接触到了伪类:after，现在我们来详细了解一下伪类的概念，并学习几个a标签常用的伪类。
伪类和类之间有一定的相似之处，也存在明显的区别。
普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器的权重与普通的类选择器相同。
伪类选择器写法：前面是普通的选择器，后面紧跟**:伪类名**。
<a> 标签可以根据用户行为不同，划分为四种状态，通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
a:link { /*访问前状态*/
color: gray;
}
a:visited { /*访问后状态*/
color: cyan;
}
a:hover { /*鼠标悬浮状态*/
color: red;
}
a:active { /*鼠标点击状态*/
color: yellow;
}
<a> 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
为了方便记忆，利用爱恨准则：love hate。
a:link {
color: gray;
}
a:visited {
color: cyan;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。
a:link,a:visited {
color: #666;
}
a:hover {
color: #f00;
}
更加常用的一种设置方式如下：
<a> 标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的 <a> 默认显示样式的属性，包括盒模型、文字等。
a:hover 伪类选择器：设置鼠标移上时不一样的样式属性。
a {
display: block;
width: 150px;
height: 50px;
background‐color: skyblue;
font: bold 20px/50px "微软雅黑";
text‐align: center;
color: #fff;
text‐decoration: none;
}
a:hover {
background‐color: yellowgreen;
}
鼠标移上前： 
鼠标移上： 
鼠标离开： 
注意：其他标签也可以设置 :hover 伪类状态。
CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。
CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。
属性名：background-color
作用：在盒子区域添加背景颜色的修饰。
加载区域：在 border 及以内加载背景颜色。
属性值：颜色名、颜色值。
颜色值：rgb 模式、十六进制模式、rgba 模式。
rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
书写方式：rgba(红色，绿色，蓝色，不透明度)
background‐color: rgba(0,255,0,0.4);
属性名：background-image
作用：给盒子添加图片的背景修饰。
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
background‐image: url(images/meng.jpg);
如果图片不重复，从 border 以内开始加载。
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。
属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载。
根据属性值不同，有四种重复加载方式：
repeat 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
background‐repeat: repeat;
norepeat 不重复，不论背景图是否大于盒子范围，都只加载一次图片
background‐repeat: no‐repeat;
repeat-x 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
background‐repeat: repeat‐x;
repeat-y 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
background‐repeat: repeat‐y;
属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。
第一个属性值：表示背景图片在水平方向的位置。
第二个属性值：表示背景图片在垂直方向的位置。
属性值都是使用代表方向的单词进行书写。
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
background‐position: right bottom;
使用像素值作为背景定位的属性值。
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
background‐position: 100px 50px;
像素值区分正负，正负代表位移方向不同：
正数：表示图片针对盒子的原点向右、向下移动。
负数：表示图片针对盒子的原点向左、向上移动。
background‐position: ‐100px ‐50px;
可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。
制作方法，需要使用 FW 软件量取尺寸，读取数据。
第一步：在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左上顶点位于想要加载的背景部分。
第二步：读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x 和 y 的数值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。
.house {
width: 125px;
height: 83px;
border: 5px solid #f00;
background‐image: url(images/9.jpg);
background‐repeat: no‐repeat;
background‐position: ‐198px ‐18px;
}
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
background‐position: 100% 100%;
属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值有两个：
scroll 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。
background‐attachment: scroll;
fixed 固定的，属性值为 fixed 之后，背景图的定位的参考点就从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。
background‐attachment: fixed;
background 属性可以将五个单一属性的值进行合写。
属性值：可以有 15 个属性值，值之间用空格进行分隔，背景定位的两个属性值算一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
background: url(images/bg4.jpg) no‐repeat center top fixed #fff;
如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
background: pink;
如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。
background: url(images/bg4.jpg) no‐repeat center top fixed #fff;
background‐attachment: scroll;
背景属性在实际应用中有很多使用场景，我们需要了解几个比较常见的场景。
<h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片。
另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。
如果使用插入图，就不能书写搜索关键字。
<h1>
<a href="#"><img src="images/logo.png" alt="" /></a>
</h1>
如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。
<h1>
<a href="#">淘宝网|购物|六一</a>
</h1>
<style>
.header h1 a {
display: block;
width: 146px;
height: 58px;
background: url(images/logo.png) no‐repeat;
}
</style>
下一步将文字进行隐藏设置：
①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。
font‐size: 0;
②可以设置给 <a> 标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。
text‐indent: ‐100em;
overflow: hidden;
在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
padding-left 区域背景：
.news li {
padding‐left: 25px;
background: url(images/s2.png) no‐repeat left center;
}
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
CSS 精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。
技术依据：
①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。
②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
制作精灵图的注意事项：
a. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
b. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
c. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载时不能出现多余内容。
d. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度，取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
同样， 可以给文字和边框透明，都是 rgba 的格式来写。
color: rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
CSS3中规定，一个盒子上，可以添加多个背景图片。
background-image的属性值书写时，以逗号分隔多背景的URL路径地址。
background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);
/*
bg_flower.gif为蓝色图片
bg_flower_2.gif为灰色图片
*/
注意：背景加载时，先写的背景压盖后写的背景图片。
我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。
定位属性名：position。
属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向：left、right。
垂直方向：top、bottom。
属性值：常用 px 为单位的数值，或者百分比。
属性值：relative，相对的意思。
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。
position: relative;
left: 100px;
top: 100px;
相对定位的性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。标签显示效果上，原位留坑，形影分离。
注意①：偏移量属性的值是区分正负的。
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。
left: ‐50px;
top: ‐100px;
注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
left: ‐50px;
top: ‐100px;
right: ‐50px;
bottom: ‐50px;
建议：书写时从水平方向和垂直方向各挑一个属性进行组合。
注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。
为了方便记忆，可以只使用 left、top 组合。
right: ‐50px;
bottom: ‐50px;
等价于：
left: 50px;
top: 50px;
实际应用：
①由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
②相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
属性值：absolute，绝对的意思。
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。
必须搭配偏移量属性才会发生位置移动。
position: absolute;
left: 50px;
top: 50px;
绝对定位的性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
<body> 为参考元素的参考点以 <body> 为参考元素时，参考点的确定与偏移量方向有关。
第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
right: 50px;
top: 50px;
left: 50px;
top: 50px;
注意：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
left: 50px;
bottom: 50px;
right: 50px;
bottom: 50px;
实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。
如果祖先级中有定位的元素，就不会去参考 <body> 。
参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。
<div class="box1"> 有相对定位
<div class="box2"> 有绝对定位
<div class="box3"> 没有定位
<p></p> 绝对定位的p的参考元素是距离更近的有定位的box2
</div>
</div>
</div>
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。
left: 50px;
top: 50px;
right: 50px;
top: 50px;
left: 50px;
bottom: 50px;
right: ‐150px;
bottom: 50px;
属性值：fixed，固定的意思。
参考元素：浏览器窗口。
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。
.backtop {
position: fixed;
width: 100px;
height: 50px;
right: 50px;
bottom: 50px;
background‐color: #ccc;
font: bold 20px/50px "Arial";
text‐align: center;
color: #333;
text‐decoration: none;
}
性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
定位 position 根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。
三种定位在页面中有各自的使用场景，其中的使用技巧
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
案例：
<div class="box"> 相对定位
<img src="images/1.jpg" alt="" /> 标准流子级
<p></p> 绝对定位压盖上面的图片
</div>
定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。
百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度。
left: 50%;
第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。
代码：
margin‐left: ‐50px;
注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。
扩展应用：
①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。
实际使用中，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在HTML中后写的定位压盖先写的定位。
因此，书写代码时，需要注意压盖效果，必须合理设置HTML书写顺序。
如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。
属性值：数字。
①属性值大的会压盖属性值小的，设置zindex属性的会压盖没有设置的。
z‐index: 20;
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③zindex属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置zindex，后写的压盖先写的；如果设置了zindex，值大的压盖值小的。
子级盒子：如果父级没有设置zindex属性，子级zindex大的会压盖小的；如果父级设置了zindex值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。
案例：轮播图静态结构。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。