CSS hack
- 现在浏览器兼容性越来越好，已经越来越不需要hack了，但如果需要兼容IE7/8，CSS hack就很重要。
- hack 即不合法但生效的写法，是比较偏门的写法，只在部分浏览器中生效。
- 作用：主要用于区分不同的浏览器。
- 缺点：难理解、难维护、易失效
- 替代方案1：特性检测
- 替代方案2：针对性加
class
使用注意
当我们使用hack时一定要将 标准属性 放在前面，hack放到后面。否则假设hack在前，标准在后，IE对第一个属性也生效，第二个属性也生效，最后成立的还是第二个属性，就体现不出区别了。
面试题：如何处理浏览器兼容问题
hack虽然不是最好的方案，但是确实是最快最有效的CSS 兼容性解决方案。
美化checkbox
【重点是 伪类选择器:checked和 兄弟选择器+的运用】
效果：
实现过程
- 首先我们有一个
checkbox和一个label,绑定以后点击label就相当于点击了checkbox:
- **隐藏
checkbox**，此时可以通过点击label来代替点击checkbox
- 样式都写在
label上（包括图标），图标是通过改变背景来实现的，:checked状态是CSS给的，利用它和 兄弟选择器+来实现背景（图标）的改变：
- 可参考笔记关于
:checked
同方法美化单选框radio
同样的方法也可以用于美化 单选框radio
类似方法其他案例
同样使用 伪类选择器:checked和 兄弟选择器+：
- 设置三个单选框
radio作为三个选项卡按钮，radio后面跟一个<label>放置选项卡内容 - 选中
radio后状态改为:checked，通过:checked + label设置显示的选项卡内容。
面试题
CSS样式（选择器）的优先级
- 计算权重确定（计算不会进位）【参考《《CSS选择器与非布局样式：字体、行高》》/参考笔记2】
!important最优先【参考笔记】- 内联样式较为优先
- 如果权重一样，那么后写的优先级高【参考笔记】
- 可参考笔记《CSS选择器与非布局样式：字体、行高》/选择器的优先级
雪碧图的作用
- 使用雪碧图，将多个图标放在一张图上加载，通过
background-position定位来显示相对应的图片。 - 所有小图标集中在一个图片上，这样就可以减少http请求，提高页面访问速度。
- 有些情况下可以减少图片大小
自定义字体的使用场景及原理
原理：
使用网络字体然后在CSS中定义。
使用场景
- 当字体用：宣传/品牌/banner等固定文案（自定义中，中文字体占内存太大，只能放在固定文案上）
- 当图标用：字体图标(将图标设置成对应文字，使用时直接输入文字即可)
网络字体、本地自定义字体
- 从 远程/本地 引用字体。
- CSS3
@font-face规则(可以参考菜鸟教程)来引用 远程/本地 字体。 - 如果字体文件不在工程文件夹下的位置，请使用完整的URL：
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf') - 也可以直接连接别的网站的css样式表然后使用
font-family属性进行网络字体的引用。（例子2） - 如果远程的字体有问题，可能是跨域的问题。如果跨域，必须要求对方服务器出具cors的头，允许跨域。
例子1：
- 可以参考菜鸟教程
- 如果字体文件不在工程文件夹下的位置，请使用完整的URL：
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
例子2：
- 也可以直接连接别的css样式表然后使用
font-family属性进行网络字体的引用。 - 样式表中已经有对字体的定义，也就可以直接使用了。
iconfont 字体做图标
- 可以在“**阿里巴巴矢量图标库：https://www.iconfont.cn/**”找到各种图标。
- 加入购物车 - 统一 “添加至项目” - 得到一套图标
- 下载好后里面会有 使用demo：
- 本质上，**这些图标都是字体，使用的是标签
<i>，但实际上我们调用的是加到CSS中的伪元素::before**：
base64的使用
普通的背景图中url()中是路径，而 base64 是一串文本。
- 用于减少HTTP请求（但会增大解码的开销，如果拿到的是图片，那只需要解码显示；如果拿到的是base64，就需要先把他转化为一个图片数据，然后再做后面的操作，在移动端有明显影响。）
- 适用于小图片
- base64的体积约为原图的4/3
- 详细笔记
伪类和伪元素的区别
- 伪元素选择器：不会出现在HTML中，也不会出现在DOM树中，但它是真实存在的元素，它可以在页面上显示内容、设置样式等等。
- 伪类选择器：是已有元素的一种状态下的样式，它不是真实存在的元素（和伪元素要区分开）
- 前者单冒号，后者双冒号（但因为历史遗留问题，有的浏览器中后者也只能使用单冒号）
- 补充：很久以前 伪元素选择器 刚出现时也是和 伪类选择器 一样使用单冒号的，所以去兼容一些老旧的IE时也有可能需要使用单冒号来写伪元素选择器，否则可能显示不出来，这是历史遗留问题。
- 可参考笔记伪类和伪元素
如何美化checkbox(如何使用纯CSS实现checkbox)
【重点是 伪类选择器:checked和 兄弟选择器+的运用】
效果：
实现过程
- 首先我们有一个
checkbox和一个label,绑定以后点击label就相当于点击了checkbox: - **隐藏
checkbox**，此时可以通过点击label来代替点击checkbox - 样式都写在
label上（包括图标），图标是通过改变背景来实现的，:checked状态是CSS给的，利用它和 兄弟选择器+来实现背景（图标）的改变： - 可参考笔记关于
:checked
同方法美化单选框radio
同样的方法也可以用于美化 单选框radio
类似方法其他案例
同样使用 伪类选择器:checked和 兄弟选择器+：
- 设置三个单选框
radio作为三个选项卡按钮，radio后面跟一个<label>放置选项卡内容 - 选中
radio后状态改为:checked，通过:checked + label设置显示的选项卡内容。