一、CSS基础概念
CSS有两个重要的概念，分为样式和布局
CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式
CSS的另一个重要的特质就是辅助页面布局，完成HTML不能完成的功能，比如并排显示或精确定位显示
从HTML4.0开始，结构层和样式层进行了分离
前端三层：
- 结构层：HTML作用是从语义的角度讲进行网页结构的搭建（相当于建房子主题）
- 样式层：CSS作用从美观的角度讲修饰页面样式（给房子装修）
- 交互层：JavaScript作用从交互的角度讲描述页面的行为（开灯）
二、CSS常用属性
CSS常用得文字属性有三个：color、font-size、font-famliy
CSS得属性样式发生了改变由HTML的k=’v’变为了k:v;
2.1文字颜色
属性名：color
基本使用：
<p style="color:red">你好哇</p>
属性值：主要分为两种：单词表示法和颜色值（十六进制和rgba）
以蓝色为准
2.2字号
属性：font-size
属性值：常用的是以px为单位的数字值
根据浏览器的不同，有默认不同的字号大小，比如Chrome和ie默认就是16px的文字
每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px；IE浏览器最小字号是1px
<p style="font-size: 18px;">你好哇</p>
2.3字体
属性：font-family
属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开
中文字体的常用字体属性值：微软雅黑，宋体
英文常用字体属性值：Arial，consolas
实际的字体属性是根据设计图获取，大多数浏览器默认显示字体是微软雅黑
如果页面中有中文化混合的，需要同时设置对应的字体
如果设置多个字体，使用逗号隔开，如果浏览器不识别前面的字体，会自动向后识别，中英文会分别进行加载
<p style="font-family: '微软雅黑','Arial';">你好哇nico</p>
三、盒子三属性
盒子的三属性为：width、height、background-color
width：宽带；height：高度；二者常用的属性值都是以px为单位的数值
background-color：属于background系列属性的一种，属性值和color一样分为单词和颜色值表示法
<div style="width:100px;height:100px;background-color:red"></div>
四、CSS样式表
4.1行内样式表
基本语法：
<p style="color:aqua;font-size:18px;font-family:'宋体'">你好哇</p>
引入为止：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔
4.2内嵌式样式表
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: yellowgreen;
height: 100px;
width: 100px;
}
p{
color:rebeccapurple;
font-size: 12px;
}
</style>
</head>
<body>
<div>
<p>
hello
</p>
</div>
</body>
</html>
书写位置：head标签的内部，title标签的下面，一对style标签内部
4.3 外链样式表
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
- 书写位置：head标签的内部，title标签的下面，一个link内部去进行css文件引入
- link标签的作用就是引入外部文件，通过href属性，属性值是文件地址
- rel属性值如果是stylesheet，代表的就是引入样式表
- 通过引入css文件到html文件中，从而实现样式的加载
- css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的
4.4 导入样式表（了解）
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(1.css);
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
- 书写位置：head标签的内部title标签下面style标签内，通过@import进行导入
- 注意：导入式必须写在style标签的最顶部
- url内部是css文件的引入地址
4.5四种样式表的区别和优缺点
| 样式表的名称 | 权重 | 优点 | 缺点 |
| 行内式样式表 | 最高 | 权重高，样式设置更精确 | 第一、结构和样式没有进行分离。 第二、不能批量修改样式 |
| 内嵌式样式表 | 大于导入式，等于内外链式 | 能够将CSS样式和估计进行分离，可以进行批量属性的修改 | 样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码。 |
| 外链式样式表 | 大于导入式，等于内嵌式 | 样式和骨架进行完全分离，一份css代码可以重复使用 | 如果我们写小的demo的时候，每次写外链式比较麻烦，并且看起起来不直观 |
| 导入式样式表 | 最低 | 样式和骨架进行完全分离，一份css代码可以重复使用 | 导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好 |
五、选择器
选择器分为两种，一种是基础选择器，一种高级选择器
基础选择器：标签选择前、id选择器、类名选择器
高级选择器：后代选择器、交集选择器、并集选择器
5.1 标签选择器
选择方法：通过标签名称去选择器
书写方法：标签名
选择范围：HTML文档中所有的同名标签
基本使用：
- 需要注意的是标签选择器无视嵌套规则，都能进行识别加载
- 用途：实现全选同名标签，可以设置公共样式
- 缺点：只能进行全选，不能进行单独的布局样式
5.2id选择器
- 通过标签上id属性进行选择
- 书写方法：#id属性值（自定义）
- 选择范围:只能选中一个标签
基本使用：
- id其实就是标签的身份证号，具有唯一性。规定一个页面中不允许有同名id属性
- 优点：id属性的权重高
- 缺点：只能实现单选
5.3类名选择器
- 通过标签上的clas属性进行选择
- 书写方法：. 匹配对应的class属性值
- 选择范围：选择所有同名clss属性标签
基本使用：
- 一个标签的class属性值可以有一个或者多个
- 多个class属性之间使用空格隔开
- 同一个对象多个属性，按照哪一个属性确定样式，根据style标签理属性样式的书写位置决定，因为程序从上到下执行
- id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线
5.4通配符选择器
- 书写方法：*
- 选择范围：选择包含html标签在内的所有标签
- 通配符*后面添加的样式，每一个标签都会加载一次
- 我们通常使用清除页面的默认样式
基本使用：
清除页面的默认内外边距
*{
margin: 0;
padding: 0;
}
5.5 后代选择器
- 书写方法：使用空格连续链接多级选择器
- 作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性
基本使用：
- 需要注意的是，后代关系不一定是父子关系，只要是所属关系即可、
.box li{
color: red;
}
5.6 交集选择器
- 作用：进行满足所有选择器条件的匹配
- 书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号
基本使用：
5.7 并集选择器
- 并集选择器有‘和’的意思，代表多个标签设置同样的属性
- 书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号
- 选择范围：多个选中标签的集合
我们看下面的结构，要将p标签和div标签里面的文字都设置成红色：
并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性
<style>
.par li,p{
color: red;
}
</style>
上面的代码指：选择设置class为par里面的li标签和所有p标签的文字颜色为红色
六、CSS的继承性和层叠性
6.1继承性
只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性
- 注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family
6.2层叠性
CSS样式表又叫做“层叠式样式表”，什么是层叠性
- 一个标签可以被多个选择器选中，并设置对应的属性
如果多个选择器，设置了同一个属性，怎么办？
我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性。
我们学习选择器的权重：
id选择器>class类名选择器>标签选择器
如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的
案例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 div.box2 #box3 p{
color: red;
}
#box1 #box2 div.box3 p{
color: blue;
}
#box1 div.box2 .box3 {
color: pink;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>
如果遇到复杂的选择器，有两种比较方法
方法一：数选择器：首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜，如果所有选择器数量相同，后写的覆盖先写的。
即：例如上面案例的选择器数量分别为：1，2，2 | | 2，1，2 ||1，2，2，因为第二个选择器的id数量最多所以结果为蓝色
方法二：就近原则
上面的案例是所有选择器都选择同一个元素p，所以需要数权重数量
现在如果都没有选中，怎么办？
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 #box2 {
color: blue;
}
.box1 .box2 .box3 {
color: purple;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>
如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重
总结：
遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；如果所有的权重一样，选择位置也一样，后书写的覆盖先写的
例如：上面的案例，结果为紫色，因为第二个选择器选到了离文字最近的一层
七、css文字属性的深入
7.1、字体
7.1.1字体颜色
color作用是用来设置文字的颜色
属性值：颜色名、颜色值
颜色值：包含rgb和十六进制
- rgb：
rgb模式是三原色（red、green、blue），rgb（红色，绿色，蓝色）逗号分隔每个颜色的色值，每个颜色的取值范围是0-255，一共就组成了1670万种颜色
红色：rgb(255,0,0)；绿色：rgb(0,255,0)；蓝色：rgb(0,0,255)；白色：rgb(255,255,255)；黑色：rgb(0,0,0)
- 十六进制
十六进制：是将rgb颜色表示法进行了简化
将十进制的0-255颜色表示法替换成了十六进制颜色表示法
0即为00；255即为ff
十六进制就是0-9，a-f
十六进制颜色值的写法：使用#后面加红绿蓝三个颜色的十六进制的二位数写法
红色：#ff0000；绿色：#00ff00；蓝色: #0000ff；白色：#ffffff；黑色：#000000
部分特殊的十六进制是可以简化的，比如黑色#000000可以简化为#000，有些是不能简化的，比如#00ffab这种是不可以简化的
#ff00aa简化为#f0a
#aaffdd简化为#afd
7.1.2字体font-family
作用：设置文字使用哪种字体显示
属性值：必须要用引号包裹，值可以有多个，中间使用逗号隔开
- 中文字体：微软雅黑的英文表示法： Miscrosoft Yahei ;宋体英文表示法： SmiSum
- 英文字体：Arial; consolas
工作中关于文字我们是通过设计图获取的，如果设计师没有给你字体，可以自己去获取，通过FW获取
测量方法：使用FW软件，书写一个文字，然后使用文字工具，输入相同的2个或者以上数量的数字，调整大小，调整字体，直到文字完全重合
7.1.3字号font-size
作用是设置文字的大小
属性值:
px为单位：数值是几表示字号显示多少像素
百分比为单位：参考的是继承的字号的百分比
em为单位： 数值是几表示继承字号的几倍
7.1.4 行高line-height
定义：文字在一定的高度内垂直居中
属性值：
px为单位：数值是几表示行高就为几像素
百分比： 参考的是自身字号的百分比
利用行高的特点，可以设置文字在盒子内垂直居中
7.1.5字体加粗font-weight
作用：设置字体是否进行加粗显示
属性值：单词法，数值法
- 数值：100-700，以整百为单位表示
- 单词表示法：normal表示正常的，没有加粗的；bold表示加粗，和数值700是相等的
7.1.6字体样式font-style
作用：用来设置文字是否有倾斜或者斜体
属性值：
normal： 正规的，没有倾斜的
italic： 斜体的，指的是文字斜体
oblique： 倾斜的，与字体无关
工作中用的最多的是italic
font属性综合写法：包含五个单一属性，前两个必须是样式和字体加粗，属性值之间用空格隔开，字号和和行高使用斜杠分隔。字号、行高、字体必须连续书写，顺序不能颠倒，而且必须位于倒数后三个
font:italic bold 24px/48px "simsun"
7.2文本
7.2.1对齐text-align
作用：用来设置段落的整体水平方向对齐
属性值：left、center、right
7.2.2文本修饰text-decoration
作用： 设置文本整体是否有线条修饰
属性值：
none：没有修饰
over line ：上划线
line-through：中划线
under line：下划线
通常使用text-decoration属性取消a的默认下划线
7.2.3缩进text-indent
作用：设置段落首行缩进
属性值：
- px单位数值表示： 数字是多少代表首行缩进多少像素
- 百分比表示法：参考标签的父级width属性值的百分比
- 以em为单位：数字是几表示首行缩进几个中文字符。最常用的设置
八、盒模型
叫框模型、是css的重要布局属性，包含了五个属性，width（宽度）、height（高度）、padding（内边距）、border（边框）、margin（外边距）
盒子的实际加载区域：width+height
盒子可实体化显示区域：width+height+padding+border
盒子实际占位区域：width+height+padding+border+margin
浏览器控制台可以看到盒模型的情况：
8.1宽度和高度、
作用：设置加载内容的区域
宽度：width
高度：height
属性值：
- px为单位的数字表示法：数值是多少表示宽度或者高度为多少像素
- 百分比表示法：参考标签的父级width属性值的百分比
注意的是：如果盒子不设置宽度，会默认撑满父盒子的宽度
如果盒子不设置高度，会默认被内容撑高
8.2内边距padding
作用：设置宽和高到边框的间距
特点：不能加载内容，但是可以加载背景
属性名：padding
属性值：px为单位的数值
padding属性是一个综合属性，可以根据不同方向进行单一属性设置
padding-top:20px; //上 padding-bottom:30px;//下 padding-left:40px;//左 padding-right:50px;//右
我们可以使用padding进行综合书写：
四值法：四个方向分别代表上、右、下、左即顺时针方向一圈：
三值法：三个值分别待变上、左右、下
二值法：两个值分别表示上下、左右
8.3边距
作用：设置盒子的显示边缘（边框）
属性名：border
border属性值有三个值，border是一个综合书写
按照border的属性类型划分三个属性值分别代表：边框宽度：border-width、线形：border-style、线的颜色：border-color
线宽border-width
属性值：类型padding，也有四值法
线型：border-style
属性值：也有四值法
- none: 无样式
- hidden: 除了同表格的边框发生冲突的时候,其它同none
- dotted: 点划线
- dashed: 虚线
- solid: 实线
- double: 双线,两条线加上中间的空白等于border-width的取值
- groove: 槽状
- ridge: 脊状,和groove相反
- inset: 凹陷
- outset:凸出,和inset相反
边框颜色border-color
属性值：类型padding，也有四值法
无论是线性还是线厚度还是线的颜色，都可以单一设置某一个方向
先是方向然后是类型
8.4外边距
作用： 设置盒子与其他盒子之间的间距
属性名：margin
属性值： 完全类似于padding，包括单一写法和复杂写法
8.5盒模型小练习
<style>
*{
margin:0;
padding:0;
}
p{
color:#78902C;
font-size:14px ;
font-family:"simsun";
line-height: 28px;
text-indent:2em;
border:1px solid #78902C ;
height: 71px;
width:672px;
padding: 28px;
margin:21px 18px;
}
</style>
8.6盒模型拓展
8.6.1清除默认样式
很多标签都有自己的默认样式，这些默认样式是开发中不需要的，比如h1系列标签的字号加粗，比如p标签的默认边距，比如ul，li的默认小圆点
清除默认样式：
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td,input{
margin: 0;
padding: 0;
}
ul,ol{
//清除列表前的项目符号
list-style: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
网站除了需要清除默认样式外，还需要对部分标签或者整体文本进行初始设置
/* 设置网页初始默认样式 */
body {
color: #333;
font-size: 14px;
font-family: '微软雅黑','宋体', 'Arial';
}
a {
text-decoration: none;
color: #333;
}
8.6.2 height属性扩展
一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容，比如超出部分，如何显示
如果盒子没有设置高度，则被内容撑高，如果设置了高度，内部高度大于盒子本身的高度，不会被隐藏，会自动超出盒子内容显示
关于高度超出部分，是有属性可配置的
overflow，其作用指的是超出盒子部分怎么显示
- 属性值：visible可见的，默认的
- 属性值hidden作用是超出高度部分，隐藏
- 属性值scroll，作用是给盒子添加滚动条样式，无论文字内容是否超出了盒子，都加滚动条样式
- 属性值auto，作用是盒子内容超出部分滚动条显示
- 关于height属性，如果希望盒子自动被内容撑高，可以设置值为auto
8.6.3居中
关于居中，主要有两种，一种是关于盒子的，一种是关于文字的
- 单行文字：
水平居中：使用text-align:center
垂直居中，设置line-height的高度和盒子一样高
总结：如果需要单行文本水平垂直都居中，设置text-align：center，line-height：盒子高度
- 多行文字
水平居中：还是使用text-align：center
垂直居中：盒子不设置高度，上下的padding设置相同的属性
- 盒子的居中：
水平居中：给目标元素设置margin值为auto，即margin：auto
垂直居中:和文字类型一样，父盒子不设置高度，设置上下的padding值相同
总结：如果设置盒子上下左右都居中的状态，首先子盒子设置margin：0 auto；父盒子不设置高度，而设置上下padding
工作中真正设置垂直居中使用的定位，很少使用padding去挤高度
8.6.4margin塌陷
同方向的margin会有塌陷，margin塌陷通常指的是上下塌陷
在垂直方向上，如果有相遇的margin，两个盒子之间不是属性值的和，而是比较两个盒子谁的margin更大，使用的就是margin值更大的高度
- 同级盒子margin塌陷
取得是二者margin中较大的值，非二者margin之和
- 父子元素的margin塌陷现象
父子盒子，如果子盒子设置margin-top，父盒子没有设置或者margin-top的值小于了子盒子，此时会存在margin塌陷的现象
如何解决margin塌陷的现象，如果是兄弟关系，统一都设置一个方向的margin，比如都设置margin-bottom
如果是父子盒子，可以给父盒子加border或者padding，其实这两种方法都不合理，正常情况下都不会使用子盒子去向上踹父盒子，而是使用父盒子加padding
九、标准文档流
开发网页更像写word，因为我们开发网页有自己的书写规律，从上往下，从左往右，前面内容的变化会影响后面内容的位置
以上也是标准文档流的特性
HTML文件就是一种标准文档流文件，也有自己的一些特性
9.1元素类型
从HTML的角度讲元素分为连个级别：容器级和文本级
从CSS的角度的讲将元素分为三种类型：块级元素，行内元素，行内块元素
块级元素
特点：可以设置宽度、高度，元素独占一行
常用的块级元素：div、p、h1-h6，ul，ol，dl等等
行内元素：
特点：文字并排显示，不能设置盒子的宽度和高度
常见的行内元素：span、a、b、u、i等等。
行内块元素：
特点：可以设置宽度和高度，并且盒子也可以并排显示
常见的行内块元素：input、img、table
9.2display显示模式
大部分标签默认的时候都会以各自的显示状态（类型）进行加载，标签的显示状态并不是固定不变的，可以通过css属性display进行切换
display属性值：
- block： 砖、块的意思，表示标签要以块级元素加载
- inline: 行内，表示将标签以行内元素进行加载
- inline-block: 行内块，表示将标签以行内块元素进行加载
如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去标准化
让标签脱离标准流的方法：浮动、定位
十、浮动
浮动属性是专门用于进行网页并排布局的
作用：脱离标准文档流，不在受元素等级的限制，又可以并排显示，又可以设置宽和高
float：属性就是设置元素浮动
属性值：left、right，分别为按照缩写顺序靠右浮动和靠左浮动
float: left;
浮动的特性：元素会按照书写的顺序进行依次贴边，同一个父盒子中，既可以设置左浮动，也可以设置右浮动
补充知识点：所有的兄弟元素，如果一个有浮动了，剩下的所有兄弟元素必须都设置浮动
如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑宽
10.1浮动练习
<style>
.out{
width: 970px;
}
.top{
height: 103px;
margin-bottom: 10px;
}
.top .top1{
width: 277px;
height: 103px;
background-color: red;
float: left;
}
.top .top2{
height: 103px;
width: 679px;
float: right;
}
.top .top2 .top21{
width: 137px;
height: 49px;
float: right;
margin-bottom: 8px;
background-color: greenyellow;
}
.top .top2 .top22{
width: 679px;
height: 46px;
background-color: greenyellow;
float: right;
}
.middle{
height: 435px;
margin-bottom: 10px;
}
.middle .middle1{
width: 310px;
height: 435px;
background-color: yellow;
float: left;
margin-right: 10px;
}
.middle .moddle2{
width: 650px;
height: 401px;
background-color: antiquewhite;
float: right;
margin-bottom: 10px;
}
.middle .moddle2 .middle21{
width: 190px;
height: 401px;
background-color: palevioletred;
float: right;
margin-left: 10px;
}
.middle .moddle2 .middle22{
width: 450px;
height: 401px;
float: left;
}
.middle .moddle2 .middle22 .middle221{
width: 450px;
height: 240px;
margin-bottom:10px;
background-color: aqua;
}
.middle .moddle2 .middle22 .middle222{
width: 450px;
height: 110px;
margin-bottom: 10px;
background-color: aqua;
}
.middle .moddle2 .middle22 .middle223{
width: 450px;
height: 30px;
margin-bottom: 10px;
background-color: aqua;
}
.middle .moddle3{
width: 650px;
height: 25px;
background-color: green;
float: right;
}
.bottom{
height: 35px;
width: 970px;
background-color: blue;
}
</style>
</head>
<body>
<div class="out">
<div class="top">
<div class="top1"></div>
<div class="top2">
<div class="top21"></div>
<div class="top22"></div>
</div>
</div>
<div class="middle">
<div class="middle1"></div>
<div class="moddle2">
<div class="middle21"></div>
<div class="middle22">
<div class="middle221"></div>
<div class="middle222"></div>
<div class="middle223"></div>
</div>
</div>
<div class="moddle3"></div>
</div>
<div class="bottom"></div>
</div>
</body>
10.2浮动的性质
标准流元素是区分行、块的，浮动是脱离标准流的，那脱离标准流之后，浮动元素有哪些特性
浮动元素，脱离标准流后，既可以设置宽度和高度，也可以会实现并排显示，不区分元素状态即不区分块元素和行内元素
p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度、
需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动
如果此时p标签和span标签没有设置宽度和高度，元素的宽度会被内容撑满，不会自动撑满父盒子
10.3依次贴边
如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，知道空余位置能够存放，从而进行贴边显示
- 如果父盒子的跨度不够，子盒子会依次贴边，但是如果前面元素中有空隙当前需要贴边的元素不会钻空，不会出现钻空的现象，而之会查询剩余宽度实现依次贴边
4号元素由于贴近3号空隙不够，从而找2号，但是2号被3号挡住了，所以会去找1号进行贴边，不会向上钻空
- 如果某一个盒子的宽度大于父盒子，会有溢出状态
10.4依次贴边练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out{
width: 940px;
height: 440px;
border:1px solid black;
padding: 10px;
}
.out .no1{
width: 300px;
height: 260px;
background-color: palevioletred;
float: left;
}
.out .no2{
width: 240px;
height: 260px;
background-color: aqua;
float:left;
}
.out .no3{
width: 200px;
height: 130px;
background-color: yellow;
float: left;
}
.out .no4{
width: 200px;
height: 130px;
background-color: yellowgreen;
float: left;
}
.out .no5{
width: 200px;
height: 130px;
background-color: yellowgreen;
float: left;
}
.out .no6{
width: 200px;
height: 130px;
background-color: yellow;
float: left;
}
.out .no7{
width: 300px;
height: 180px;
background-color: aqua;
float: left;
}
.out .no8{
width: 160px;
height: 180px;
background-color: plum;
float: left;
}
.out .no9{
width: 160px;
height: 180px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="out">
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>
<div class="no4"></div>
<div class="no5"></div>
<div class="no6"></div>
<div class="no7"></div>
<div class="no8"></div>
<div class="no9"></div>
<div class="no8"></div>
<div class="no9"></div>
</div>
</body>
</html>
10.5浮动的margin塌陷
标准流有margin塌陷的现象
标准流margin塌陷：
浮动流：
总结：浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会相互塌陷；
10.6浮动元素让出标准流
标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载
浮动元素脱离了标准流，会让出后面的元素占有自己原来的位置，显示效果上来看，似乎是自己飘起来了，将其称之为脱标
标准流显示;
此时蓝色盒子浮动了，浮动元素需要先加载，否则无法为后面的元素让出位置
10.7字围现象
字围现象：同级元素中，前面元素如果浮动了，后面的标准流会占有前面元素的文字，后面盒子中如果有文字，不会和盒子一样占有前面盒子的位置，而是绕开浮动元素的位置，围绕着加载，实现字围现象。
十一、清除浮动
11.1浮动带来的影响
标准流的盒子，如果不设置高度，会被内容自动撑满，如果盒子内部的元素浮动，子盒子脱标后，不能撑高父盒子，父盒子的告诉就会变为0，导致一些问题。
（1）父盒子不设置高度不能被子盒子撑高
（2）如果父盒子后面还有其他的兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会影响后面的贴边
解决方案：
①清除浮动方案一：height属性
父盒子的高度不能被子盒子撑高，我们可以强制给父盒子设置一个高度，去管理内部的子元素
缺点：父盒子的高度不可以随着子元素变高而增高，如果子盒子是动态的，父盒子还会出现原来的问题，所以使用height属性清除浮动影响只适用于父子都是固定高度的
②清除浮动方案二：clear属性
css有个clear属性，专门清除浮动元素带来的影响
属性值：
left： 清除前面左浮动的影响
right： 清除前面右浮动的影响
both： 清除前面所有浮动的影响
clear属性可以解决当前盒子的浮动影响
缺点： 父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题
③清除浮动方法三：隔墙法
方法：利用clear属性和height属性，制作一堵墙，将两个有浮动的元素父亲隔离起来
墙
解决的问题：父元素位置稳定了，需要的上下间距也解决了
缺点： 子盒子还是不能撑满父盒子的高度
④清除浮动方法四：内墙法
方法：通过隔墙法演变而来，将墙放在了两个受影响父元素内部，所有的子元素最后，设置一堵内墙法，设置clear属性
可以解决之前遇到的所有问题（可以给div设置margin将两个标准流父盒子间隔开）
⑤清除浮动方法五：伪类
CSS选择器的一种
.clearfix::after {
content: '';
display: block;
height: 0;
clear:both;
visibility: hidden;
}
将上述代码即一个属性的style设置，将受到浮动影响的元素（此处就是两个父盒子div）都添加上这个clearfix属性即可，clearfix的属性名不是固定的，但是一般叫这个
⑥清除浮动方法六：overflow属性
overflow属性清除浮动影响是一个小偏方，值必须是hidden，可以解决浮动的所有问题
通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一个特点，设置是该属性的元素就拥有被内部元素撑高的特点
实际工作中，使用内墙法或者overflow属性去解决浮动的影响
十二、a标签的伪类
12.1概念
a标签可以根据用户的不同行为的触发，从而实现四种状态的样式，这四种状态是可以设置的，我们称这四种状态为伪类
a:link{
color: #0f0;
}
a:visited{
color:#f0f;
}
a:hover{
color: #ff0;
}
a:active{
color:#0ff;
}
a:link 访问前的状态
a:visited 访问后的状态
a:hover 鼠标悬停状态
a:active 鼠标点击状态
普通元素，非超级链接，也可以设置伪类状态，此时只有两个 状态使用，分别是hover和active
伪类选择器：规定一定要先设置好需要的选择器，推荐使用class类名，不会引起冲突，或者使用后代选择器精确匹配，以防打乱页面的布局状态
伪类的权重和普通选择器权重是一样的
12.2书写顺序
a标签有时会有2-3个触发状态，一定按照书写顺序去执行
书写顺序：link、visited、hover、active
总结规律：方便记忆，理解为爱恨准则，love hate
所有的伪类中，最常用的是hover
12.3实际应用
一个实际的页面中，为了保持页面的统一状态，此时会将a标签的访问前和访问后的状态进行统一设置
a:link,a:visited{
color: #666;
}
a:hover{
color:#f00
}
a:active{
color: blue;
}
实际应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
ul{
width: 200px;
height: 50px;
background-color: aqua;
}
li{
width: 40px;
height: 40px;
background-color: aquamarine;
list-style: none;
float: left;
margin: 2px;
}
ul li:hover{
background-color: bisque;
}
</style>
<body>
<ul>
<li>新闻</li>
<li>游戏</li>
<li>学习</li>
<li>音乐</li>
</ul>
</body>
</html>
十三、背景
在前面的课程中我们学习background-color，作用是给盒子设置背景颜色。其实background是个综合属性
13.1背景颜色background-color
作用：给盒子添加背景颜色
background-color:green;
背景颜色的覆盖范围：width、height、padding、border
属性值；颜色名、颜色值
颜色值：rgb模式、十六进制模式、rgba模式
rgba模式是rgb模式的一种拓展，拓展的是透明度，a（alpha）就代表的是透明度，取值（0-1）之间，0表示完全透明，1表示纯色
13.2背景图片background-image
作用：给标签的盒子显示区域添加背景图片
渲染范围和背景颜色一样width、height、padding、border
图片默认是有重复平铺状态的
属性值：url（图片地址）
url是统一资源资源定位符，后面必须要跟一对小括号，括号内部是图片的引入地址，可以是相对路径和绝对路径
如果此时背景图片和背景颜色同时设置了，会怎么显示
都会进行加载，只是背景图会覆盖背景颜色
13.3背景重复background-repeat
如果不需要背景图进行重复渲染
作用：设置背景图渲染状态
根据属性值的不同，背景会显示三种状态
repeat：背景重复渲染，为默认值
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
实际应用场景
使用上下左右都对称的图片进行页面的背景设置
