前端高频面试题（未完结）

CSS

如何解决1px的问题

1. CSS 中的 1px 并不能和移动设备上的 1px 划等号直接写0.5px但是兼容性不行，需要ios8以上系统，安卓直接不兼容  
2. 伪元素先放大在缩小：在目标元素后面加个::after，让这个元素布局为absolute之后，整个伸展在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border设为1px，然后借助css动画缩放，把整个伪元素缩小为原来的50%
3. viewport缩放

常见的CSS布局单位

1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em是以自身的font-size为参考的，当em没有设置自身的font-size，则会以父元素的font-size为标准；
3. rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
4. em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局

两栏布局的实现 

1. 左侧浮动+右侧margin-left --> 给父容器一个高度；左边盒子宽度给200px，高度100%，左浮动，右边盒子margin-left：200px，宽度auto，高度100%
2. 左侧浮动+右侧BFC --> 给父容器一个高度，左侧的盒子宽度200px，高度100%，左浮动，右侧的盒子高度100%，overflow：hidden触发BFC
3. flex布局 --> 父容器给一个高度，display：flex；左侧盒子给一个宽度200px，高度100%，右侧盒子宽度100%，flex：1
4. 左侧绝对定位+右侧margin-left --> 父容器给一个高度，position：relative；左侧盒子给一个宽度200px，高度100%，position：absolute，top：0；left：0；右侧盒子margin-left：200px，高度100%
5. 右侧绝对定位+右侧定位left --> 父容器给一个高度，position：relative；左侧盒子宽度200px，高度100%；右侧盒子高度100%，position：absolute，top：0；right：0；bottom：0；left：200px；

 三栏布局的实现

1. 左右绝对定位，中间margin --> 给父容器一个高度，position：relative；左侧盒子和右侧盒子宽度200px，高度100%，左侧盒子左侧绝对定位，右侧盒子右侧绝对定位（position：absolute）中间盒子高度100%，margin：0 200px；
2. flex布局 --> 父容器给一个高度，display：flex；左侧和右侧盒子高度100%，宽度200px；中间盒子高度100%，flex：1；
3. 两侧浮动+中间margin --> 父容器给一个高度；左右盒子宽度200px，高度100%，左边左浮动，右边右浮动，中间的盒子margin：0 200px；高度100%

水平垂直居中的实现

1. 绝对定位+transform --> 父亲给一个高度，position：relative；子盒子position：absolute，top：50%；left：50%；transform：translate（-50%，-50%）
2. 绝对定位+margin:auto --> 父容器给一个高度，position：relative；子容器有宽度和高度，position：absolute，上下左右都是0，margin：auto；
3. 绝对定位+margin负值 --> 父容器给一个高度，position：relative；子盒子绝对定位，top：50%；left：50%，margin-top： - 高度/2 px;margin-left:- 宽度/2 px
4. flex布局 --> 父容器给一个高度，display：flex，justify-content：center，align-items：center；

  对盒模型的理解

1. 两种盒模型（box-sizing），但是都包含content、padding、border、margin
2. 标准盒子模型：盒子大小为width+padding+border（以前默认的，会撑大盒子）
3. 怪异盒子模型（IE盒子模型）：border-box 盒子大小为width
4. 如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

Sass、Less 是什么？为什么要使用他们？ 

1. 他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
2. 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。 
3. 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

为什么需要清除浮动，清除浮动的方式？

1. 非IE浏览器下，容器不设高度且子元素浮动时，浮动的子元素脱离文档流，不占据空间（引起“高度塌陷”现象），父元素的高度无法被撑开，影响与父元素同级的元素，影响布局
2. 给父级div定义height属性
3. 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto使用 :：after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**