1 说一下css盒模型

简介：就是用来装页面上元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
标准盒子模型
IE盒子模型
区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指的是content部分的宽度。在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右border+左右padding+width

IE盒子模型的盒子宽度：width

在CSS3中引入了box-sizing属性，box-sizing：content-box表示标准的盒子模型，box-sizing：border-box表示的是IE盒子模型，box-sizing：padding-box这个属性值的宽度包含了左右padding+width
很好理解记忆，包含什么，width就从什么开始算起

2 画一条0.5px的线

利用transform的缩放

#line {
    border-bottom: 1px solid black;
    transform: scaleY(0.5);
 }

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

3 link标签和import标签的区别

link属于html标签，而@import是css提供的

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载

link是html标签，因此没有兼容性，而@import只有IE5以上才能识别

link方式样式的权重高于@import

4 transition和animation的区别

animation和transition大部分属性是相同的，都可以做出动画效果。但是transition主要做简单的过渡效果，而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。
transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去、焦点、点击等）才执行动画，过渡只有一组（两个：开始，结束）关键帧
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画（设置多个关键帧）

5 flex布局

弹性布局，用来为盒模型提供最大的灵活性。
布局的传统解决方案：基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
简单的分为容器属性和元素属性

容器的属性：

flex-direction:决定主轴的方向（即子item的排列方法）。

flex-wrap:决定换行原则。

flex-flow：flex-direction 和 flex-wrap 属性的复合属性。

justify-content:对齐方式，水平主轴对齐方式。

align-item：对齐方式，竖直轴线方向。

元素的属性：

order属性：定义元素的排列顺序，顺序越小，排列越靠前，默认为0。

flex-grow属性：定义元素的放大比例，即使存在空间，也不会放大。

flex-shrink属性：定义了元素的缩小比例，当空间不足的情况下会等比例的缩小，如果flow-shrink为0，则为不缩小。

flex-basis属性：定义了在分配多余的空间之前，元素占据的空间。

flex：是flex-gorw和flex-shrink、flex-basis的简写，默认值为0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items。

6 BFC

（1）什么是BFC?

BFC（Block Formatting Context）直译成：块级格式化上下文，是web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

（2）形成BFC的条件

浮动元素，float除none以外的值;
定位元素，position（absolute，fixed）;
display为以下其中之一的值inline-block，table-cell，table-caption;
overflow除了visible以外的值（hidden，auto，scroll）;

（3） BFC的特性

内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定。
bfc的区域不会与float的元素区域重叠。
计算BFC的高度时，浮动元素也参与计算。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

参考视频：www.bilibili.com/video/BV1TT…

7 垂直水平居中的方法

这里介绍四种常用的垂直水平居中方法，足够用于面试

html部分

<div class="parent">
  <div class="child">子元素</div>
</div>

css部分

1.使用display：flex实现（不需要固定宽高）

.parent{
        width: 300px;
        height: 300px;
        background-color: brown;
        display: flex;
        align-items: center;
        justify-content: center;
}
.child{
        padding: 20px;
        background-color: blue;
}

2.使用position+transform：translate(-50%,-50%)实现（不需要固定宽高）

.parent{
        width: 300px;
        height: 300px;
        background-color: green;
        position: relative;
 }
.child{
        padding: 20px;
        background-color: yellow;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
 }

3.position+margin负值（需要指定宽高）

.parent{
        width: 300px;
        height: 300px;
        background-color: purple;
        position: relative;
  }
 .child{
        background-color: plum;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 120px;
        margin-top: -60px;
        margin-left: -50px;
 }

4.position+margin:auto（需要指定宽高）

 .parent{
        width: 300px;
        height: 300px;
        background-color: lightcoral;
        position: relative;
  }
  .child{
        background-color: lightblue;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 120px;
        margin: auto;
 }

8 说一下块元素和行元素

块级元素：独占一行，并且会自动填满父元素，可以设置margin和padding以及高度和宽度。
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

9 双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会折叠。

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是它们两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者相加的和。

10 position属性比较

固定定位fixed

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间，Fixed定位的元素和其他元素重叠。

相对定位relative

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然会占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素。那么它的位置相对于< html >,absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。

粘性定位sticky

元素先按照普通文档流定位，然后相对于该元素在流中的float root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位Static

默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）

inherit

规定应该从父元素继承position属性的值

11 如何清除浮动？

清除浮动的方法

父级+overflow：hidden
父级设置clearfix
父级也浮动

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 500px;
      margin: 50px auto;
      border: 5px solid red;
    }
    .left{
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="left">left</div>
  </div>
</body>
</html>

可以看到，当我们给子元素添加浮动后，其会脱离文档流，此时父元素会认为子元素不存在了，因此会出现这种情况。那么如何清除浮动呢？

第一种方法，给父级加上overflow:hidden

.box{
      overflow: hidden;
      width: 500px;
      margin: 50px auto;
      border: 5px solid red;
  }
.left{
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
  }

第二种方法，让父级也浮动

.box{
      float: left;
      width: 500px;
      margin: 50px auto;
      border: 5px solid red;
}
.left{
     float: left;
     width: 200px;
     height: 200px;
     background-color: #ccc;
}

第三种方法，手写clearfix

首先要给要清除父类的元素加一个clearfix类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .clearfix::after{
      content:"";
      display: block;
      clear: both;
    }
    .box{
      width: 500px;
      margin: 50px auto;
      border: 5px solid red;
    }
    .left{
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="left">left</div>
  </div>
</body>
</html>

12 CSS选择器有哪些，优先级呢？

id选择器、class选择器、标签选择器、伪元素选择器、伪类选择器等。
同一个元素引用了多个样式时，排在后面的样式属性优先级高
样式选择器的类型不同时，优先级顺序为：id选择器>class选择器>标签选择器
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式，如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同样式属性会被覆盖，继承的样式的优先级比较低，至少比标签选择器的优先级低。
带!import标记的样式属性优先级最高
样式表的来源不同时，优先级顺序为：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

13 怎么样让一个元素消失掉？

display:none

把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉，当display设置为none，任何对该元素直接的用户交互操作都不可能生效。

visibility:hidden;

该元素被隐藏起来了，不会改变页面布局，仍占据原有空间，但不会触发该元素已经绑定的事件。

opacity:0

该元素隐藏起来了，但不会改变页面布局，并且如果该元素已经绑定了一些事件，如click事件，那么点击该区域，也能触发点击事件，它只是一种视觉隐藏，将元素变得透明。元素本身依旧占用它的位置。

z-index:-1000

将元素隐藏不占据空间，会改变页面布局，不能进行交互事件

14 calc属性

Calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格。例如：width:calc(100% - 10px)

15 display:table和本身的table有什么区别？

display：table和table是相对应的，区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。
之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table编写出来的文件小，而且table必须在页面完全加载后才显示，div是逐行显示，table的嵌套性太多，没有div简洁。

16 z-index的定位方法

z-index属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远。它的属性值有auto，默认。

17 如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？

可以更改父元素的color

18 line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。height一般是指容器的整体高度。

19 设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域。

20 知道属性选择器和伪类选择器的优先级吗？

属性选择器和伪类选择器的优先级相同。

21 block、inline和inline-block的区别

block块级元素，独占一行，可设置宽高，默认宽度为父元素的宽度。margin/padding水平垂直方向都有效。
inline行内元素，与其他行内元素并排，不可设置宽高，默认宽度为内容的宽度。margin在竖直方向上无效，padding在水平方向垂直方向都有效。
inline-block行内块元素：结合了行内元素和块级元素的优点，可设置宽高，也可以和其他行内元素并排

display:inline(转换为行内元素)、block(转换为块级元素)、inline-block(转换为行内块元素)

22 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法？

如果改变了元素的宽高，元素的位置，就会导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

引起重排重绘的原因有：

添加或删除可见的DOM元素
元素尺寸位置的改变
浏览器页面初始化
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排

减少重绘重排的方法：

不在布局信息改变时做DOM查询
在用js修改盒子的多个样式时，尽量使用className来对一次性盒子进行修改
对于多次重排的元素，比如说动画，使用绝对定位脱离文档流，使其不影响其他元素

怎么脱离文档流？

float
absolute

23 overflow的原理

要清楚这个解决方案的原理，首先要了解BFC。BFC块级格式化上下文，是CSS可视化渲染的一部分，它是一块区域，规定了内部块的渲染方式，以及浮动相互之间的影响关系。

当元素设置了overflow：hidden，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说即使BFC区域内只有一个浮动元素，BFC的高度也不会发生坍缩，所以就达到了清除浮动的目的。

24 两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的？

margin的外边缘

25 如何实现双飞翼布局？

什么是双飞翼布局？

左右宽度固定，中间宽度自适应，中间的内容优先加载

基本的html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .item{
    color: #fff;
    font-size: 20px;
  }
  .container{
    background-color: #ccc;
  }
  .content{
    height: 200px;
    background-color: green;
  }
  .left-item{
    width: 200px;
    background-color: red;
  }
  .right-item{
    width: 150px;
    background-color: blue;
  }
</style>
<body>
  <div class="container item">
    <div class="content">中间的内容</div>
  </div>
  <div class="left-item item">left-item</div>
  <div class="right-item item">right-item</div>
</body>
</html>

要实现双飞翼布局，即元素在同一行上显示，肯定需要设置浮动，这里我们只需要给公共属性item设置浮动即可

.item{
    float: left;
    color: #fff;
    font-size: 20px;
  }

加了浮动之后，出现了几个问题，首先是中间内容的宽度被压缩了，我们想要的效果是它的宽度随着页面自适应，第二个问题就是加了浮动之后，我们还需要清除浮动。

解决宽度问题，我们只要给container加一个width：100%即可。

而清除浮动，我们给它们加一个父级box，给box设置overflow：hidden

<div class="box">
  <div class="container item">
    <div class="content">中间的内容</div>
  </div>
  <div class="left-item item">left-item</div>
  <div class="right-item item">right-item</div>
</div>

.box{
   overflow: hidden;
}
.container {
  width: 100%;
  background-color: #ccc;
}

接下来要给左右这两个区域预留出空间，我们需要给里面实际放内容的区域加外边距

.content {
      height: 200px;
      margin-left: 200px;
      margin-right: 150px;
      background-color: green;
    }

接下来只要分配一下左右元素就行了

.left-item {
      width: 200px;
      margin-left:-100% ;
      background-color: red;
}
.right-item {
      width: 150px;
      margin-left: -150px;
      background-color: blue;
}

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box{
      overflow: hidden;
    }
    .item {
      float: left;
      color: #fff;
      font-size: 20px;
    }
    .container {
      width: 100%;
      background-color: #ccc;
    }
    .content {
      height: 200px;
      margin-left: 200px;
      margin-right: 150px;
      background-color: green;
    }
    .left-item {
      width: 200px;
      margin-left:-100% ;
      background-color: red;
    }
    .right-item {
      width: 150px;
      margin-left: -150px;
      background-color: blue;
    }
  </style>
  <body>
    <div class="box">
      <div class="container item">
        <div class="content">中间的内容</div>
      </div>
      <div class="left-item item">left-item</div>
      <div class="right-item item">right-item</div>
    </div>
  </body>
</html>

26 如何实现圣杯布局？

基础html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .item {
      color: #fff;
      font-size: 20px;
    }
    .container {
      background-color: #ccc;
    }
    .content {
      height: 200px;
      background-color: green;
    }
    .left-item {
      width: 200px;
      background-color: red;
    }
    .right-item {
      width: 150px;
      background-color: blue;
    }
  </style>
  <body>
    <div class="container">
      <div class="content item">中间的内容</div>
      <div class="left-item item">left-item</div>
      <div class="right-item item">right-item</div>
    </div>
  </body>
</html>

跟双飞翼布局类似，刚开始还是先加浮动，并且让中间的内容宽度自适应，还有清除浮动

 .item {
      float: left;
      color: #fff;
      font-size: 20px;
}
.container {
      overflow: hidden;
      background-color: #ccc;
}
.content {
     width: 100%;
     height: 200px;
     background-color: green;
}

接下来给左右两个元素预留出空间，注意这里就体现出和双飞翼布局的区别了，这里我们使用内边距来预留区域

.container {
      overflow: hidden;
      padding-left: 200px;
      padding-right: 150px;
      background-color: #ccc;
}

接下来就是归位，这里归位的方法也和双飞翼的布局不同

.left-item {
      width: 200px;
      margin-left: -100%;
      position: relative;
      right: 200px;
      background-color: red;
}
.right-item {
      width: 150px;
      margin-right: -150px;
      background-color: blue;
}