面试技巧：
准备要充分
知识要系统
沟通要简要 回答关键点
内心要诚实 不懂就说这个我真的不了解。
态度要谦虚
回答要灵活 话别说太死，
面试问题点
页面布局
CSS盒模型 css
DOM事件
HTTP协议
面向对象
原型链 js
通信 跨域和前后端通信
安全 CHRF XSS
算法
CSS布局
样式初始化
reset.css
浏览器对
语义化标签
优点：
1、提升可访问性
2、SEO
3、结构清晰，利于维护
H标签
浮动
清除浮动
1、设置父元素高度 太麻烦
2、clear:both; 浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
3、.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4、overflow：hidden
5、隔墙法
兼容性好
延伸：你知道哪些清除浮动的方案？每种方案的有什么优缺点?
定位
可使用性比较差 快捷绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
felxbox
比较完美的一个 felxbox的缺点就是不能兼容IE8及以下浏览器。
table
兼容性好 高度超出会同时增高 网格布局也是新出的一种布局方式，
如果你答出这种方式，也就证明了你的实力，证明你对技术热点是有追求的，也说明你有很强的学习能力。
gird
新技术
各自的优缺点
高度
兼容性问题
BFC
https://www.cnblogs.com/libin-1/p/7098468.html
块级格式化上下文
解决问题：
解决文字环绕
清除浮动
外边距折叠
https://blog.csdn.net/mrchengzp/article/details/78573208
<!DOCTYPE html>
<html lang="en">
<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>
html * {
padding: 0;
margin: 0;
}
.layout div {
height: 100px;
}
.layout {
margin-top: 10px;
}
</style>
</head>
<body>
<section class='layout float'>
<style>
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
width: 300px;
float: right;
background: green;
}
.layout.float .center {
overflow: auto;
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
</div>
</article>
</section>
<section class="layout position">
<style>
.layout.position .left-center-right {
display: none;
position: relative;
}
.layout.position .left-center-right>div {
position: absolute;
}
.layout.position .left {
left: 0px;
background: red;
width: 300px;
}
.layout.position .center {
left: 300px;
right: 300px;
width: auto;
background: yellow;
}
.layout.position .right {
right: 0;
width: 300px;
background: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>定位解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout flex">
<style>
.layout.flex .left-center-right {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex: 1;
background: yellow;
}
.layout.flex .right {
width: 300px;
background: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style>
.layout.table .left-center-right {
display: table;
width: 100%;
}
.layout.table div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
width: 300px;
background: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table</h1>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout gird">
<style>
.layout.gird .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.gird .left {
background: red;
}
.layout.gird .center {
background: yellow;
}
.layout.gird .right {
background: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局</h1>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>