# 选择器
# 选择器分类
元素选择器 a{}
伪元素选择器 ::before{}
TODO 待补充
# 选择器的权重
ID选择器#id{} +100
类属性 伪类 +10
元素 伪元素 +1
其他选择器 +0
# 属性加强-优先级
!important 优先级最高
元素属性 优先级高
相同权重 后写的生效
# 字体
- 字体族
- 字重
# 行高
- 行高的构成
# 背景
- base64 用在小图标 上
# 边框
- 边框属性
border
边框背景
边框原理
- 实现一个三角形
# 滚动
滚动行为
滚动条
# 文字折行
- overflow-wrap（word-wrap）通用换行控制
- 是否保留单词
- word-break 针对多字节文字
- 中文句子也是单词
- white-space 空白处是否断行
# 装饰属性
- 字重 font-weight
- 斜体 font-style：itatic
- 下划线 text-decoration
- 指针 cursor
# CSS Hack
处理多个浏览器的兼容性问题
# 格式化上下文
格式化上下文（Formatting Context）是 CSS2.1 规范中的一个概念，大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。
不同类型的盒子有不同格式化上下文，大概有这 4 类：
- BFC (Block Formatting Context) 块级格式化上下文；
- IFC (Inline Formatting Context) 行内格式化上下文；
- FFC (Flex Formatting Context) 弹性格式化上下文；
- GFC (Grid Formatting Context) 格栅格式化上下文
# 如何优化图像以及图像格式有什么区别？
- 优化图像：
不用图片，尽量使用CSS3代替。对于一些要实现的修饰效果，例如阴影，圆角，半透明等，可以用CSS3完成； 尽可能使用矢量图SVG代替位图。对于绝大多数图案和图标等，矢量图更小，而且可以缩放而无需生成多套图。现代的主流浏览器大多数都能稳定的支持SVG。
- 图像格式区别：
- 矢量图： 图标字体，如font-awesome、svg；
- 位图： GIF、jpg（JPEG）、png；
- 矢量图和位图的区别：
png-便携式网络图片（Portable Network Graphics）,是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。 大多数地方都可以用。它可以细分为三种格式： PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值；
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。一种大小与质量相对平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适用于色彩简单（色调少）的图片，比如图标啊，logo等；
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。具有支持动画，索引透明，压缩等特性。使用色彩简单的图片
bmp的优点： 高质量图片；缺点： 体积太大； 适用场景： windows桌面壁纸；
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
- 优点： 能保证在最不失真的情况下尽可能压缩图像文件的大小；
- 缺点： 对于需要高保真的较为复杂的图像，PNG虽然能无损压缩，但是图片较大，不适合应用在web页面上；
# 什么是回流（重排）和重绘以及其区别？
- 回流（重排），reflow:当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；
- 重绘（repaint）:当render tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。
注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。
- 触发重排（回流）的条件：
- 增加或者删除可见的dom元素；
- 元素的位置发生了改变；
- 元素的尺寸发生了改变，例如边距，宽高等几何属性改变；
- 内容改变，例如图片大小，字体大小改变等；
- 页面渲染初始化；
- 浏览器窗口尺寸改变，例如resize事件发生时等；
# 问题集锦
- Css选择器优先级？
- 雪碧图的作用
- 自定义字体使用场景
- 伪类和伪元素的区别？
- 如何美化checkbox？
- label[for]和id
- 隐藏原生input
- :checked+label