一、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在同一行显示并消除空隙？

解决方法：

1. 设置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>

static.png

• relative：元素相对于自身的原位置便宜某个距离，但是原来的空间依旧保留，表现为空白（left和right同时设置的时候，遵循left的值）

.d2 {
        background-color: yellow;
        position: relative;
        left: -10px;
        right: -10px;
    }

relative.png

• absolute：原来的元素空间被删除，新生成一个块级框，与页面内容相对静止，如果页面向下滑动，该块级框会跟随向上运动

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .d2 {
        background-color: yellow;
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

absolute.png

第二个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>

fixed.png

• 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>

滚动之前： sticky.png 超过阈值以后： sticky.png

• 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