一、CSS3 有哪些新特性
1、实现圆角border-radius、阴影box-shadow、图片边框border-image。
2、对文字加特效text-shadow、线性渐变gradient、旋转transform。
3、transform：旋转rotate（9deg）、缩放scale（0.85,0.9）、定位translate（0px，-30px）、倾斜skew（-9deg、0deg）。
4、增加了更多的 CSS 选择器如属性选择器[attr=value]、伪类选择器、伪元素选择器、多重选择器element1,element2。
5、多背景属性如background-size、background-repeat、background-position、background-image；提供了新的颜色空间rgba。
6、在 CSS3 中引入一个伪元素::selection，更改文本选中时的背景颜色和文本颜色。
7、响应式设计，如媒体查询、多栏布局。
8、动画和过渡，通过transition和animation属性控制。
二、CSS 选择器有哪些
1、通配符选择器（ * ）
2、id 选择器（#myid）
3、类选择器（.myclassname）
4、标签选择器（div, h1, p）
5、相邻选择器（h1 + p），只能选择某元素后面一个兄弟元素
6、子选择器（ul > li），只能选择某元素最近一级所有子元素，不会选择孙子之类
7、后代选择器（li a），选择某元素的所有后代，孙子之类也会被选
8、属性选择器（a[rel = “external”]）
9、伪类选择器（a:hover, li:nth-child）
三、CSS 选择器权重比较
四、CSS 哪些属性可以继承
可继承属性：
1、字体系列属性：font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust。
2、文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color。
3、元素可见性：visibility。
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout。
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style。
6、生成内容属性：quotes。
7、光标属性：cursor。
8、页面样式属性：page、page-break-inside、orphans。
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、azimuth、elevation。
不可继承属性：border、padding、margin、display、vertical-align、text-decoration、text-shadow、white-space、unicode-bidi。
五、padding 可以设置为负值吗
可以，但是不会生效，强制变更为 0，letter-spacing也是这样。
六、CSS 单位有哪些？px、em、rem 的区别（★）
1、相对单位：就是相对于另一个长度的长度。CSS 中的相对单位主要分为两大类：
- 字体相对单位，根据 font-size 计算。常见的字体相对单位有：
em、rem、ex、ch。 - 视窗相对单位，根据视窗大小计算。常见的视窗相对单位有：
vw、vh、vmax、vmin。
（1）em 和 rem
em是相对长度单位，1em 等于元素的 font-size 属性的值。
em是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当 DOM 元素嵌套加深时，并且同时给很多层级显式的设置了 font-size 的值的单位是em，那么就需要层层计算，复杂度会很高。
如果自身元素没有设置字体大小，会根据父元素的字体大小计算；如果自身元素设置了字体大小，会基于自身的字体大小进行计算。
em单位除了可以作用于 font-size 之外，还可以运用于其他使用长度的属性，比如 border-width、width、height、margin、padding、text-shadow 等。
所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。
rem是 CSS3 新增的相对长度单位，相对于 HTML 根元素。需要适配各种移动设备时使用rem。
em 和 rem 的区别
- 两者在客户端中计算出来的样式都会以 px 的形式显示。
rem是相对于 HTML 根元素的 font-size 计算，em相对于元素的 font-size 计算。- 当需要根据浏览器的 font-size 设置缩放时，应该使用
rem。 - 使用
em应该根据组件的 font-size 来定，而不是根元素的 font-size 来定。 rem可以从浏览器字体设置中继承 font-size 值，em可能受任何继承过来的父元素 font-size 的影响。
（2）ex 和 ch
ex和ch的大小取决于元素的font-size和font-family属性。
ex指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。ch和ex类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而 0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于ch是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。
（3）vw、vh、vmax 和 vmin
这四个单位都是视窗单位，视窗在 web 端指可视区域，在移动端指布局视窗。视窗单位的值会随视窗大小变化。
vw：视窗宽度的百分比。vh：视窗高度的百分比。vmax：较大的vh和vw。vmin：较小的vh和vw。
假如一个浏览器的高度是 800px，那么 1vh 的值就是 8px。vh和vw的大小总是和视窗的高度和宽度有关。
vmin和vmax与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为 500px，宽度为 1200px，那么 1vmin 就是 5px，1vmax 就是 12px。
2、绝对单位：是一个固定的值，它反应了一个真实的物理尺寸，不受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率（DPI，每英寸的点数）。
// 绝对单位的换算
1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px
（1）px
px全称为 Pixels，表示像素，它是一个绝对单位，但也可以被视为相对单位，相对于显示器屏幕分辨率。px的值是固定的，浏览器不会改变其大小。
（2）pt
px全称为 Point，表示点。常用于软件设计和排版印刷行业。用这个单位无论显示器的分辨率是多少，打印在纸上的结果都是一样的。
如果单纯为了网页的显示，建议就使用px像素单位，如果需要输出印刷产品，就可以考虑使用pt。
（3）pc
pc全称为 Picas，表示派卡。相当于我国新四号铅字的尺寸。派卡也是印刷的术语，1 派卡等于 12 点。1pc = 16px。
（4）cm
cm全称为 Centimeters，表示厘米。1cm = 37.8px。
（5）mm
mm全称为 Millimeters，表示毫米。1mm = 3.78px。
（6）in
in全称为 Inches，表示英寸。1in = 96px。
3、频率单位：赫兹（Hz）和千赫兹（kHz）。
1kHz = 1000Hz
频率单位用于听或说级联样式表中，用来改变一个语言阅读文本的音调。
需要注意，当数值为 0 时，单位对值没有影响，但是单位是不能省略的。也就是说 0、0Hz、0kHz 是不一样的。所以，在使用频率单位时，不要直接写 0。另外，这两个单位是不区分大小写的。
4、时间单位：秒（s）和毫秒（ms）。时间单位用于过渡和动画，用于定义持续时间或延迟时间。
1s = 1000ms
5、分辨率单位：dpi、dpcm、dppx。都是正值，不能为负值。分辨率单位主要用于媒体查询等操作。
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
（1）dpi
dpi全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72 或 96 个点，大于 192dpi 的屏幕被称为高分屏。
@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }
（2）dpcm
dpcm全称为 dots per centimeter，表示每厘米包含的点的数量。
@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }
（3）dppx
dppx全称为 dots per pixel，表示每像素包含的点的数量。由于 CSS px 的固定比率为 1:96，因此 1dppx 相当于 96dpi。它对应于由图像分辨率定义的 CSS 中显示的图像的默认分辨率。
@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }
6、角度单位：deg、grad、rad、turn。
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
用于元素的旋转操作。旋转值为正值，元素顺时针旋转；为负值元素逆时针旋转。
（1）deg：全称为 Degrees，表示度，一个圆总共 360 度。
（2）grad：全称为 Gradians，表示梯度，一个圆总共 400 梯度。
（3）rad：全称为 Radians，表示弧度，一个圆总共 2π 弧度。
（4）turn：全称为 Turns，表示圈（转），一个圆总共一圈（转）。
7、百分比单位：%，所有接受长度值的属性都可用，需要有参照值。
（1）盒模型中的百分比
盒模型包含的属性有：width、max-width、min-width、height、max-height、min-height、padding、margin 等。这些属性在使用百分比时，参照物不尽相同：
- width、max-width、min-width：值为百分比时，其相对于包含块的 width 进行计算。
- height、max-height、min-height：值为百分比时，其相对于包含块的 height 进行计算。
- padding、margin：值为百分比时，如果是水平的值，就是相对于包含块的 width 进行计算；如果是垂直的值，就是相对于包含块的 height 进行计算。
（2）文本中的百分比
文本控制的属性有 font-size、line-height 、vertical-align、 text-indent 等。这些属性在使用百分比时，参照物不尽相同：
- font-size：根据父元素的 font-size 进行计算。
- line-height：根据 font-size 进行计算。
- vertical-align：根据 line-height 进行计算。
- text-indent：如果是水平的，则根据 width 进行计算，如果是垂直的，则根据 height 进行计算。
（3）定位中的百分比
控制 position 位置的 top、right、bottom、left 都可以使用百分比作为单位。其参照物就是包含块的同方向的 width 和 height。不同定位的包含块不尽相同：
- 如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器。
- 如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素。
- 如果元素为固定定位（ fixed ），包含块就是视窗（ viewport ）。
（4）变换中的百分比
transform 属性中的 translate 和 transform-origin 值也可以设置百分比。
- translateX() 根据容器的 width 计算。
- translateY() 根据容器的 height 计算。
- transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算。
注意，在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。
七、position 定位有哪几种属性？是否占位？
子绝父相意义：保证父亲没有脱标，儿子脱标在父亲的范围里面移动。
只有定位了的元素，才能有 z-index 值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。而浮动的元素不能用。
行内元素添加绝对/固定定位，可以直接设置高度和宽度。
块级元素添加绝对/固定定位，如果不给宽度或者高度，默认大小是内容的大小。
八、页面导入样式时，使用 link 和 @import 有什么区别？
1、link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS 等其他事务；而 @import 属于 CSS 范畴，只能加载 CSS。
2、link 引用 CSS 时，在页面载入时同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
3、link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4、link 支持使用 JavaScript 控制 DOM 去改变样式；而 @import 不支持。
5、link 是 HTML 标签是链接文件，而 @import 是导入文件。
九、li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器把两个元素标签之间的空格当成了空白节点，会占据一定空间。
1、多个标签写在一行
2、父级字符大小设置为 0：font-size: 0
3、给每一项添加display：block
4、父级设置letter-spacing: -800px，负值不会产生重叠
行内块元素在同一行显示时有默认空隙，如何解决？
1、子元素设置浮动
2、为父元素设置 font-size: 0，注意子元素要重新设置 font-size
十、图片底部空白缝隙是什么原因造成，怎么去掉
1、行内元素默认是按照基线对齐的，也就是小写字母 x 的底部。
2、line-height属性设置的行高是两行文字基线之间的距离。
3、vertical-align属性设置一个元素的垂直对齐。
4、text-align属性是设置给需要对齐元素的父元素，vertical-align属性是设置给需要对齐的元素本身。
5、vertical-align属性的取值：
| top | 与顶部对齐 |
|---|---|
| bottom | 与底部对齐 |
| text-top | 与文字顶部对齐 |
| text-bottom | 与文字底部对齐 |
| baseline | 与基线对齐 |
| middle | 与中线对齐 |
vertical-align默认值是baseline，也就是基线对齐，图片默认和基线对齐造成底部有空白缝隙。
解决方法：
1、给图片设置display: block，让vertical-align失效。
2、使用其他vertical-align的值，改变图片和文字的对齐方式，vertical-align: bottom/middle/top。
3、将图片的父元素的行高设置足够小，line-height: 5px。
4、设置图片的父元素font-size: 0。
十一、为什么要初始化 CSS 样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
十二、background 的默认填充区域有哪些
border、padding、content
十三、border: none 和 border: 0px 有区别吗
1、性能差异：
border: 0px：浏览器依然对 border-width、border-color 进行了渲染，即已占用了内存值。border: none：浏览器不会对 border 属性值进行渲染，也不会消耗内存值。
2、兼容性差异：
特别的，是针对于 IE6/IE7 与标签 button、input 而言。
border: 0px比border: none更有效，所有浏览器都一致把边框隐藏。border: none对 IE6/IE7 无效，边框依然存在。
十四、CSS 隐藏元素的几种方式
1、display: none;：元素会被完全移除，不再占据空间，也不可交互。
2、visibility: hidden;：元素不可见，但仍然占据原来的空间，不可交互。
3、opacity: 0;：元素不可见，但仍然占据空间，视情况可能可交互。
4、负 z-index：元素仍在页面上，但被其他元素遮挡，不可交互。
5、position: absolute; 配合 left: -9999px; 或 top: -9999px;：元素被移动到视口之外，不可交互。
6、width: 0; height: 0; overflow: hidden;：将元素大小设置为 0，超出的部分隐藏，不可交互。
display: none;与visibility: hidden;的区别：
1、是否占据空间。
2、display: none;引起页面重绘和重排，visibility: hidden;只引起页面重绘。
十五、精灵图是什么
精灵图，也称为雪碧图或 CSS Sprite，是一种网页图片应用处理方式。其基本原理是将页面中使用到的各种图片进行分类，整齐划一地摆在一张背景透明的图片上面，然后通过 CSS 的背景技术实现图片的引入。这样，在加载大量图片时，只需加载出这一张大图片，而不需要加载过多的小图片，从而减少了服务器发送和接收请求的次数，提高了页面的加载速度。精灵图通常是一个长方形或正方形的图像，其中包含了许多小的图标、按钮、背景等元素。此外，精灵图还可以通过配置文件来描述精灵图中的子图的名称、矩形坐标、大小等信息，从而实现更复杂的动图效果。