前端渣渣的面试准备-css篇

常用考题

1. flex
   父元素：

   • display: flex
   • flex-direction 主轴方向
     • row 水平从左到右
     • row-reverse 水平从右到左
     • colunm 垂直从上到下
     • colunm-reverse 垂直从下到上
   • flex-warp 定义如何换行
     • nowrap 不换行
     • wrap 换行
     • wrap-reverse 换行，颠倒顺序，第一行在下
   • flex-flow flex-direction盒flex-wrap的结合体
   • justify-content 主轴方向上的对齐方式
     • flex-start 起始位置对其
     • flex-end 结束位置对其
     • center 中间对齐
     • space-between 平均分布在行里
     • space-around 平局分布，间距一样
   • aline-items 纵轴上的对齐方式
     • flex-start
     • flex-end
     • center
     • baseline 第一行基线对齐
     • stretch 未设置高度或者设置为auto，则斩满容器高度
       子元素上
   • order 通过order改变排序，小的在前边，可为负数
   • flex-grow 根据扩展比例来分配剩余空间
   • flex-shrink 根据分配比例来收缩空间
   • flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个 属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
   • flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
   • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

2. BFC

   一块独立的区域，让处于BFC内部的元素与外部元素互相隔离
   形成BFC：

   • 根元素
   • position fixed/absolute
   • float 不为none
   • overflow不为visible
   • display的值为inline-block，table-cell，table-caption
     作用：
   • 防止margin重叠
   • 两栏布局，防止文字环绕
   • 防止元素塌陷

3. 层叠格式化上下文

   是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视图或者网页的用户的z轴上延申，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

   产生的条件：

   • 根元素（HTML)
   • z-inde值不为’auto’的 绝对/相对定位
   • z-index值不为’auto’的flex项目（flex item），及：父元素display：flex|inline-flex
   • opacity属性值小于1的元素
   • transform属性值不为none的元素
   • position：fixed

4. 优先级
   important > 行内 > id > class > tag

5. 垂直居中的方法

   • 父元素: display: table; 子元素: display: table-cell;vertical-align: middle;
   • flex: display: flex; align-items: center
   • 绝对定位

6. 伪类和伪元素的区别

   1. 伪类是以:作为前缀，当希望特定状态才被呈现
   2. 伪元素是创建一些不在文档树中的元素，并为其添加样式。
   3. 区别：伪类是通过元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。

7. 标准盒模型盒怪异盒模型

   盒模型：当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将元素表示为一个个矩形盒子。css决定这些盒子的大小，位置及属性。由margin+border+padding+content组成
   标准盒模型： content+padding+border+margin
   怪异盒模型： 元素的宽高=border+padding+content，so margin+宽/高

8. link和@import的区别

   • link属于xhtml标签，@import是css提供
   • 页面加载link同事加载，@import等到页面加载玩家在
   • import ie5+
   • link的样式权重大于@import
   • js智能控制样式差别，linke可控，@import不可控

9. em/px/rem的区别

   • px: 绝对单位
   • em： 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身计算（浏览器默认字体是16px），整个页面内1em不是一个固定值。
   • rem：相对单位，根绝根节点html字体大小来计算，css新属性，ie9+支持