一、sessionStorage、localStorage、cookie的区别
- cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的HTTP请求中携带（即使不需要），会在浏览器和服务端之间来回传递。
- sessionStorage和localStorage不会自动将数据发送给服务器。仅在本地保存。
- 存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有大小限制，但比cookie大得多，可以达到5M或更大。
- 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除；sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时效前一直有效，即使窗口和浏览器关闭。
二、如下代码在浏览器中如何显示？
CSS:
div {
width:200px;
height:200px;
background-color:red;
}
HTML:
<div></div>
<div></div>
<div></div>
答：显示的是宽200px，高600px的矩形
将div换成span呢？
答：不显示，因为内联元素无法设置宽高
怎样让这三个div在同一行显示并消除空隙？
解决方法：
- 设置display:inline-block，并将父元素的font-size设置为0，自身的font-size设置成不为0的值。如果有字就看不见了。
2.display:inline-block，float:left。
三、HTML中有哪些行内元素，哪些块级元素，哪些空元素，以及这三类元素的区别
- 行内元素：a，b，span，img，input，select，strong
- 块级元素：div，ul，ol，li，dl，dt，dd，h系列，p
- 空元素：br，hr，img，input，link，meta
- 行内元素不可设置宽高，不独占一行
- 块级元素可以设置宽高，独占一行
四、CSS的display属性
属性值有：none|inline|inline-block|block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row
|table-column-group|table-column|table-cell|table-caption|inhert
- none：元素不会显示，而且该元素的显示空间不会保留
- inline：display的默认属性。将元素显示为内联元素，元素前后没有换行符。一旦元素的属性设置成inline，属性的宽高将会失效
- block：将元素设置成块级元素，元素前后有换行符。设置成block后，元素可以设置宽高，元素独占一行
- inline-block：行内块级元素，融合了inline和block的特性。即使是内联元素也可以设置宽高。
- 其他不常用的属性：
list-item：将元素作为列表显示
run-in：根据上下文作为块级或内联元素显示
table：元素作为块级表格来显示（类似<table>），表格前后带有换行符
inline-table：元素作为内联表格来显示，前后无换行符
table-row-group：元素作为一个或多个行的分组来显示，类似于（<tbody>）。
table-header-group：元素作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group：元素作为一个或多个行的分组来显示（类似<tfoot>)
table-row：作为一个表格行显示（类似<tr>）
table-column-group：作为一个或多个列的分组来显示（类似<colgroup>）
table-column：作为一个单元格来显示（类似<col>）
table-cell：作为一个表格单元格来显示（类似<td><th>）
table-caption：作为一个表格标题来显示（类似<caption>）
inhert：从父元素继承display属性的值
五、position属性
属性值有：static|relative|absolute|fixed|sticky
- static：默认值，即没有定位，不受top，bottom，left，right的影响
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.d2 {
background-color: yellow;
position: static;
left:10px;
}
</style>
- relative：元素相对于自身的原位置便宜某个距离，但是原来的空间依旧保留，表现为空白（left和right同时设置的时候，遵循left的值）
.d2 {
background-color: yellow;
position: relative;
left: -10px;
right: -10px;
}
- absolute：原来的元素空间被删除，新生成一个块级框，与页面内容相对静止，如果页面向下滑动，该块级框会跟随向上运动
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.d2 {
background-color: yellow;
position: absolute;
top: 20px;
left: 20px;
}
</style>
第二个div的position：absolute时，第二个div元素相对于浏览器窗口偏移，原位置被删除，所以第三个div在原来第二个div的位置。
- fixed：原来的元素空间被删除，新生成的一个块级框固定在页面的一个位置，即使页面下滑，该块级框依旧不改变位置。
<style>
div {
width: 200px;
height: 600px;
background-color: red;
}
.d2 {
height: 200px;
background-color: yellow;
position: fixed;
top: 20px;
left: 20px;
}
</style>
- sticky：跟随页面一起滚动，当超过阈值以后，固定在页面边缘，相当于fixed和absolute的混合
<style>
.d1 {
width: 200px;
height: 200px;
background-color: red;
}
.d2 {
width: 200px;
height: 200px;
background-color: yellow;
position: sticky;
top: 20px;
}
.d3 {
width: 200px;
height: 800px;
background-color: red;
}
</style>
- inherit：继承父元素的position属性
z-index:设置元素之间的叠放顺序，只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序,值大的元素发生重叠时会在值小的元素上面。
六、CSS盒子模型
就是用来装页面上的元素的矩形区域。CSS的盒子模型包括IE盒子模型和标准盒子模型
区别：这两种盒子模型的width（height）的包含范围不同，IE盒子模型的width指content宽度+左右padding+左右border；标准盒子模型的width指content的宽度。
CSS3中引入了box-sizing属性，box-sizing: border-box，表示IE盒子模型，box-sizing:content-box，表示标准盒子模型，box-sizing:padding-box，表示这个属性值的宽度包含了左右padding+content宽度。
七、flex布局
语法篇：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例篇：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
