前端面试题(HTML和CSS篇)
1. 常用的几种浏览器的内核。并说说你对他们的理解。
| IE | Chrome | FireFox | Safari | Opera |
|---|---|---|---|---|
| Trident 内核 | 以前是Webkit内核，现在是Blink内核 | Gecko内核 | Webkit内核 | 最初是自己的Presto内核，现在使用Blink内核 |
问题2：主要分为两个部分：渲染引擎和js引擎。
（1）渲染引擎：负责获取网页的内容（HTML、XML、图像等）、整理讯息(例如加入css等)，以及计算网页的显示方式，然后会输出到显示器或打印机。浏览器内核的不同对网页的语法解释也不同，因此渲染的效果也会不同。所有的网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核
（2）js引擎规则：解析和执行JavaScript来实现网页的动态效果。
最开始的渲染引擎和js引擎没有区分的很清晰，后来js引擎则越来越独立，内核就倾向于只指渲染引擎。
2.行内元素和块级元素的区别？行内元素的兼容性使用(IE8以下)
行内元素：
会在水平方向排列，不能包含块级元素，设置宽高无效（但是可以设置line-height）,margin上下无效，padding上下无效。
块级元素：
各占据一行，垂直方向排列。从新的一行开始到结束。
兼容性：
display: inline-block; display: inline; zoom:1
3.清除浮动有哪些方式？比较好的方式是哪一种？
（1）父级div定义高度。
（2）结尾处加空div标签，然后加上clear:both。
（3）父级div定义伪类：after和zoom;。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto;
（6）父级div也浮动，需要自定义宽度。
（7）父级div定义display: table。
（8）结尾处加br标签，然后clear:both。
问题2:比较好的是第三种方式，好多网站都采用这种方式。
4.box-sizing常用的属性有哪些？分别有什么作用？
box-sizing:content-box | border-box | inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽高之外绘制元素的内边距和边框(元素默认效果)
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
5.link和@import有什么区别？
（1）link是xhtml标签，除了可以加载css之外还可以做很多事情，比如定义rel链接属性。@import只能加载css。
（2）加载顺序不一样，当一个页面被加载时，link引用的css会被同时加载，而@import引用的css会等页面下载完之后再加载css，因此，有时候我们浏览@import加载的页面时开始有可能会没有样式。
（3）兼容性的区别：@import是css2.1才提出的，所以老的浏览器不支持@import,只在IE5以上才能识别，而link没有这个问题。
（4）使用DOM操作样式的差别：当使用JavaScript去控制DOM去改变样式时只能用link标签。因为@import不是DOM可以控制的。
6.display常用取值？说说它们有什么作用。
block：块级元素，默认宽度为父元素宽度，可以设置宽高，元素设置了这个属性的值之后，独占一行。
inline-block：行内块元素，可以设置宽高，但是不会占据一整行。
inline: 内联元素，不会占据一整行，不能设置宽高，内容的宽度随着文本内容进行自动调整，且尽量占据一行，但是可以设置行高。
none:缺省，元素会被隐藏，不再显示,也不在占据空间。他与visibility：hidden相同之处和区别在于，两者在屏幕阅读器上都是隐藏状态，但是元素使用display:none隐藏之后，也不在占用空间，而visibility：hidden虽然元素也被隐藏，但是仍然会占用页面的空间。并且visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别。
table: 元素会作为块级表格来显示。
inherit： 继承父元素的display属性的值。
7.前端开发中常用的尺寸单位
（1）像素（px）
在前端开发中视口的水平方向垂直方向都是由很多小格组成的，一个小格就是一个像素。不会随窗口大小的改变而改变，px是一个固定单位
（2）百分比（%）
%是前端开发中的一个动态单位，永远是以当前元素的父元素作为参考进行计算
特点：
①.子元素的宽度是以父元素的宽度作为参考计算
②.子元素的高度是以父元素的高度作为参考计算
③.子元素的padding是以父元素的宽度作为参考计算
④.子元素的margin是以父元素的高度作为参考计算
⑤.border宽度不能用百分比来设置
百分比是一个动态单位它会随着父元素到的宽高变化而变化（相对单位）
（3）em
是一个动态单位，相对于元素字体大小的单位。例如：font-size:12px,那么1em就是12px
特点：
①.当前元素设置了字体大小，那么就相对于当前元素的字体大小。
②.当前元素没有设置字体大小，那么就相对于第一个设置字体大小的祖先元素的字体大小。
③.当前元素和所有祖先元素都没有设置字体大小，那么就相对于浏览器默认字体大小。
em是一个动态的单位，会随着参考字体大小的变化而变化（相对单位）
（4）rem（root em）
是一个动态单位，永远相对于根元素的字体大小的单位
特点：
①.html元素设置了字体大小，那么就相对于html元素设置的字体大小
②.html元素没有设置字体大小，那么就相对于浏览器默认字体大小
（5）vw（viewport width）和vh（viewport height）
是一个动态单位，是一个相对于网页视口的单位
特点：
系统会将视口划分为100份，1vw就是占用视口宽度的1%，1vh就是占用视口高度的1%，永远都是以视口作为参考
是一个动态的单位，会随着视口的变化而变化（相对单位）
px vw rem之间的单位换算
假设我们屏幕的宽度是1920px。那么：
100vw=1920px
1vw=19.2px
我们想要:1rem=100px,那么：
100px = 100vw/19.2 = 1rem
因此：1rem=5.208vw.
所以我们只需要给html的根元素设置：
font-size:5.208vw即可
8. CSS选择器有哪些？哪些属性可以继承？
css选择器：类选择器、标签选择器、ID选择器、后代选择器（派生选择器）、群组选择器
可以继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器
9.绝对定位和相对定位的区别
①.参照物不同。
绝对定位的参照物是包含块（父级），
相对定位的参照物是元素自己本身的默认位置。
②.绝对定位将对象从文档流中脱离出来，因此不占据空间，
相对定位，不破坏正常的文档流顺序，无论是否进行移动，元素仍占据空间。
10. Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
(1).<Doctype> 声明位于文档的最前面，处于<html>标签之前。告诉浏览器以何种模式来渲染文档。
(2).严格模式也称标准模式，浏览器按W3C标准解析执行代码；
混杂模式也称怪异模式，是浏览器按照自己的方式解析执行代码，因为不同的浏览器有不同的解析方式，所以称为怪异模式
(3).浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明（文档类型定义）直接相关，DTD声明定义了标准文档的类型（标准模式解析），如果忽略DTD声明，将使网页进入怪异模式。Doctype不存在或形式不正确会导致文档以怪异模式呈现。在HTML5中没有DTD，因此，没有标准模式和怪异模式的区别，HTML5相对宽松的语法，实现时，已经尽可能的实现了向后兼容。
11.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
(1).新增元素
- 内容元素：article、header、footer、section、nav、aside
- 表单元素：calendar、date、time、number、
- 多媒体：video、audio
- 控件元素：websocket、webwork
- 绘画：canvas
- 存储：localStorage、sessionStorage
(2).移除元素
big,font,basefont,s,tt,u,frame.iframe
(3).兼容性问题如何处理
①.IE6/7/8支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签的默认样式；
②.使用html5 shim框架:
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<![endif]-->
(4).HTML和HTML5的区别
①.在文档类型声明上不同：
HTML是很长的一段代码，而HTML5却只有简单的声明，便于记忆。
②.在结构语义上不同：
HTML没有体现语义化的标签，通常都是这样来命名的<div id=“header”></div>,这样来表示网站的头部。
HTML5在语义上有更大的优势。提供了一些新的标签，比如：<header><article><foooter>等，这些新的标签，语义更加明确。
12简述一下你对HTML语义化的理解？
(1).HTML语义化让页面的内容结构化，更清晰，便于浏览器、搜索引擎的解析。
(2).即使在没有样式css的情况下也能以一种文档格式显示，并且是容易阅读的
(3).搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO优化。
(4)使阅读源代码更容易将网站分块，便于阅读、理解和维护。
