总结
zKing 2019-01-09 CSS
# 雪碧图作用
- 减少 http 请求数，提高加载性能
# 自定义字体的使用场景
- 宣传/品牌/banner 等固定文案
- 字体图标
# base64 的使用
- 用于减少 http 请求
- 适用于小图片
- base64 的体积为原图的三分之四
# 伪类和伪元素的区别
- 伪类表示状态
- 伪元素是真的由元素
- 前者单冒号，后者双冒号
# 用纯CSS创建一个三角形
原理：均分原理，盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分
- 保证元素是块级元素
- 设置元素的边框
- 不需要显示的边框使用透明色
- 实际上三角形的高度，就是border的高度
div{
border: 100px solid;
border-bottom-color: blue;
border-top-color: transparent;
border-left-color:transparent;
border-right-color:transparent;
}
# 美化 checkbox 或 radio
- label for
- 隐藏原生 input
- 使用组合选择器
# 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧?
- 兼容性问题示例
- 不同浏览器margin和padding不同
- 图片布局的问题，在布局的时候有的浏览器会出现间距
- 剩下的大多是 ie 9 以下的兼容问题
- 常用hack的技巧
- IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。
- 使用 prefixfree.js，Normalize.css
- 使用 polyfill 等js
# 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
- 原因
- 浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
- 情况
- 子元素浮动后，父元素高度塌陷了
- 方式
- 可以在父元素中添加 overflow 属性，继而可以撑起高度
- 可以在最后一个兄弟节点后，添加一个空节点，设置清除浮动（现已不常用，维护太麻烦）
- 可以设置伪元素
- .clearfix{ clear:both; zoom:1; }
- .clearfix:after{ content:" "; display:table; }
# 浏览器是怎样解析CSS选择器的?
按照从上到下，从右到左的顺序解析。这样会提高查找选择器所对应的元素的效率
# 元素竖向的百分比设定是相对于容器的高度吗?
大部分情况下，元素竖向的百分比设定是相对于容器的宽度，而不是高度
- 相对于父元素宽度的：
- [max/min-]width、left、right、padding、margin 等；
- 相对于父元素高度的：
- [max/min-]height、top、bottom 等；
# 对line-height是如何理解的？
- line-height就是两个文本行基线之间的距离
- 空div的高度是由line-height决定的。
- line-height只影响行内元素，并不能直接应用于块级元素。
- line-height 具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效。