我们直接切入主题，分享给大家在大厂中经常考的重点面试题。先从HTML面试题说起。

一、HTML面试题

1、如何理解HTML语义化？

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

2、什么是块状元素&内联元素？

块状元素：display:block/table;特点是独占一行。常见的元素标签有：div、h1、h2、table、ul、ol、p等。
内联元素：display：inline/inline-block；特点是并列在一行，直到浏览器边界换行为止。常见的元素标签有：span、img、input、button等。

CSS面试题

1、盒模型宽度计算

offsetWidth = (内容宽度+内边距+边框)，无外边距。
box-sizing:border-box;

2、margin 纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠。
空白内容的
也会重叠。

3、margin 负值问题

margin-top和margin-left负值，元素向上、向左移动。
margin-right负值，右侧元素左移，自身不受影响。
margin-bottom负值，下方元素上移，自身不受影响。

4、BFC理解与应用

BFC（Block Format Context:块级格式化上下文）：一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

形成BFC的条件：

float 不是none
position是absolute或fixed
overflow不是visible
display是flex

BFC的常见应用：清除浮动

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

5、 float 布局

经典PC端布局：圣杯布局和双飞翼布局

使用float布局
两侧使用margin负值，以便和中间内容横向重叠。
防止中间内容被两侧覆盖，圣杯布局用padding、双飞翼布局用margin。

手写clear fix

.clearfix:after {
content: '';
display:table;
clear:both;
}

6、flex布局

举个例子，用css画三个点的色子。

.box { /*色子边框*/
    display: flex; /*flex布局*/
    justify-content: space-between; /*两端对齐*/
}
.item {
    /*背景色、大小、边框等*/
}
.item:nth-child(2) {
    align-self:center; /*第二项居中对齐*/
}
.item:nth-child(3) {
    align-self:flex-end; /*第三项尾对齐*/
}

7、absolute和relative定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位

8、居中对齐的实现方式

水平剧中

inline元素：text-align：center
block元素：margin：auto
absolute元素： left：50% + margin-left负值

垂直居中

inline元素： line-height的值等于height值
absolute元素：top:50% + margin-top负值
absolute元素：transform(-50%, -50%)
absolute元素： top,left,bottom,right=0 + margin:auto

9、line-height 如何继承

写具体数值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该比例（比较好理解）
写百分比，如200%，则继承计算出来的值（考点）

10、rem是什么

rem是一个长度单位

px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局

11、响应式布局的常用方案

media-query：根据不同的屏幕宽度设置根元素font-size
rem：基于根元素的相对单位

CSS&HTML面试题重点总结

一、HTML面试题

CSS面试题