前端面试HTML+CSS部分（一）static默认值，没有定位，元素出现在正常流中，忽略top，bottom，left，

本文包括：盒模型、position定位、栅格布局原理、垂直水平居中、上下布局中间自适应、左中右布局，中间自适应、重绘重排(回流)、

1、盒模型

设置标准模型box-sizing：content-box；

设置ie模型box-sizing：border-box；

2、position的值，都是根据什么定位，（注意还有sticky）

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

absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位元素通过left，right，top，right以及bottom属性进行规定。

fixed 生成相对定位的元素，相对于浏览区窗口进行定位。元素的位置通过left，right，top，bottom属性行进规定。

relative生成相对定位的元素，相对于其正常位置进行定位。

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

sticky中文意思是“粘性的”。当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。网站头部经常用到

3、栅格布局的原理

UI框架栅格系统实现方式基本为三种：

纯伸缩布局flex方式：这种方式对古老的IE浏览器支持性不是很好，所以一般出现在技术比较激进的框架上，如Bootstrap@4.0，Foundation，基于React的antDesign，基于Vue的ElementUI 等等。
浮动方式：这种方式是为了向下兼容IE低版本浏览器，比如用处很广的Bootstrap@3.x版本。
伸缩和行内结合的方式：雅虎的Pure。

4、垂直居中布局

左右居中

（1）display: inline/inline-block 将父元素设定text-align:center;

（2）display: block 将元素本身的margin-left与margin-right设定为auto，就可以左右居中

1、元素未知宽度 Position 子绝父相子元素距上50%距左50% transform：translate(-50%，-50%)

<style>
    .box{
        width: 500px;
        height:500px;
        background-color: #777;
        margin: 0 auto;
        position: relative;
    }
    .content{
        width:200px;
        height:  200px;
        background-color: #000;
        positon:absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
    }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

2、给父元素设置display：flex；

justify-content:center水平居中

align-items：center垂直居中

<style>
    .box{
        width: 500px;
        height:500px;
        background-color: #777;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content{
        width:200px;
        height: 200px;
        background-color: #000;
    }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

3、给父元素设置display：table-cell； vertical-align: middle;这时只能垂直居中，再子元素margin：0 auto；

<style>
    .box{
        width: 500px;
        height:500px;
        background-color: #777;
        display: table-cell;
        vertical-align:middle;
    }
    .content{
        width:200px;
        height: 200px;
        background-color: #000;
        margin: 0 auto;
    }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

5、上中下布局，中间自适应

<style>
* {
    margin: 0;
    padding: 0;
}
.wrapall {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    flex: 0 0 auto;
    //相当于flex-grow: 0; flex-shrink:0; flex-basis: auto的简写，表示项目在任何情况下都不放大或缩小，保持项目的本来大小。
    background-color: pink;
}
main {
    flex: 1 1 auto;
    background-color: aqua;
}

footer {
    flex: 0 0 auto;
    background-color: lightgreen;
}
</style>
<div class="wrapall">
    <header>我是header</header>
    <main>我是main</main>
    <footer>我是footer</footer>
</div>

兼容ie10

在IE10+，flex布局虽然可用，但是最外层的flex布局，即最外层的class=wrapall使用display: flex时，不能同时设置min-height，所以在最外层class=wrapall外再加一层，HTML代码如下：

<div class="wrapall-fixIE">
    <div class="wrapall">
        <header>我是header</header>
        <main>我是main</main>
        <footer>我是footer</footer>
    </div>
</div>

css新增代码

.wrapall-fixIE {
    display: flex;
}

.wrapall {
    ...
    width: 100%;
}

即在外层新增一个flex布局节点class=wrapall-fixIE，保证设置min-height的不是最外层flex节点，值得注意的是，需要在之前的最外层class=wrapall设置width为100%，这是由于flex内部的元素并非block，在内容宽度不足的情况下不会占据全部宽度。

6、左中右布局，中间自适应

1、浮动

 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7                 *{
 8                     margin: 0;
 9                     padding: 0;
10                 }
11             #left{
12                 width: 200px;
13                 height: 200px;
14                 float: left;
15                 background-color: red;
16             }
17             #right{
18                 width: 150px;
19                 height: 200px;
20                 float: right;
21                 background-color: mistyrose;
22             }
23             #middle{
24                 height: 200px;
25                 margin: 0 150px 0 200px;
26                 background-color: saddlebrown;
28             }
29         </style>
30     </head>
31     <body>
32         <div id="content">
33             <div id="left">我是左侧内容我是左侧内容</div>
34             <div id="right">我是右侧内容我是右侧内容我是右侧内容</div>
35             <div id="middle">我是中间内容我是中间内容我是中间内容</div>
36         </div>
37     </body>
38 </html>

2、浮动+定位

<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }            
            #middle{
                position: absolute;
                left: 200px;
                right: 150px;
                height: 200px;
                background-color: red;
                word-break: break-word;
            }
            #left{
                width: 200px;
                height: 200px;
                float: left;
                background-color: blue;
            }
            #right{
                width: 150px;
                height: 200px;
                float: right;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="left">我是左侧内容我是左侧内容</div>
34          <div id="right">我是右侧内容我是右侧内容我是右侧内容</div>
35          <div id="middle">我是中间内容我是中间内容我是中间内容</div>
36      </div>
    </body>
</html>

第三种：display: box

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #content {
                display: -webkit-box;
                display: -moz-box;
                width: 100%;
                height: 200px;
            }
            #left {
                width: 200px;
                height: 200px;
                background-color: saddlebrown;                
            }
            #middle{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                background-color: blue;
            }
            #right {
                width: 200px;
                height: 200px;
                background-color: saddlebrown;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="left">我是左侧内容我是左侧内容</div>
34          <div id="right">我是右侧内容我是右侧内容我是右侧内容</div>
35          <div id="middle">我是中间内容我是中间内容我是中间内容</div>
36      </div>
    </body>
</html>

7、重绘重排（回流）

重绘repaint：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，因此由于只需要对ui层面的重新像素进行绘制，损耗较少。

回流reflow（重排）：当元素的尺寸结构或触发某些属性时，浏览器会重新渲染页面，称为回流。因此，因此浏览器会重新经过计算，计算后计算后还需要重新页面布局

回流必定触发重绘，重绘不一定触发回流，重绘开销较小，回流代价高。

那些情况会发生重排？

（1）添加或者删除可见的DOM元素

（2）元素位置改变

（3）元素尺寸改变

（4）元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）

（5）页面渲染初始化（无法避免）

（6）浏览器窗口尺寸改变

9、移动端适配方案（必考）

juejin.cn/post/684490…

10、移动端适配1px的问题

juejin.cn/post/684490…

11、lineheight属性1.5和150%区别 首先看line-height属性可能的值

简单说可以分为带单位的值（line-height:1.5em/line-height:150%/line-height:36px）和不带单位的值（line-height:1.5）

下面分别演示两者的区别：

一. 设置带单位的，后代元素会继承父元素计算后的值，如父级行高为36px，后代元素的行高都会继承这个值，如果是“%或者em” 父级优先于font-size相乘得到这个数值，后代元素在继承这个数值，例如：

<div style="line-height:150%;font-size:16px;background-colo:yellow;margin:0;">
 <span>第一行</span>
 <p style="margin:0;font-size:36px;">第二行</p>
</div>

此时的第一行的行高是：16px*150%=24px，而第二行的行高是继承父元素的值，所以行高为24px。可以看到如果子元素的字体大小大于父元素，就会出现错位等问题。

二.设置不带单位的，那它就是个“缩放因子”，后代元素会继承这个缩放因子进行计算，而不是继承父元素计算后的值继承，例如：

<div style="line-height:1.5;font-size:16px;background-colo:yellow;margin:0;">
 <span>第一行</span>
 <p style="margin:0;font-size:36px;">第二行</p>
</div>

效果如下：

这时的第一行行高为：16px1.5=24px,而第二行的行高先继承了缩放因子再进行计算，行高为：36px1.5=54px

总结：从效果图可以看出来，line-height带了单位会出现一些错位等问题。当不带单位时，实际子元素真正的行距是分别与自身元素字号相乘的计算结果，推荐使用可以避免一些意外的继承问题。

12、em和rem的区别

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素（通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem）。

rem中的r意思是root（根源）