CSS面试题

大家好，又见面了，我是你们的朋友全栈君。

 CSS选择器及其优先级

• !important声明的样式的优先级最高
• 内联样式：1000
• id 选择器 100
• 如果优先级相同，则最后出现的样式生效；
• 继承出来的样式优先级最低；

em\px\rem\vw区别

• px：绝对单位
• em：相对单位，相对父节点的字体大小
• rem：相对单位，相对于根节点html的字体大小 
• vw:天生就是随着屏幕的宽度变化而变化

css几种定位方式？

• static：静态定位（默认值)，正常文档流定位，不脱离文档流
• relative：相对定位，即元素相对于自身的位置进行定位，不脱离文档流
• absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，脱离文档流
• fixed：固定定位，根据屏幕视口的位置来定位，脱离文档流
• inherit：这种方式规定该元素继承父元素的position属性值。 （不常用）
• sticky: 粘性定位,基于用户的滚动位置来定位。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，当元素要滚出显示器屏幕时，表现为fixed。必须指定 top, right, bottom 或 left 四个属性中的其中一个，粘性定位才会生效。否则其行为与相对定位相同。且元素不会脱离文档流。

元素居中

 1.使用定位属性：父元素相对定位，子元素绝对定位 

  2.利用css3新增属性transform: translate(-50%,-50%);

  3.flex布局

flex布局的属性

参考：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
易考点：
flex-flow：是flex-direction和flex-wrap的简写形式
justify-content：定义项目在主轴方向上的排列方式

     假设主轴是水平方向：

•      flex-start：左对齐
•      flex-end：右对齐
•      center：居中
•      space-between：两端对齐，项目之间的间距相等
• 
•      space-around：每个项目两侧间隔相等，所以项目之间的间隔比项目与边缘间隔大一倍
• 

flex
    flex-grow、 flex-shrink 、flex-basic的简写 默认是0 1 auto，后面两个值可选
该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）
 

标准盒子模型和IE盒子模型

盒模型分为两种：标准和怪异
盒模型的属性包含margin padding border content
标准盒模型的width = content
怪异盒模型的width = border + padding + content
box-sizing：border-box将采用怪异盒模型
Box-sizing：content-box将采用标准盒模型

 display的属性值及其作用

display的block、inline和inline-block的区别

（1）行内元素

• 设置宽高无效；
• 不支持上下margin设置,支持左右margin的设置;支持padding设置。
• 不会自动换行；

（2）块级元素

• 可以设置宽高；
• 设置margin和padding都有效；
• 可以自动换行；
• 多个块状，默认排列从上到下。

重绘回流

1. 浏览器渲染机制
浏览器采用流式布局模型（Flow Based Layout）
浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。
然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
2.重绘
由于节点的属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。
3.回流
回流是布局需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
回流必定会发生重绘，重绘不一定会引发回流。
4.减少重绘与回流
1、使用 visibility（重绘） 替换 display: none （回流）
2、避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
3、尽可能在DOM树的最末端改变class，
4、合并多次对DOM和样式的修改，然后一次处理掉

chrome的最小字体12px限制最终解决办法

利用css3的transform属性
-webkit-transform: scale(0.90);

BFC

什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc

简单来说就是，BFC是一个完全独立的渲染区域，让空间里的子元素不会影响到外面的布局。

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: table-cell
• display: flex