前端笔试、面试常考题/盒模型/块级元素和行内元素
简述CSS的盒模型
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。
内容（CONTENT）就是盒子里装的东西；
填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；
边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
块级元素和行内元素
① 块级元素（block level）
依次竖直排列，不会排在同一行中。这类元素称为“块级元素” ，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table② 行内元素（inline）
对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”。
a abbr acronym b br cite code dfn em font i img input kbd - 定义键盘文本
label - 表格标签
small - 小字体文本
span - 常用内联容器，定义文本内区块 strike - 中划线
strong - 粗体强调
sub - 下标 sup - 上标
textarea - 多行文本输入框
u - 下划线Cookie, LocalStorage 与 SessionStorage异同
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 可设置失效时间，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |