前端面试题-css部分一、两种盒模型？ 1、标准盒模型 width = content-width 2、IE盒模型(怪异

一、两种盒模型？

1、标准盒模型

width = content-width

box-sizing: content-box

2、IE盒模型(怪异盒模型)

width = content-width + padding-width + border-width

box-sizing: border-box

二、如何水平垂直居中？

1、position + margin （已知元素宽高）

.parent{
  position: relative;
}
.child{
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -50px;
}

2、position + transform（未知元素宽高）

.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

3、position + margin auto（已知元素宽高）

.parent{
  position: relative;
}
.child{
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

4、flex

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

三、flex 怎么用，常用属性有哪些?

.box{
  display: flex;
}

1、flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认值）：不换行。
wrap：换行。
wrap-reverse：换行，第一行在下方。

3、justify-content

box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4、align-items

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

以下是里面的内容item 所具有的属性

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

四、BFC 是什么？

块级格式化上下文

BFC 触发条件：

浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）

五、CSS 选择器优先级？

越具体优先级越高
同样优先级写在后面的覆盖写在前面的
!important 优先级最高，但是要少用

六、如何清除浮动？

第一种：

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

第二种： overflow为hidden或者auto

七、px em rem 的区别？

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em：（相对长度单位）指相对于父元素的字体大小的单位

浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em，2em=32px；为了简化font-size的换算，我们在body中写入一下代码

body {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面中1em=10px,1.2em=12px，使得视觉、使用、书写都得到了极大的帮助。

3、rem：（相对长度单位）相对于根元素<html>的字体大小。

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;