CSS(Cascading Style Sheets) 是一种描述HTML文档样式的语言。
打个比方，HTML相当于你买了一间房子而CSS就相当于装修这间房子。HTML定义网页的结构，主要让页面的内容结构化，CSS控制HTML的标签，定义所需要的样式，美化网页。
选择器
- 后代选择器：空格隔开，所有后代都设置样式
- 子代选择器：>隔开，只选中子代设置样式
- 并集选择器：, 隔开
- 交集选择器：什么都不加，选中同时满足多个选择器的标签设置样式
- hover伪类选择器：选择器:hover，鼠标悬停时设置样式
- 属性选择器：[]，为有该属性或属性值的设置样式
- 伪类选择器：选中父元素中的第n个子元素E，如nth-child(n)
- 伪元素选择器：通过css创建标签，装饰性的不重要的小图或插入内容，如::before
css特性
- 继承性
- 文字控制属性都可以继承：color、font-、text-、line-height
- 继承失效：a的颜色、h的字体大小
- 文字控制属性都可以继承：color、font-、text-、line-height
- 层叠性
- 给同一个标签设置了相同的属性，样式会覆盖，写在下面的会生效
- 当优先级相同时，给同一个标签设置了不同的样式，样式会叠加
- 优先级
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（范围小、更精准的优先级高）
- 行内样式即标签的style属性，例如：style="color: blue"
- 权重计算
- （行内样式个数，id个数，类个数，标签个数）
- 先判断选择器是否可以直接选中标签（如果不能直接选中 → 继承，优先级最低 → pass）再通过权重计算公式比较即可
- 如果都是继承，看继承的哪个父级高，哪个选择器就生效（先继承第一个父级的选择器）
盒子模型
外边距问题
- 合并：垂直布局的块级元素，次数上下的margin会合并，最终两者的距离为margin的最大
- 塌陷（“坑爹”）：互相嵌套（父子）的块级元素，子元素的margin会作用在父元素上，父元素也一起移动“爹被拽下水”
解决方法：
给父元素设置一个border或padding(不是很完美，假设设计稿没要求)
给父元素设置overflow: hidden(最完美)
转换成行内块元素
设置浮动
Flex弹性布局
是浏览器提倡的布局模型（专门用作布局），避免浮动脱标的问题（浮动的盒子会脱标，如果父盒子未设置高度，会造成塌陷）
组成部分
弹性容器（父元素添加display:flex）
弹性盒子（子元素水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列）
主轴（默认水平方向）
侧轴（默认垂直方向）
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
- 使用justify-content(添加到父级)调节元素在主轴的对齐方式
center 水平居中
space-between 间距在弹性盒子（子级）之间
space-evenly 所有地方的间距都相等
space-around 间距加在子级的两侧，实现效果：子级之间的距离是两端距离的2倍
- 使用align-items(添加到父级)、align-self(添加到子级)调节元素在侧轴的对齐方式
center 垂直居中
stretch 拉伸，align-items属性默认值(子级有高度时不拉伸)
使用flex修改弹性盒子伸缩比
flex:整数值
占用父级剩余尺寸的份数
使用flex-direction改变元素排列方向，修改主轴方向
column 列，垂直
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示flex-wrap:wrap（添加到父级）
调整行对齐方式align-content，取值与justify-content基本相同，没有space-evenly（出现在两行之间，而不是两盒子之间）
