css面经
1. 标准盒子模型和普通盒子模型的区别？
普通盒子模型，box-sizing: border-box, 设置的height/width 属性指的是 content + border + padding
标准盒子模型， box-sizing: content-box, 设置的 height、width 属性值得是 content
2. CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高
3. css 新增伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
4. position的值
static，relative, absolute, fixed
5. css3 的新特性
- RGBA 和透明度 opacity
- backgrund-image 、background-origin、background-size， background-repeat
- word-warp: break-word
- 文字阴影， text-shadow: 2px, 2px 2px #fff, 水平，垂直，模糊，阴影
- font-face属性， 定义自己的字体
- border-radius，圆角
- 盒子阴影： box-shadow
- 媒体查询 meida
6. 弹性布局适合于移动前端开发，在Android和ios上也完美支持。
7. 三角形原理， 宽高设置为0，然后设置边框样式
8. 品字布局：三块的高度是确定的，上面那块使用 margin: 0 auto； 居中，下面使用float 或者 inlint-block不换行，margin调整位置。
9. 兼容性问题：2023年应该没人会问这个问题了吧，现在ie都淘汰了。。
10 为什么要初始化css样式：
因为浏览器的兼容不同，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面差异。
11. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
12. display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
13. position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
14. 设置元素浮动后，该元素的display值是多少
自动变成display:block
15. css 预处理器：less ，sass
16. 让chrome支持小于12px的文字， transform: scale(0.8)
17. 让页面的字体变清晰，变细使用css： font-smoothing: antialiased 灰度平滑
18. 手动写动画，最小时间间隔 1000 * 1/60
19. li与li 之间有看不见的空白间隔是什么原因引起的，有什么解决办法？
行框的排列受到中间空白的影响，因为空格也属于字符，空白也会被应用样式，占据空间，所以会有间隔，把字符大小设置为0，就没有空格了。
1. 将 li 标签写成一排 2 使用float:left 3.font-size: 0
20 display: inline-block 什么时候会有空格？
1.有空格的时候会有间隙，写成一排 2.margin正值的时候，margin使用负值 3.font-size:0 在父元素中使用
21. webp 图片：压缩率只有jpg的 2/3，；大小比png小乐45%，缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
22. style标签写在body前body标签后有什么区别？
页面加载自上而下，当然先加载样式表
卸载body标签后由于浏览器以逐行方式对html文档进行解析，当解析卸载尾部的样式表，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象
23. 阐述一下 CSS Sprites, 雪碧图
将一个页面涉及到的所有图片都包含到一张大图中去，利用CSS的 background-image, background-repeat, background-position 组合进行背景定位， 减少Http请求，提高页面性能。
