CSS面试真题

1 CSS样式（选择器）的优先级

1 计算权重确定
2 ！important 权重最高的
3  内联样式
4  如果优先级一样，则后写的优先级高

雪碧图的作用

1 解释：
    CSS雪碧，既CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分


2 实现原理：
  CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了
   1  减少HTTP请求数提高加载性能
   2 有一些情况下可以减少图片大小

自定义字体的使用场景

1 宣传/品牌/banner等固定文案
2 字体图标

base64的使用

1 概念
   Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于 2的6次方=64，所以每6个比特为一个单元，对应某个可打印字符。3个字节有24个比特，对应于4个Base64单元，即3个字节可由4个可打印字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9，这样共有62个字符，此外两个可打印符号在不同的系统中而不同。一些如uuencode的其他编码方法，和之后BinHex的版本使用不同的64字符集来代表6个二进制数字，但是不被称为Base64。


2 为什么使用
  计算机中任何数据都是按ASCII码存储的，而ASCII码的128-255之间的值是不可见字符，而在网络上交换数据时，比如说从A地传到B地，往往要经过多个路由设备由于不同的设备对字符非处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这样不利于传输的，所以就先把数据先做一个Base64编码，统统变成可见字符，降低错误率


3 使用场景
  Base64常用于在通常处理文本数据的场合，表示，传输，存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据



1 用于减少HTTP请求
2 适用于小图片
3 base64的体积约为原图4/3

伪元素和伪类的区别？

1 伪类表状态
2 伪元素是真的有元素
3 为类是单冒号，伪类是双冒号

如何美化checkbox

1 label[for]和id
2 隐藏原生input
3 ：checked+label