CSS（非布局样式）

CSS（非布局样式）

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

1.计算权重

2.！important

3.内联样式比外嵌样式高

4.后写的优先级高

问题2.雪碧图的做用

1.减小 HTTP 请求数，提升加载性能

2.有一些状况下能够减少图片大小

问题3.base64 的使用

1.用于减小 HTTP 请求

2.适用于小图片

3.base64 的体积约为原图 4/3

问题4.伪类和伪元素的区别

1.伪类表状态（连接状态--link）

2.伪元素是真的有元素

问题5.如何美化checkbox

1.label[for] 和 id  (样式由 label 肯定）

2.隐藏原生 input  （将原来 checkbox 隐藏）

3.样式：checked + label

知识点

一.自定义字体

二.行高

构成：由 line box 组成，而 line box 由 inline box 组成，inline box 高度决定 行高 高度

题目：图片为什么下面有空隙（原理和解决方案）

原理：图片根据 inline 作排版，涉及到字体对齐，默认按照 base line 对齐 ，base line 跟底线是有误差的，误差的大小由字体大小而决定（文字12px---误差3px）【图片 3px 缝隙问题】

解决：1.图片遵照 垂直对齐方式，进行调整：（默认 baseline）vertical-align:bottom;使其进行底线对齐  便可

三.背景

1.背景颜色渐变

0deg:从下到上；45deg:左下角到右下角；90deg:从左到右；180deg：从上到下

 

百分比表明位置

2.背景图片属性

background-repeat:(重复）（no-repeat、repeat）

background-position（位置）:center、top、right、left、具体像素

background-size(尺寸）：具体像素

 雪碧图：有不少图标，想将这些图标合并到一张图里面，减小 http 请求，优化网页速度

示例：

两张图片出如今一张图片上，且能够分别设置其位置，这是雪碧图的原理和实现方式

背景缩小场景：1.确实须要缩小背景大小2. 适配移动端（将大图片缩小）使之更清晰

3.base64（适用于小图标）

使用 base64 的图片，不是 url 而是文本,这串文本表明图片自己，节省 http 链接数，

但体积会增大：图片自己体积变为原来 4/3；css文件自己变大，且解码开销增大

 4、滚动

1.滚动行为和滚动条

visible:滚动条隐藏

hidden:滚动条隐藏

scroll:滚动条显示

auto:滚动条自动显示

5、文字折行

1.overflow-wrap(word-wrap)  通用换行控制

是否保留单词

2.word-break   针对多字节文字

中文句子也是单词

3.white-space   空白处是否断行

6、装饰属性

1.字重（粗体）：font-weight

2.斜体：font-style:itatic

3.下划线：text-decortion

4.指针：curson

 7、CSS Hack

Hack 即不合法但生效的写法

主要用于区分不一样浏览器

缺点：难理解、难维护、易失效

替代方案：1.特性检测 2.针对性加 class