1. CSS 选择器
- id选择器 #
- 类选择器 .
- 标签选择器div, h1, p
- 相邻选择器h1+p（选择某元素后面紧邻着的元素）
- 普通兄弟选择器 h1 ~ p（选择有同一父元素的某元素后面p元素）
- 子选择器ul > li
- 后代选择器li a
- 通配符选择器 * 选择某元素下的所有元素
- 属性选择器a[rel =“external”]）
2. 伪类选择器 & 伪元素选择器
伪类和伪元素是用来修饰不在文档树中的部分
2.1 伪类选择器——用于向某些选择器添加特殊的效果
- 伪类使用单冒号“:”
- 常用伪类选择器：
:link, :visited, :hover, :focus, :active, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector) - 伪类可以叠加使用：
eg:div:first-child:hover { color: #ff0;}
2.2 伪元素选择器
- 伪元素使用双冒号“::”（但此前都使用的单冒号“:”，所以为了保证兼容伪元素两种使用方法都可以）
- 常用伪元素选择器：
::first-letter, ::first-line, ::before, ::after, ::selection
3. CSS 样式优先级
!important > 内联样式 > id 选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 标签选择器 | 伪元素选择器 > 通配符 > 继承 > 浏览器默认属性
4. 盒模型
- 标准盒模型：
box-sizing: content-box，设置的宽高只是包括内容区，内边距和边框另算 - 怪异盒模型：
box-sizing: border-box，设置的宽高包含了内边距和边框
5. BFC
BFC--块级格式化上下文（Block Formatting Context），是一个独立渲染的块级盒子，其内部的元素与外部的元素相互隔离，内外元素的定位不会相互影响。
5.1 BFC 布局规则
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
- 属于同一个BFC的两个相邻Box的margin会发生重叠，距离为margin相对较大的值；
- BFC的区域不会与float box重叠。
5.2 常用的 BFC 的触发条件
- 根元素（html）
- ovevflow !== visible
- float 不是 none
- positon: absolute / fixed
- display: inline-block / flow-root / table相关
5.3 BFC 常用应用
- 清除文字浮动
- 清除文字环绕
- 清除 margin 叠加
BFC 详细内容见：CSS 布局之 —— BFC
6. 浮动
-
- 浮动元素脱离文档流，不占据空间； 浮动元素碰到包含它的边框或者浮动元素的边框停留。
-
- 浮动元素引起的问题：父元素的高度无法被撑开，影响与父元素同级的元素。
-
-
清除浮动
1）空标签清除浮动：clear：both，但增加了无意义标签
2）触发浮动元素父元素的 BFC
3）父元素 after 伪对象清除浮动
-
7. 居中
居中在平时的运用很多，可通过 relative、absolute定位、flex布局、模拟 table 等方式来实现，详细总结见：CSS居中布局
8. px、em、rem、vh、vw、vmin、vmax
- px：相对长度单位 —— 像素 px 是相对于显示器屏幕分辨率而言的。
- em：相对长度单位 —— 相对于父元素的字体尺寸，若上面父元素未设置，则相对于浏览器的默认字体尺寸。
- rem：相对长度单位 ——
r是root的缩写，相对于根元素的字体大小。 - vh and vw：相对于视口的高度和宽度：1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
- vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。
9. 三栏布局
三栏布局在实际应用中很常见，可通过行内块级元素、绝对定位、浮动、弹性盒模型、表格、栅格等多种方式实现，详细总结见：CSS 三栏布局方法总结
10. CSS3 动画 GPU 加速
CSS3 动画替代 JS 模拟动画的好处：
- 不占用 JS 主线程；
- transform/opacity/filter 可以触发 CPU 硬件加速；
- 浏览器也对动画做优化（不可见时不动画）
参考：
11. 图片 Base64 编码的利弊
优点：
- 无需发起网络请求
- 可像单独图片一样使用
缺点：
- 图片过大的话，使用片 Base64 编码会使 css 文件体积增大，降低 css 可读性，解析 cssom 变慢（cssom阻止任何东西渲染），所以 Base64 编码只适用于小图片。
参考： 图片Base64编码的利与弊分析
