CSS
认识CSS
产生背景
- 从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显示属性。
- 随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能，例如文本格式化标签。
- 但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML页面也越来越臃肿。
- 于是 CSS 便诞生了。
发展过程
CSS概念
- css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言。
- 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS规则
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
css规则
书写位置
css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式。
内联式 - 内联式，也被习惯叫做行内式。
- 书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。
- 所有的 css 样式属性总体组成标签的 style 属性的属性值。
<div style="width: 100px; height: 100px;"></div>
内联式缺点
a、内联式必须写在标签上，没有完全脱离 HTML 标签。
b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。
c、一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。
因此，实际工作中不会使用内联式（行内式）编写 css 代码。
内嵌式
- 书写位置：在 HTML 文件中，<head> 标签内部有一个 <style> 标签。<style> 标签书写在< title> 标签后面，所有 css 代码书写在 <style> 标签内部 。
- <style> 标签有一个标签属性叫做 type，属性值是 ”text/css”。
td,th{
width: 120px;
}
内嵌式特点
优点
a、实现了结构和样式的初步分离，css 只负责样式，HTML 负责结构。
b、多个标签可以利用一段代码设置相同的样式，节省代码量。
缺点
a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。
b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。
c、在 HTML 中如果 css 代码太多，会造成文件头重脚轻。
外联式
- 外联式 CSS，也可以叫做外链式 CSS、外部 CSS。
- 书写位置：在一个单独的扩展名为 .css 的文件中。
- 书写语法：内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
- 注意：在 .css 文件中书写时，不需要再加 <style> 标签
.mbanner .container {padding:125px 0 0; color:#fff; font-size:26px; line-height:1.3;}
.mbanner .container .title_h01 {margin-bottom:20px;}
.mbanner .container .btn_wrap {margin-top:45px;}
.mbanner.dealer {height:527px; background:url('../images/main_new/mbanner_dealer_bg.jpg') no-repeat 50% 50%; background-size:cover;}
.mbanner.dealer .container {padding:185px 0 0;}
.mbanner.promotion {height:536px; background:url('../images/main_new/mbanner_promotion_bg.jpg') no-repeat 50% 50%; background-size:cover;}
.mbanner.testresult {height:537px; background:url('../images/main_new/mbanner_testresult_bg.jpg') no-repeat 50% 50%; background-size:cover;}
.mbanner.testresult .figure {position:absolute; top:60px; right:0;}
.mvod .container {padding:125px 0 45px; color:#fff; font-size:26px; line-height:1.3;}/*20200901 Main Page Additional Update Dean */
.mvod .container .title_h01 {margin-bottom:50px;}
.mvod .vodarea {position:relative; margin-bottom:18px;}
.mvod .vodarea video {width:100%; outline:0;}
外联式引用
- 外联式样式表必须引入到 HTML 文件中，才能正常进行加载。
- 引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入。
-
<link> 标签属性：
link属性值.png
外联式优点
①实现了 HTML 和 css 完全分离。
②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。
③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。
④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。
导入式
- 书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件。
- 导入方式：利用一条 @import url(路径) 语句进行引入。
@import url("/common/css/universe.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900');/* 20200707 MainPage Renew - Min */
导入式问题
- 导入式样式表的作用与外联式样式表基本相同。
- 但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。
- 实际工作中，较少使用导入式，推荐使用外联式样式表。
实际应用
- 小型案例：可以使用内嵌式 CSS。
- 实际工作、大型网站项目：推荐使用外联式 CSS。
CSS规则
样式规则
以内嵌式样式表为例
（1）所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内。
（2）css 在给某个标签设置样式前，必须使用选择器先选中标签。
（3）css 样式的属性，属性名和属性值的键值对写法为 k:v; 。
（4）给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。
（5）给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来
注意事项
a、分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
b、 css 中所有属性与属性之间对空格、换行、缩进不敏感。
一个清晰易读的 CSS 代码，离不开CSS 注释的合理添加。
CSS 注释语法
语法格式：/中间部分为注释内容/
vs code快捷键：ctrl+/ 。
常用样式
颜色-color
作用：给文字设置颜色
属性名 k ：color
属性值 v ：颜色名、颜色值
更多的颜色名可以通过查询手册得到
rgb 模式
- rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式。
- 每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成1677多万种颜色。
- 书写方法：rgb(红,绿,蓝)
十六进制模式
- 十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0--255 的数字。
- 十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
- 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0→00
255→ff - 书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
字体 font-family
作用：定义元素内文字的字体。
属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。
注意事项
1 、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的
依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找
到第一个支持的字体。
2、 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。
3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。
html{font-family:'HKTM', 'Noto Sans SC', 'Noto Sans TC', 'Microsoft Yahei', '���ź�', STXihei, "����ϸ��", sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
字号 font-size
作用：设置文字的大小。
属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。
属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。
注意事项
1 、如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、IE，默认显示字号为 16px。
2、 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。
实际应用
- 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普
遍使用14px+。 - 尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有
bug。 - 实际工作中的字号，需要以设计图为准。
盒子实体化三属性
如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。
标签选择器
在内嵌式和外部css中，要想将 CSS 样式应用于特定的HTML 元素，首先需要找到该目标元素，这时需要用到CSS 中的选择器。
选择器
- 选择器：选择要添加样式的 HTML 标签的一种方法、模式。
- 首先学习 css2.1 版本的七种选择器：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。
标签选择器
- 通过标签名去选择标签元素。
- 书写方式：标签名。
- 选择范围：选中的是HTML文件中所有的同名标签。
- 注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
标签选择器特点
- 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
- 缺点：只能实现全选，不能对局部的标签添加特殊样式。
id选择器
- 通过标签上的 id 属性去选择标签。
- 书写方式：#id 属性值
- 选择范围：只能选中一个标签。
- id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
- 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
id 选择器特点
缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。
类选择器
- 通过标签的 class 属性去选择标签。
- 书写方式：.class属性值
- 选择范围：是页面中所有 class 属性值相同的标签。
- class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
类选择器特点
- 特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。
- 特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。
类选择器的特殊应用
原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。
.fs12{
font-size: 12px;
}
.fs20{
font-size: 20px;
}
类选择器的优点
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
式和单独样式，节省代码量。
实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。
通配符选择器
- 通过一个特殊符号选择页面内所有的标签。
- 书写方式：*
- 选择范围：包含 <html>标签在内的所有标签。
通配符特点和应用
- 优点：可以实现全选，简化书写。
- 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
- 注意：实际上线的网站不允许使用 * 去清除默认内外边距。
- 不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器。高级选择器的组成部分是基础选择器。
后代选择器
- 通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。
- 后代选择器也叫包含选择器。
- 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
- 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
- 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
后代选择器特点
优点：减少 class 属性的定义使用，选择效率更高。
交集选择器
- 通过一个标签之上满足所有的基础选择器的需求去选择标签。
- 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
- 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
- 比较常见的是标签与类的交集。
交集选择器更多写法
- 交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
- IE6 不支持类名连续交集写法。
- 交集选择器可以作为其他高级选择器的组成部分。
并集选择器
- 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
- 书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
- 选择范围：是所有的单独选择器选中的标签的并集集合。
并集选择器用途
① 如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
② 可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
继承性
- 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
- 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
继承性应用
继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
先级标签比如 <body>，后期所有的后代标签都可以从 <body> 进行继承。
body{
font‐size: 14px;
font‐family: "微软雅黑";
color: red;
}
层叠性
- 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
- 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
- 判断最终胜出的属性是谁，需要依赖判断优先级。
选中目标标签
- 第一步：比较多个选择器的权重，权重高的层叠权重低的。
- 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。
- 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标
签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。 - 比较顺序：( id 个数, 类的个数, 标签的个数 )
- 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。
选中目标标签的组先级
- 如果选择器选中的是祖先元素，文字的样式可以被继承。
- 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。
- 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
- 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
! important 关键字
- 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS
样式属性的权重提升到最大。 - 书写位置：在某个css属性的属性值后面空格加 !important 。
注意：
① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大。
行内式权重
- 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
- 但是，与 !important 关键字相比权重要低。
CSS常用样式
粗细 font-weight
作用：设置文字是否加粗显示。
属性名：font-weight，属于 font 属性的一个单一属性。
属性值有两种方式：单词类型、数字类型。
数字类型
100-900 之间的整百数字。数字越大，文字显示越粗。其中 400 等价于 normal，700 等价于 bold。
字体风格 font-style
作用：设置文字是否斜体显示。
属性名：font-style，属于 font 属性的一个单一属性。
属性值： 单词。
实际应用中，更多的斜体效果习惯使用italic属性值。
行高 line-height
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名：line-height，属于 font 属性的一个单一属性。
实际应用中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具。
字体综合 font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进
行分隔。
写法1
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能
颠倒顺序。
font: 14px "consolas","arial";
写法2
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。
font: 14px/28px "consolas","arial";
写法3
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互
换位置。后面的字号、行高、字体不能更改位置。
font: italic bold 14px/28px "consolas","arial";
font: bold italic 14px/28px "consolas","arial";
水平对齐 text-align
作用：设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词
文本修饰 text-decoration
作用：设置文本整体是否有线条的修饰效果。
文本缩进 text-indent
作用：设置段落首行是否进行缩进。
实际工作中，最常使用 em 为单位的属性值。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。
盒模型概述
盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度 height、内边距padding、 边框 border、外边距 margin。
常见盒模型区域
- 盒模型的属性中，根据不同属性的效果，可以划分区域：
- 书写元素内容区域：width+height
- 盒子可以实体化的区域：width+height+padding+border
- 盒子实际占位的位置：width+height+padding+border+margin
宽度 width
作用：设置可以添加元素内容的区域的宽度。
属性值：
特殊应用
- 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其
特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自
动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width
属性的值是内部元素内容自动撑开的宽度。 - <body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽
度。
高度 height
作用：设置可以添加元素内容的区域的高度。
属性值：
特殊应用
如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
内边距 padding
作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
单一属性
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左。
p {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
简写
有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。
padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。
根据四个方向属性值不同，padding 有多种值的书写表示方法。
根据 padding 的属性值的个数不同，区分了四种表示法：
四值法：设置四个属性值，分配方向上、右、下、左。
p {
padding: 10px 20px 30px 40px;
}
三值法: 设置三个值分配给上、左右、下。
p {
padding: 10px 20px 30px;
}
二值法：设置两个值，分配给上下、左右。
p {
padding: 10px 20px;
}
单值法：设置属性值只有一个，分配方向向上右下左，四边的值相同。
p {
padding: 10px;
}
边框 border
作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 。
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
p {
border: 10px solid #f00;
}
按照属性值的类型划分
线宽：border-width
线型：border-style
颜色：border-color
线宽 border-width
作用：设置边框线的宽度。
属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法。
p {
border-width: 10px 20px 30px 40px;
}
线型 border-style
作用：设置边框的线条形状。
属性值：形状的单词，总体也是类似 padding 的综合属性写法。
属性值的单词可能性：
边框颜色 border-color
作用：设置边框的颜色。
属性值：颜色名或颜色值，整体类似 padding 综合属性写法。
p {
border-color: #f00 #0f0 #00f #ff0;
}
根据边框的方向划分
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
每个单一属性都必须与复合属性 border 一致，设置三个属性值。
p {
border-top: 10px solid #f00;
border-right: 10px solid #0f0;
}
根据方向和类型，进一步细分
类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分。
单一属性写法：border-方向-类型。
注意：细分时必须先写方向划分再写类型划分，否则属性名错误。
p {
border-right-color: #0f0;
}
外边距 margin
作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样的。
单一属性
margin‐top: 20px;
margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;
复合属性的四种值的写法
margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;
margin: 10px 20px;
margin: 10px;
盒模型清除默认样式
- 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
- 盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
- <ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。
- 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text-decoration。
- 清除默认加粗效果：设置font-weight。
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
盒模型height 应用
- 根据不同的需求，高度属性可以设置也可以不设置。
- 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
- 如果不设置高度：会根据标签内部内容高度自动撑开。
- 以 <div> 标签为例，根据情况不同选择是否设置高度：
必须设置高度
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。
自身盒子内部内容过多会溢出盒子区域。
overflow 属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
必须不设置高度
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
盒模型居中
文本水平居中
水平居中：text-align属性。
不论单行或多行都可以设置。
文本垂直居中
单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内
边距上下值相同。
元素垂直居中
一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高
度，再给父元素设置相同的上下边距。
元素水平居中
针对类似 <div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可
以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自
动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平
方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居
中。
父子盒模型
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一
行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设
置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素
特殊情况：盒模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。
不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。
如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进
行内减，子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
margin 塌陷现象
margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的
真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到
了边距值大的值内部。
同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是
较大的那个值。
父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin 塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着
父级一起掉下来。
解决 margin 塌陷问题的方法
①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆
分。
②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距
分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
另外注意：水平方向的 margin 没有塌陷现象。
标准文档流
标准文档流
- 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的
流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。 - HTML就是一种标准文档流文件。
- HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。
微观现象
①空白折叠现象。
②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。
元素等级
- 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：
块级元素、行内元素、行内块元素等。 - 块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。
- 行内元素：大部分的文本级标签，比如 、、 等。
- 行内块元素：比如<image>、<input> 等。
- 各种等级的元素有自己的加载特点。
块级元素
a、块级元素可以设置宽高，在浏览器中正常加载。
b、块级元素必须独占一行，不能与其他任何标签并排一行。
c、块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内
容自动撑开高度。
行内元素
a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容
易出现加载问题。
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
行内块元素
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质，例如空白折叠现象。
显示模式 display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。
属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
浮动
浮动是我们学习的第一种脱离标准流的方式。
浮动定义
- 浮动是一种非常重要的布局属性。
- 属性名：float，漂流、浮动的意思。
- 属性值：left 左浮动 right 右浮动
- 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
浮动的性质
1.浮动的元素脱离标准流
- 标准文档流特点：区分行块。
块级元素：可以设置宽高，必须独占一行。
行内元素：不能设置宽高，可以并排一行。 - 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
2.浮动的元素依次贴边
- 浮动属性值：left、right。
- 浮动方向设置不同，进行布局时，加载位置方向不同。
- 以 left 为例：
- 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
-
父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
image.png -
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
image.png -
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
image.png -
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果
子元素4的宽度超过了父元素，只会出现溢出现象。
image.png -
右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边。
image.png
贴边性质应用
- 利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：
- ①上述平均分布表格效果。
- ②导航栏效果。
- ③常见的电商或企业网站布局。
3.浮动的元素没有margin塌陷
-
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin
塌陷现象。
image.png
4.浮动的元素让出标准流位置
-
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
image.png -
在 IE6 、 7浏览器中，有兼容问题：
image.png - 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
- 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
5.字围现象
-
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。
字围.png -
可以利用字围现象制作一些特殊的图文混排布局效果：
image.png
浮动的问题
浮动的问题1
标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。
如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
浮动的问题2
父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
清除浮动方法
清除浮动一：height
给标准流的父元素强制给一个合适的高度：
- 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
-
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。
image.png
清除浮动二：clear属性
clear，清除。
作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值： left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
- clear: both;
- 解决：浮动元素影响后面元素标准流位置和贴边。
-
问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
image.png
清除浮动三：隔墙法
外墙法：在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear：both 属性。
- 外墙法
- 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
-
问题：父元素没有高度自适应。
image.png -
内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性。
image.png - 内墙法
- 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
-
缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。
image.png
清除浮动四：伪类
本质是使用伪类方法利用css代码书写一堵内墙。
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
清除浮动五：溢出隐藏
小偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题。
补充：overflow 属性
元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
-
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
image.png - 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
- 浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
总结
如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。
CSS 伪类选择器
概念
- 伪类和类之间有一定的相似之处，也存在明显的区别。
- 普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
- 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
- 伪类选择器的权重与普通的类选择器相同。
- 伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名。
标签的伪类
- 标签可以根据用户行为不同，划分为四种状态，通过 标签的伪类可以将四 种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
image.png
标签的伪类书写顺序 - 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
- 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
- 要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
- 为了方便记忆，利用爱恨准则：love hate。
背景属性
CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。
CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。
背景颜色 background-color
属性名：background-color
作用：在盒子区域添加背景颜色的修饰。
加载区域：在 border 及以内加载背景颜色。
属性值：颜色名、颜色值。
背景图片 background-image
属性名：background-image
作用：给盒子添加图片的背景修饰。
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border 以内开始。
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
background-image: url(images/meng.jpg);
如果图片不重复，从 border 以内开始加载。
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。
背景重复 background-repeat
属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载。
根据属性值不同，有四种重复加载方式。
背景定位 background-position
属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。
第一个属性值：表示背景图片在水平方向的位置。
第二个属性值：表示背景图片在垂直方向的位置。
单词表示法
属性值都是使用代表方向的单词进行书写。
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
background-position: right bottom;
像素表示法
使用像素值作为背景定位的属性值。
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
background-position: 100px 50px;
像素值区分正负，正负代表位移方向不同：
正数：表示图片针对盒子的原点向右、向下移动。
负数：表示图片针对盒子的原点向左、向上移动。
background-position: -100px -50px;
百分比表示法
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
background-position: 100% 100%;
背景附着 background-attachment
属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值：
综合写法
综合写法 background
background 属性可以将五个单一属性的值进行合写。
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
background: url(images/bg4.jpg) no-repeat center top fixed #fff;
注意事项
注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。
CSS3 新增背景属性
CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式。
rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在
0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
书写方式：rgba(红色，绿色，蓝色，不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
div {
background-color: rgba(0,255,0,0.4);
}
背景缩放 background-size
通过 background-size 设置背景图片的尺寸，就像我们设置的尺寸一样，在 移动 Web 开发中做屏幕适配应用非常广泛。
定位
定位属性 position
属性名：position。
属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
偏移量属性
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向：left、right。
垂直方向：top、bottom。
属性值：常用 px 为单位的数值，或者百分比。
相对定位
属性值：relative，相对的意思。
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。
相对定位的性质
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。
元素显示效果上，原位留坑，形影分离。
注意事项
注意①：偏移量属性的值是区分正负的。
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。
注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
建议：书写时从水平方向和垂直方向各挑一个属性进行组合。
注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。
为了方便记忆，可以选择只使用 left、top 组合。
实际应用
- 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
- 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
绝对定位
属性值：absolute，绝对的意思。
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
<body>。
必须搭配偏移量属性才会发生位置移动。
绝对定位的性质
性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
<body> 为参考元素的参考点
以 <body> 为参考元素时，参考点的确定与偏移量方向有关。
第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素，就不会去参考 <body> 。
参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖
先。
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组
合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视
参考元素的 padding 区域。
left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下
角。
right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右
下角。
固定定位
属性值：fixed，固定的意思。
参考元素：浏览器窗口。
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在
定位位置。
固定定位的性质
性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量
属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口
上。
