【CSS】知识点整理
知识点目录
1. link和@import的区别
均为外部引用CSS文件：
<link rel="stylesheet" href="xx.css" type="text/css" @import url('xx.css')
（1）link属于HTML标签，而@import是CSS提供的;；
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
（3）link是HTML标签，无兼容问题;而import只在IE5以上才能识别；
（4）link方式的样式的权重 高于@import的权重。
2. 盒模型（box-sizing）
盒模型：本质上是一个盒子，用来封装周围的HTML元素。它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。
- 标准盒模型（W3C盒模型）【默认值】
（1） 定义：box-sizing:content-box;
（2）设置的 width为content部分的width。
一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
- 怪异盒模型（IE盒模型）
（1）定义：box-sizing:border-box;
（2）设置的 width为content+padding（左右）+border（左右）
一个块的总宽度=width+margin（左右）（即width已经包含了padding和border值）
3. 选择器优先级
- ！important > 内联样式 > ID选择器 > class选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性
- 内联样式 > 内部样式表 > 外部样式表
- 计算规则：
由A、B、C、D的值来决定：
（1）存在内联样式，那么A=1，否则 A=0；
（2）B = ID选择器出现的次数;
（3）C = 类选择器 + 属性选择器 + 伪类选择器 出现的总次数；
（4）D = 标签选择器 + 伪元素选择器 出现的总次数 。
比较规则：按位比较（ABCD），从左到右。只要一位高出则立即胜出，若无则继续比较。
4. 关系选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
| E F | 包含选择器 | 选择所有包含在E元素里面的F元素 |
| E>F | 子选择器 | 选择所有作为E元素的子元素F，不包括孙元素 |
| E+F | 相邻选择器 | 选择紧贴在E元素之后的F元素 |
| E~F | 兄弟选择器 | 选择E元素所有兄弟元素F，不一定是紧邻的 |
5. display常用属性
| 值 | 作用 |
|---|---|
| inline（行内元素） | 与其他元素共享一行，满了换行显示； 不能更改width和height，大小高度由内容撑开； padding上下左右均有效，margin左右有效，上下无效。 |
| block（块级元素） | 元素内容独占一行； 可以修改width和height； padding和margin上下左右均有效。 |
| inline-block（融合行内与块级元素） | 可以与其他元素共享一行； 可以修改width和height； padding和margin上下左右均有效。 |
| table | 块元素级的表格。 |
6. display：none 和 visibility：hidden的区别
（1）display：none，不会占原来的位置，会影响页面的布局，相当于把元素删除掉。
（2） visibility：hidden，仍然占有原来的位置，不会影响页面的布局，也不会触发该元素绑定的事件。
7. em和rem的区别
（1）em：相对于父元素的font-size
（2）rem：相对于根元素（html）的font-size
注意：1rem=16px
8. 外边距折叠问题
（1）margin均为正值：取较大值。
（2）margin均为负值：取绝对值中的较大值。
（3）margin有正有负：取两者的相加的和。
9. z-index 多个元素层叠顺序
- z-index默认为0，可取整数值（也可取负值）
- z-index值较大的元素，显示在上面。
10. 优雅降级 和 渐进增强
（1）优雅降级【向下兼容】：一开始就构建站点的完整功能，然后针对低版本的浏览器进行测试和修复。
（2）渐进增强【向上兼容】：针对低版本的浏览器构建页面，以保证最基本的功能实现；接着根据高版本的浏览器进行交互、效果，追加功能以达到更好的体验。
