1、清除浮动的几种方式？
为什么要清除浮动？ float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。
给父级添加height; 在结尾处添加一个空的div，并设置属性 clear:both; 父级设置overflow：hidden； 给父级定义 ::after zoom
2、display:none 和 overflow:hidden的区别？
display：none；
隐藏后元素不占任何空间； 有株连性，父级设置none，子集全部隐藏不可显示； 会引起页面的重排和重绘，影响性能。
overflow：hidden
隐藏后元素空间依然存在 伪株连性，父级设置hidden，子集默认不显示，但是可以通过 visibility：visible 显示出来； 不会引起重排和重绘。
3、什么是文档流？
将窗体分为一行一行的，并在每行中从左到右依次排放元素，称之为文档流或者普通流。
什么是脱离文档流？
脱离文档流，那么文档原本占据文档流的位置会被后面的元素所填补。
4、圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的要点： margin-left: -100%; 如果margin-left：-100%,如果超过了自身的宽度，那么他就会跑到上一层位置。
5、base64有什么好处？什么时候用base64？
一般移动端的大的图片使用base64，或者图片体积大的话使用。 如果图片比较小的话，那就没有必要，因为base64编码之后字符串会比图片还要大的话就没有必要。只有图片几百k的时候可以选择。 优点：能够减小 大图片的尺寸，同时减少http请求数量，因为http请求是很消耗服务器资源的。
缺点：消耗cpu进行编码。
6、标准盒模型和怪异盒模型？
标准盒模型： 盒子总宽度= width + padding + border + margin 怪异盒模型： 盒子总宽度 = width + margin； 其中content = width + padding + border
可以通过box-sizing指定盒模型方式：
box-sizing：border-box； // 改为怪异盒模型
box-sizing: content-box; // 改为正常盒模型
加分项：如果在移动端，标准盒模型不适合做开发，最好使用border-box改变盒模型。 因为移动端，宽度是用百分比，不能通过像素px精准控制。如果是content-box标准盒模型控制，则并排的div要包含border和padding，原来的盒模型就不适合了。
7、什么是BFC?
BFC: 块级格式化上下文。 一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式是不会影响到外面的元素的。
形成BFC的条件？
满足下面任一条件的元素，会触发为 BFC 。 浮动元素 float除了none以外的值 绝对定位和固定定位 position（absolute，fixed） display 为以下其中之一的值 inline-blocks，table-cells，table-captions overflow: 除了visible以外的值
BFC的作用？
阻止边距折叠 包含内部元素的浮动 可以阻止元素被浮动元素覆盖
8、无样式内容闪烁？
页面加载是自上而下的加载，越往前放置的会提前加载。
如果使用@import方法对css进行导入，会导致页面出现一些奇怪现象： 以无样式显示页面内容的瞬间闪烁，这样称之为文档样式短暂失效，简称FOUC。 导致的原因： .使用@import引入css .将样式表放到页面底部
解决办法：
不使用@import引入css
将样式表放置到头部head中
9、css优化，提高性能的方式？
css优化： 1、合并css文件。 单个css文件比多个css文件加载速度要快。 2、减少css嵌套。 3、建立公共样式，把相同样式提取出来作为公共样式 4、减少通配符的使用，因为*是要查询所有的标签，浪费性能 5、不用@import引入css 6、css压缩
10、js阻塞特性？
所有的浏览器在下载js的时候，会阻止一切其他活动，比如其他资源的下载（例如 图片，css），内容的呈现等等。直到js下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
为什么要出现js阻塞？
浏览器为了防止js修改dom树，需要重新构建dom树的情况，所以要阻塞其他资源的下载和呈现。