HTML+CSS前端面试题（高频）

1.什么是标准文档流
（1）标准文档流是指元素在排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式，当前面的内容发生变化，后面的内容也会随着发生变化；
（2）HTML就是一种标准文档流文件
（3）简单的来说就是各种布局属性在html中所显示的效果，如display（行内元素与块级元素*非常重要*）、float、position

2.什么是BFC（块级格式化上下文）
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

3.什么是z-index，在position为什么值时可以触发？
（1）z-index : 指的是一个元素在当前文档页面定位时重叠层显示的层级等级，默认为0 ，数值不限，越大显示层级越高
（2）触发机制：当position的值设置为absolute、relative和fixed时才能触发

4.HTML5的缓存方式
1.localstorege本地缓存
2.sessionStorege会话缓存
3.离线缓存机制
4.web  SQL
5.IndexDB（索引数据库）

5.浮动元素引起的问题，以及解决方法（如何清除浮动）
-1.问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

-2.清除浮动：
（1）给父元素设置高度
（2）给父元素设置overflow：hidden（不能和position配合使用）
（3）浮动外部元素
（4）额外标签法<div style="clear:both;"></div>
（5）万能清除法
父元素定义伪类after
.box:after{display:block; clear:both; content:"";}

6.PC端常用的布局方法。
-1、利用float+overflow实现
    左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应
-2、flex布局
    通过flex相关的属性进行适配性的调整布局
-3、Table表格布局
-4、float+margin实现三列布局
-5、定位absolute实现中间自适应
-6、Grid网格布局
-7、圣杯布局

7.HTML5新增新特性
1.语义标签
2.增强型表单
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket