Html+Css面试题及答案

1.如何实现一段文本单行居中，多行左对齐？

(1)可以使用弹性布局
.box{ display: flex; flex-direction:row; justify-content: center;}

2.::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

在 CSS3 中 : 表示伪类， :: 表示伪元素
想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

3.常见兼容性问题？

(1)png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。
(2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
(3)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
(4)上下margin重合问题，ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合
(5)浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

4.简述一下 src 与 href 的区别?

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系

5.标签上title与alt属性的区别?

title：为该属性提供信息，alt：当图片不显示时，用文字代替

6.BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题，BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

7.display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。

8.什么是渐进增强和优雅降级？

(1)渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
(2)优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

9.什么是FOUC？你如何来避免FOUC？

由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏用link加载css文件，放在head标签里面

10.你对css hack有哪些了解?

(1)CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的
(2)浏览器识别字符标准对应表
1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2.\9 ：所有IE浏览器都支持
3._和- ：仅IE6支持
4.* ：IE6、E7支持
5.\0 ：IE8、IE9支持，opera部分支持
6.\9\0 ：IE8部分支持、IE9支持
7.\0\9 ：IE8、IE9支持

11.说一下怎么减少页面加载时间的方法?

(1)压缩css、js文件
(2)合并js、css文件，减少http请求
(3)外部js、css文件放在最底下
(4)减少dom操作，尽可能用变量替代不必要的dom操作

12.说一下重绘和回流?

1、重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

2、回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

3、区别：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

13.浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)