这是我参与「第四届青训营 」笔记创作活动的的第2天。
CSS
是什么
CSS（Cascading Style Sheets）层叠样式表。
干什么
对网页进行修饰
怎么做
引入
- 内联式：把CSS代码直接写进HTML标签中。标签指开始标签而非结束标签。多条样式之间用分号 隔开。
- 嵌入式：把CSS代码写在style标签内。
- 外部式：单独编写一个CSS文件，通过link标签引入。
- 导入：@import，但是@import需要等待页面加载完后才会加载，可能出现无样式的情况。@import只能加载CSS。
三者优先级为：内联式>嵌入式>外部式 （近水楼台先得月） 。
选择器
选择器是CSS灵魂所在： 选择器将会告诉浏览器那些html元素将会被那些css属性设置
| 选择器 | 格式 | 权重 |
|---|---|---|
| !important | !important | max |
| id选择器 | #{} | 100 |
| 类选择器 | .{} | 10 |
| 属性选择器 | a[rel="XXX"] | 10 |
| 伪类选择器 | a:hover{} | 10 |
| 标签选择器 | 标签名{} | 1 |
| 伪元素选择器 | :before::after{} | 1 |
| 相邻兄弟选择器 | h2+p{} | 0 |
| 子选择器 | > ul>li{} | 0 |
| 后代选择器 | 空格 p span{} | 0 |
| 通用选择器 | *{} | 0 |
| 分组选择器 | 0 |
定位
绝对定位
position:absolute:绝对定位会将元素拿出文档流，因此不会占用原来的空间。
绝对定位元素的包含块是距离他最近的定位祖先，也就是position属性设置为static之外的任意值的祖先元素。如果没有，那么就相对于根元素（html）元素定位.
相对定位
position:relative:该元素仍会待在原来的地方，但此后，可以通过设置top,bottom,left,right 属性，使该元素相对初始位置平移一定的距离。而只用绝对定位会脱离文档流
固定定位
position:fixed：固定定位是由绝对定位衍生出来的，不同之处在于，固定定位的包含块是视口（viewport） 。因此，固定定位可用来创建始终停留在窗口相同位置的浮动元素如：侧边栏等。
布局
flex布局
flex布局又称为弹性盒子布局，是一种将元素按行或列布局的方法，也可以理解为X轴与Y轴。
display:flex说明我们将其布局方式选定为flex布局。flex:1说明该元素在flex盒子中的空间占比。flex-direction:row/column说明我们将其设定为沿X轴/Y轴。flex-wrap:wrap说明我们令其在空间不足时换行。justify-content:center说明内容的排列方式（左右），位于中心。align-items:center说明内容的排列方式（上下），位于中心。flex-flow:row wrap是flex-direction与flex-wrap的合体。
