css进阶篇（浮动、定位、垂直居中、选择器、伪元素添加字体图标）

浮动

1. 浮动的由来：处理内联块元素留白问题的
   使块级元素并行排列的方法：
   1.1、设置display为内联块元素（这种方法不设置父元素font-size:0，会导致有6px的留白）
   1.2、用float浮动（没有留白）
2. 清浮动的由来
   浮动元素脱离文档流，不会撑起父级高度（因为是飘起来的）

浮动使用

1. 可以让元素排成一行，并且没有留白
2. 脱离文档流，不会撑起父级高度（因为是飘起来的）
3. 可以让内联元素支持宽高
4. 没有加宽高时，宽高默认由内容撑开
5. 同级元素要么都浮动，要么都不浮动，以免出错
6. float:left 内容顺序正常（两个元素都朝左浮动）
7. float:right 内容顺序颠倒（两个元素都朝右浮动）

清浮动

1. 直接给父级高度
2. 在父级下面加上
   
3. 给父级加浮动，不推荐（因为同级要么都浮动，要么都不浮动）
4. 给父级加overflow:hidden
5. 给父级加上clear类（clear用::after添加清浮动，三个属性）
6. 注意：clear清浮动只对块级元素有作用

        .clear::after{
            content: '';
            display: block;
            clear: both;
        }

定位

 1. 页面是分层的：
底层：背景
中层：文字、浮动元素
上层：定位
顶层：z-index
2. 定位会提高层级
3. 定位元素层级一样高，但是后面的元素层级高于前者。即后者覆盖前者
4. 定位都用left、right、top、bottom设置偏移量

相对定位 relative

 1. 如果没有设置偏移量，对元素没有影响
 2. 不会影响元素本身（块级元素还是块级元素，内联块元素还是内联块元素）
 3. 不会让元素脱离文档流（元素移动后，原始位置还是会被保留）
 4. 相对于自身发生位移
 5. 提高层级，高于浮动

绝对定位 absolute

 - 如果没有设置偏移量，对元素没有影响
 - 让内联元素支持宽高
 - 完全脱离文档流（原始位置不会被保留。浮动脱离文档流，文字会被挤开。绝对定位完全脱离文档流，文字都不会被挤开，直接覆盖掉）
 - 如果有定位父元素，则相对于定位父级发生偏移。如果没有则相对于document发生偏移（定位父级：父级中有定位的。document：整个文档）
 - 提升层级，高于浮动

固定定位 fixed

与绝对定位基本一致，另外：固定定位只相对于document发生偏移（不会根据定位父级偏移）

粘性定位 sticky

1. 使用场景：此内容本来在页面中间，随滚动条往下滑，快要滑过他的时候，就黏在页面顶部
2. 缺点：sticky在浏览器兼容性差，一般用js写，所以不推荐

z-index

1. z-index 只能加给position，提升position等级
2. z-index 默认0，数值越大，层级越高

垂直居中

### vertical-align

 - 内联块元素和内联元素加在此级，块级元素则加给父级

### 方法一（内联块元素）

 1. 把块级元素设置为内联块元素
 2. 图文对齐方式设置为中部对齐（vertical-align:middle/top）
 3. 子元素高度设置为父元素高度
 4. 父元素font-size设置为0，避免内联块元素留白
 5. text-align:center 实现左右居中

### 方法二（单元格）

 1. 将父元素设置为单元格（display:table-cell）
 2. 父元素中设置图文对齐方式为中部对齐（vertical-align:middle/top）
 3. margin:auto 实现左右对齐

### 方法三（定位）

 1. top、bottom、left、right 设置为0
 2. margin设置为auto

### 方法四（定位）

 1. left:50%
 2. margin-left:-元素宽度的一半 （因为50%要减去自身宽度的一半才是居中）
 3. 垂直居中同理


## 方法五（grid、flex）

 1. 父元素设置为display:grid
 2. justify-items   调整子元素水平对齐方式
 3. align-items  调整子元素垂直对齐方式

选择器

选择器优先级

• ！important 优先级是最高的

第一等级：行内样式
第二等级：id选择器
第三等级：类选择器、伪类
第四等级：元素、伪元素
第五等级：继承样式

伪类

1. 以：开头的
2. 用于选择在dom中有的元素

:link     未访问状态
:hover    鼠标悬停状态
:active   鼠标点击没松开
:visited  访问后（只能用于a标签）
:nth-child(n)      :正着数
:nth-last-child(n)  :倒着数
:first-child        :选中第一个
:last-child         :选中最后一个

表单伪类
input:checked   给选中的input添加样式（单选框，复选框）
input:focus     给获取焦点的input添加样式（获取焦点：鼠标在闪，输入的时候）

伪元素

1. 以::开头的（在css1、css2中以:开头，容易与伪类混淆，不是一个东西）
2. 用于选择dom中不存在的元素

::after	    在元素后添加内容
::before    在元素前添加内容
::selection 指定元素中被选中的内容
::first-letter    选中第一个文字
::first-line      选中第一行文字

结构选择器

~ 毗邻选择器        可以选择所有的兄弟（比如：.first:hover ~ .third 就可以）
+ 相邻选择器        只能选择相邻的兄弟 (比如: .first:hover + .third 就不行，因为1.3不相邻)
> 子元素选择器      只能选择第一层子元素
空格 后代选择器     选择后代所有层元素

属性选择器

div[llb]                 属性选中llb
div[llb="hello"]         属性选中llb，值为hello的
div[llb~="hello"]        属性选中llb，值有hello这个词的
div[llb^="hello"]        属性选中llb，值以hello开头的
div[llb$="hello"]        属性选中llb，值以hello结尾的
div[llb*="hello"]        属性选中llb，值有hello的
div[llb|="hello"]        属性选中llb，值以hello-开头的
    
<div llb="">lllalsjkdf</div>
<div llb="hello">lllalsjkdf</div>
<div llb="hello world">lllalsjkdf</div>
<div llb="helloyaha">lllalsjkdf</div>

拓展：在css中添加字体图标

1. 把字体图标样式引入，再引入content字体编码
2. 按需加入/deep

 /deep/.el-form-item__error::before {
    content: "\e60d" !important;    //这个content对应字体图标文件的
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}