前端笔试、面试常考题/盒模型/块级元素和行内元素

简述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保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信