前端面试css篇

 1. 前端优化做过哪些
 - 网页内容
    - 减少http请求次数
      - 将js和css文件捆绑下载
      - 使用雪碧图
    - 减少DNS查询次数
    - 避免在页面的主体布局使用table
    - 减少DOM元素数量
    - 减少iframe
 - 服务器端
    - 使用cdn加速
    - 多使用GET请求
    - 避免空的src的图片，因为空的也会进行请求
  - CSS
    - 样式表写在head的里面
    - 用link代替@import
    - 少嵌套
  - JavaScript
    - 写在body的最下面，让网页渲染内容尽快加载给用户
    - 使用h5新增的async关键字，可以让js异步执行
    - 将js和css外部引入，并且精简并压缩
 - 减少DOM操作
 - 图片
    - 图片预加载/懒加载
    - 不要在html中缩放图片，如果有小图片，直接值用小图片

2. 介绍一下em，rem，vw, vh, vmax, vmin
  - em: em是相对长度单位。相对于当前元素内文本的字体尺寸()
  - rem: rem是CSS3新增的一个相对单位，相对的是HTML根元素的字体大小。除了IE8及更早版本外，所有浏览器均已支持rem。
  - vw: 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  - vh: 视窗高度的百分比
  - vmax: 当前 vw 和 vh 中较大的一个值
  - vmin: 当前 vw 和 vh 中较小的一个值

  - 视窗(Viewport)是浏览器实际显示内容的区域，是不包括工具栏和按钮的网页浏览器的内容区域。
  - 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

3. 浏览器的渲染原理
  - 浏览器将获取的HTML文档解析成DOM Tree（DOM树）
  - 浏览器将Css样式表，解析成CSSOM Tree（CSS树）
  - 将DOM和CSSOM合并为渲染树（rendering tree），这个过程称之为attachment
  - 渲染树的每个元素经过精确的计算后，给出坐标，这个过程称之为layout
  - 将渲染树的各个节点绘制到屏幕上，这个过程称之为painting

4. 从浏览器地址栏输入url到显示页面的步骤
  - 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
  - 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
  - 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
  - 载入解析到的资源文件，渲染页面，完成。

 5. 过渡和动画
  - 过渡需要用户触发，动画不需要用户触发
  - 过渡不能控制中间过程，动画可以
  - 过渡只能一次， 动画可以任意次数

6. 回流和重绘
  - 什么是回流
    通过构造render tree，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
    当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。
  - 什么是重绘
    当render tree中的一些元素需要更新属性时，而这些属性只是影响元素的外观、风格而不会影响布局的时候，比如background-color，文字颜色、边框颜色等。则就称为重绘。
  - 区别
    回流必将引起重绘，重绘不一定引发回流，回流所需的成本比重绘高很多，改变父节点里的子节点很可能会导致父节点的一系列回流。

  - 何时发生回流重绘
    页面第一次渲染(初始化)
    添加或删除可见的DOM元素
    元素的位置发生变化
    元素的尺寸发生变化(包括外边距，内边距，边框大小，高度和宽度等）
    内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代或者字体改变
    浏览器窗口尺寸的变化（因为回流是根据视口的大小来计算元素的位置和大小的）
    定位或者浮动，盒模型等
    获取元素的某些属性
  - 减少重绘和回流
    使用transform做形变和位移替代定位top
    使用visibility替换display:none, 因为前者只会引起重绘，而后者会引起回流
    不要使用table布局，可能很小的一个改动会造成整个table的重新布局
    动画实现的速度选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
    CSS选择符会从右往左匹配查找，因此要避免层级过多
    将频繁重绘或回流的节点设置为图层，图层能够阻止该节点渲染行为影响别的节点。比如video标签，浏览器会自动将该节点变为图层
    避免多次读取某些属性
    合并多次对DOM和样式的修改，然后一次处理掉

7. 移动端适配怎么做
  1. 使用手机淘宝之前的方案 flexible.js
  2. 使用less或者sass等css预编译的mixin混合功能，带参数进行自动计算
  3. 使用最新的postcss的postcss-pxtorem插件和lib-flexible插件

8. rgba()和 opacity 的透明效果有什么不同？
  - rgba()和 opacity 都能实现透明效果，
  - opacity 作用于元素，以及元素内的 所有内容的透明度， 
  - rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明 效果！）

9. BFC
  BFC: block formatting context(块状格式化上下文)
    bfc是一个独立的空间，只有块状元素参与，
    它规定了里面的块状元素如何布局，它和外部的坏境毫不相干

  - 触发条件
    1. 根元素（html）本身就是一个BFC
    2. float不能none的时候
    3. position为absolute或者fixed的时候
    4. display为inline-block, table-cell, flex, inline-flex等
    5. overflow不为visible的时候
  - 特点
    1. 内部的元素是从上往下排的
    2. 垂直方向的距离由margin来决定的，属于同一个BFC的两个元素的上下margin会重叠
    3. 每个元素的margin-left会和父元素的border-left相接触
    4. bfc的区域不会和浮动的区域相重叠
    5. bfc的区域和外部空间毫不相干
    6. 在计算bfc高度的时候，浮动元素也会参与计算

10. Css中哪些属性可以继承
  - 字体系列属性
    font-family：字体系列
    font-weight：字体的粗细
    font-size：字体的大小
    font-style：字体的风格
  - 文本系列属性
    text-indent：文本缩进
    text-align：文本水平对齐
    line-height：行高
    word-spacing：单词之间的间距
    letter-spacing：中文或者字母之间的间距
    text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
    color：文本颜色
  - 元素可见性：
    visibility：控制元素显示隐藏
  - 列表布局属性：
    list-style：列表风格，包括list-style-type、list-style-image等
  - 光标属性：
    cursor：光标显示为何种形态

11. 有那些行内元素、有哪些块级元素
   行内元素
    ```
      <a>标签可定义锚
      <abbr>表示一个bai缩写形式
      <acronym>定义只取首字母缩写
      <b>字体du加粗
      <bdo>可覆盖默zhi认的文本方向
      <big>大号字体加粗
      <br>换行
      <cite>引用进行定义
      <code>定义计算机代码文本
      <dfn>定义一个定义项目
      <em>定义为强调的内容
      <i>斜体文本效果
      <img>向网页中嵌入一幅图像
      <input>输入框
      <kbd>定义键盘文本
      <label>标签为
      <input> 元素定义标注（标记）
      <q>定义短的引用
      <samp>定义样本文本
      <select>创建单选或多选菜单
      <small>呈现小号字体效果
      <span>组合文档中的行内元素
      <strong>语气更强的强调的内容
      <sub>定义下标文本
      <sup>定义上标文本
      <textarea>多行的文本输入控件
      <tt>打字机或者等宽的文本效果
      <var>定义变量
    ```
   块状元素
    ```
      <address>定义地址
      <caption>定义表格标题
      <dd>定义列表中定义条目
      <div>定义文档中的分区或节
      <dl>定义列表
      <dt>定义列表中的项目
      <fieldset>定义一个框架集
      <form>创建 HTML 表单
      <h1>定义最大的标题
      <h2>定义副标题
      <h3>定义标题
      <h4>定义标题
      <h5>定义标题
      <h6>定义最小的标题
      <hr>创建一条水平线
      <legend>元素为 
      <fieldset>元素定义标题
      <li>标签定义列表项目
      <noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
      <noscript>定义在脚本未被执行时的替代内容
      <ol>定义有序列表
      <ul>定义无序列表
      <p>标签定义段落
      <pre>定义预格式化的文本
      <table>标签定义 HTML 表格
      <tbody>标签表格主体（正文）
      <td>表格中的标准单元格
      <tfoot>定义表格的页脚（脚注或表注）
      <th>定义表头单元格
      <thead>标签定义表格的表头
      <tr>定义表格中的行
    ```
 行内块元素

``` input image  textarea  select option``` 

12. css权重

  !important > id > class > 标签
  包含选择器的权重等于每一级选择器的权重之和

13. css选择器有哪些
  - 通配符
  - ID选择器
  - 类选择器
  - 元素选择器
  - 后代选择器
  - 层级选择器
  - 属性选择器
  - 伪类选择器
    - 结构伪类
    - 目标伪类
    - ui状态伪类
    - 动态伪类
    - 否定伪类
  - 等

14. 清除图片间隙
  - 清除图片左右的间隙
    1. 将图片挨着写（中间没有空格，也没有回车）
    2. 将图片的父元素的font-size设置成0
    3. 给图片设置浮动
  - 清除图片的上下间距
    1. 将图片设置成display: block
    2. 给图片设置vertical-align: top / middle / bottom

15. stylus/sass/less区别
  - 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
  - Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
  - Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
  - Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；