1.css盒模型
内容(content)、填充(padding)、边框(border)、边界(margin)
2.介绍一下Box-sizing的几个属性值，默认是哪个？
Content-box（默认）：border和padding不计入在width之内
Padding-box, padding计入在width之内
Border-box， border和padding计入在width之内，其实就是怪异模式（IE下呈现的是怪异模式，其他都是标准模式）
3.水平垂直居中的几种方法？
html代码
<body>
<div class="box"></div>
</body>
css代码
公共代码
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
第一种 定位实现
body, html {
position: relative;
}
.box {
width: 200px;
height: 200px;
margin: auto;
background: deeppink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
第二种 定位+负margin
body, html {
position: relative;
}
.box {
width: 200px;
height: 200px;
background: deeppink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*height的一半*/
margin-left: -100px; /*width的一半*/
}
第三种 定位+transform过渡实现
body, html {
position: relative;
}
.box {
width: 200px;
height: 200px;
background: deeppink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
第四种 flex布局
body, html {
display: flex;
}
.box {
width: 200px;
height: 200px;
background: deeppink;
align-items: center;
justify-content: center;
margin: auto;
}
4.三列布局的实现？
第一种：
css:
.left {
width: 100px;
height: 500px;
border: 1px solid #ccc;
float: left;
}
.main {
margin: 0 110px;
border: 1px solid red;
}
.right {
width: 100px;
height: 500px;
border: 1px solid pink;
float: right
}
html:
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
第二种：
css:
.left {
width: 100px;
height: 500px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
}
.main {
margin: 0 110px;
height: 500px;
border: 1px solid red;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 500px;
border: 1px solid pink;
}
html:
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
第三种：
css:
.box {
display: flex;
}
.left {
flex-basis: 120px;
height: 500px;
border: 1px solid #ccc;
}
.main {
flex: 1;
border: 1px solid red;
}
.right {
flex-basis: 120px;
height: 500px;
border: 1px solid #ccc;
}
html:
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
5.css选择器的优先级？
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别中后写的会覆盖先写的样式
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
6.css3新增属性有哪些？
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
7.canvas、Svg有什么区别？
Canvas适用场景
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
8.简单讲解一下flex布局，列出flex布局常用属性
flex-direction 决定主轴方向 row/row-reverse/column/column-reverse
flex-wrap 项目排列方式 wrap/nowrap/wrap-reverse
flex-flow 前两者简写形式，默认是 flex-wrap: row nowrap
justify-content flex-start/flex-end/center/space-around/space-between
align-items flex-start/flex-end/center/baseline/stretch
align-content flex-start/flex-end/center/space-between/space-around/stretch
9.什么情况下会产生BFC？
float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
10.Input和textarea的区别？
前者是单行文本框，后者是多行文本框
前者可以设置value初始值，后者无value属性，可以自动换行
11.如何解决margin重叠问题
1. 兄弟元素，margin重叠会取大的值 解决方案：float 或者inline-block
2. 父子元素，子元素设置了margin 父元素也会有margin 解决方案： 父元素设置overflow: hidden 或者 padding 或者 border/子元素设置position: absolute (不建议)
12.什么是回流？什么是重绘？
改变元素的宽高，布局 显示隐藏等都会导致回流
改变元素颜色 字体 背景色会导致重绘
重绘不一定会导致回流，回流一定引起重绘
13.onLoad 和 onDomContentLoaded 区别？
1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
14.preFetch和preload区别?
<link rel='dns-prefetch' /> 预解析cnd地址的dns
<link rel='prefetch' /> 浏览器在空闲的时候缓存js, 等到用的时候直接从缓存里找
<link rel='preload' /> 遇到这个会下载js, 但是不会执行，等遇到script用这个文件引用的时候就会立即执行
15.async和defer的区别?
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。