前端面试秘籍HTML+CSS篇(一)
1 、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么?
| IE | trident 内核 |
| Firefox | gecko 内核 |
| Safari | webkit 内核 |
| Opera | 以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核 |
| Chrome | Blink（也是基于webKit开发的） |
2、简述src与href的区别。
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
<script src ="js/JavaScript.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
所以我们应该将引用的js放在文档结构的底部。另外我们在引用js的时候，最好是将资源包含在自己的项目目录里面。千万不要直接引用第三方资源，尤其是将第三方资源引入在头部。如果资源加载不出来会导致这个页面无响应。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="css/xke.css" rel="stylesheet"/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
@import url("css/xke.css"); //引入css，非并行获取的。不建议使用
3、知道的网页制作会用到的图片格式有哪些吗？
PNG (包括PNG-8、PNG-24)JPG JPGEBMPGIF //动态图，其实就是有无数张静态PNG或者JPG合成的，他的每一帧为一张图片SVG EMF WMF //这些都是矢量图，无限放大而不会失真
| PNG：优点（可保存透明背景的图片），缺点（画质中等） |
| JPG：优点（文件小，利于网络传输），缺点（画质损失） |
| BMP：优点（无损bai压缩，图质最好），缺du点（文件太大，不利于网络zhi传输） |
| GIF：优点（动画存储格式），缺bai点（最多256色，画质差） |
| SVG 矢量图放大不失真 |
注意：WMF EMF这个图片格式浏览器是没有办法直接打开预览的。
4、CSS选择器有哪些？
派生选择器，用HTML标签声明。
id 选择器（用 DOM 的 ID 申明）
类选择器（用一个样式类名申明）
属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用。这个不必知道）
后代选择器（利用空格间隔，比如 div .a{ }）
群组选择器（利用逗号间隔，比如 p,div,#a{ }）
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。（请参知识点9）
5、CSS 中可以通过哪些属性定义 ， 使得一个DOM 元素不显示在浏览器可视范围内？
最基本的:设置 display 属性为 none，或者设置 visibility 属性为 hidde
企业中经常会被问及到的一个问题。
请说明display: none与visbility；hidden的区别是什么？
答: （1）display:none是彻底消失，不在文档流中占位；浏览器也不会解析该元素visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；（2）使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
6、超链接访问过后hover样式就不出现的问题是什么如何解决？
答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变CSS属性的
排列顺序: L-V-H-A（link,visited,hover,active）
7、说说display属性有哪些可以做什么？
display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素
8、哪些css 属性可以继承
可继承：font-size font-family color, ul li dl dd dt;不可继承：border padding margin width height ;
9、css 优先级算法如何计算？
!important > id > class > 标签!important 比 内联优先级高* 优先级就近原则，样式定义最近者为准;* 以最后载入的样式为准;
10、text-align:center 和 line-height 有什么区别？
text-align 是水平对齐，line-height 是行间。11、前端页面由哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js12、行内元素有哪些? 块级元素有哪些?CSS的盒模型有哪些?
块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding
13、px和em 的区别
px 和 em 都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em 的值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em