1、简述!DOCTYPE的作用？
<!DOCTYPE> 决定浏览器渲染方式；
帮助浏览器正确地显示网页
文档类型声明（简称为 "DTD"），告诉浏览器这个文件的类型，让浏览器知道该用哪个规范来解析文档。
声明必须在HTML中的第一行，Doctype 是一条声明它不是一个HTML标签，只起到声明作用。
<!DOCTYPE html>：用HTML5的doctype声明文件包含HTML5标记
2、常见的浏览器及其内核有哪些？
有五大浏览器，分别是：
1、chrome 浏览器 --Google公司
特点 安全、高效、安全
2013年前使用苹果公司的webkit内核，13年后开始使用 webkit 的分支 Blink 内核
内核 webkit,Blink
2、Firefox 浏览器 --Mozilla公司
特点 非盈利、Gecko项目开源
内核 Gecko
3、safari 浏览器 --苹果公司
特点 移动端占有率高
内核 webkit
4、Opera 浏览器 --Opera Sftware ASA公司
特点 自主研发presto内核
使用自研的 Presto 内核 2016年被收购后改用 webkit 内核，后跟随谷歌改用 Blink 内核
内核 presto、webkit -> blink
5、 IE 浏览器 --Microsoft微软公司
特点 依托强大的Windows系统的市场占有率捆绑安装不可卸载
内核 trident
1）使用trident内核的IE，及一些国产浏览器
2）使用Gecko内核的Mozilla Firefox
3）使用blink内核的chrome、opera
4）使用webkit内核的Safari、chrome，及一些国产的双核浏览器
3、常见的块级标签和行内标签分别有哪些？
块级标签
h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr
行内标签
span、i、em、b、strong、sub、sup、del
4、b 和 strong （i 和 em ）标签的区别？
b 和 strong
默认情况下它们起的均是加粗字体的作用
二者所不同的是，<b>标签是一个实体标签，用来呈现文字的粗体效果
而<strong>标签是一个语义标签，它的作用是加强字符的语义，用来表示重要文本，在文本中呈现粗体效果
i 和 em
默认情况下它们起的均是倾斜字体的作用
二者所不同的是，<i>标签是一个实体标签，文本呈现为斜体，没有特殊语义
而<em>标签是一个语义标签，它的作用是用来呈现被强调的文本，在文本中呈现斜体效果
5、谈谈对语义化的理解？
即根据页面内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有利于SEO，便于团队开发和维护。如：标题用h1~h6,段落使用p标签
语义化的好处：
1）在没有css的情况下，页面也能呈现出较好的内容结构；
2）语义化使代码更具有可读性，便于团队开发和维护；
3）语义化有利于用户体验
4）语义化有利于SEO搜索引擎优化
6、如何合并表格单元格？
表格合并
跨行合并 rowspan
跨列合并 colspan
7、thead、tbody、tfoot 有什么作用？
thead、tbody、tfoot标签结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
标签默认不会影响表格布局
8、常见表格元素有哪些？
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
td（标准单元格）|th（表头单元格）元素 定义表格内的表头单元格。
9、引入css的方式有几种?
引入的三种方式：
行内样式/内部样式/外部样式
行内样式
<p style="color:red;font-size:20px;">内容</p>
内部样式
<style type="text/css">
@import "css.css" /*或者： @import url(css.css)*/
或者
color：red；
</style>
外部样式
<link href="css.css" rel="stylesheet" type="text/css">
10、单行文本水平垂直居中如何实现？
先设置高度
height:10px;
行高等于高度
line-height:10px;
文本居中
text-align:center;
11、选择器优先级如何计算？
一般来说选择器的权值越大，优先级越高
基本选择器的权值由小到大分别为：
通配符选择器（0）<标签选择器（1）<class选择器（10）<id选择器（100）<行间样式（1000）
如果选择器的权值相同，后写的内容会覆盖先写的内容；
行间样式拥有最高优先级但是高不过!important
background-color: lightcoral !important;
12、哪些CSS属性是可以继承的？
子标签可以继承父标签的样式
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
13、简述css盒模型？
盒模型又称框模型（Box Model）在页面布局中，将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。css盒模型的本质是一个盒子，封装周围的HTML元素
盒模型由：
元素的内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)要素组成
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
14、如何使用border实现小三角?
三角形
.box1 {
width: 0;
height: 0;
border: 40px solid;
border-color: #f30 transparent;
border-bottom: 0;
/* 清除ie6下默认高度和最小高度问题 */
overflow: hidden;
font-size: 0;
line-height: 0;
}
空三角
.box2 {
width: 1em;
height: 1em;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(135deg);
}
<div class="box1"></div>
<div class="box2"></div>
15、margin外边距常见问题及处理方法？
（1）父子关系外边距塌陷问题——元素嵌套关系，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现其中较大的外间距的值
原因：父盒和子盒公用一个上外间距的区域
解决方法：
给父元素设置边框或内边距；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距，两个值相同时，取当前值，如果两个值不同，取较大值
原因：上、下两个兄弟关系的盒子共用一个外间距区域
解决方法：
给两个盒子都套一个父盒子，父盒添加overflow属性
--->改变父级的渲染规则有以下四种：
position: absolute/fixed;
display: inline-block;
float: left/right;
overflow: hidden;
16、CSS选择器有哪些？优先级算法如何计算？内联和important哪个优先级高？
基本选择器：通配符选择器、标签选择器、类选择器、id选择器
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器：群组选择器、后代选择器、父子选择器、交集选择器、伪类选择器
div,p div p div>p div.box1
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
选择器的权值越大，优先级越高，选择器中的权值使用加法计算，如果权值相同后写的内容覆盖先写的内容
行间样式的优先级高于id选择器的优先级
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式；
在样式中定义!important ，优先级高于行间样式
17、行内元素和块级元素的特性，具体区别是什么？行内元素有哪些？块级元素有哪些？
行内元素：宽度自适应；高度自适应；默认并列在一行显示；具有部分盒模型特征（默认没有宽高[css定义宽高时无效]，有横向间距margin-right、margin-left和留白padding-left、padding-right，没有纵向margin-top、margin-bottom和留白padding- top、padding-bottom，边框保留）；换行会被解析成空格
行内元素: a b strong em i del sup sub span
块级元素：宽度100%；高度自适应；默认独立成行；具有盒模型特征（默认可以设置盒子的宽、高、外间距、内填充、边框）
块级元素：div p h1 h2 h3 h4 h5 h6 form ul ol li dl dt dd
18、margin外间距常见问题及处理方法
（1）父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
解决方法：
给父元素设置边框或内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
解决方法： 给两个盒子都套一个父盒子，父盒添加overflow属性
触发bfc，改变父级渲染规则的方法
19、浮动产生的问题，清浮动的方案？
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，影响与父元素同级的后续元素的正常布局
1）为浮动元素的父级盒加固定的高度——不够灵活
2）为浮动元素的父级盒加浮动——会产生新的浮动问题
3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
5）推荐方法：
给浮动元素的父元素添加.clearfix，(不会在结构上产生冗余代码，可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }
20、简述BFC规则，及解决的问题？
1）什么是BFC？
BFC(Block Formatting Context)是web页面的可视化CSS 视觉渲染的一部分，是页面中的一个独立的渲染区域。用于决定块盒子的布局及浮动元素与其他元素交互的一个区域，可以改变父级的渲染规则。
2）BFC规则：
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
3）BFC解决的问题
解决外边距折叠问题
自适应两栏或三栏布局
防止字体环绕
清除浮动
21、如何让盒子水平垂直居中
1）margin负间距
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半
2）margin: auto；实现绝对定位元素的居中
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;
22、等高布局、圣杯布局、双飞翼布局的实现原理？
等高布局：
方法一：利用内外间距相抵消，注意为父元素设置“overflow: hidden;”
方法二：利用内容撑开父元素的特点，给每一列添加相对应的容器，进行相互嵌套，并在每个容器中设置背景色
方法三：利用边框模拟背景，实现等高列显示效果
圣杯布局：
圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者的实现原理有所不同。圣杯布局的实现思路：
1）HTML结构中，先主体内容后侧边栏
2）两侧固定宽度，中间内容宽度设置100%;
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）将中间露出来；
6）分别为左侧边和右侧边设置position:relative; 然后还原左侧边和右侧边
双飞翼布局：
1）HTML结构中--先主体后侧边栏；
2）两侧固定宽度，中间宽度100%；
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）在主体内容的子盒上设置margin值，将中间内容露出来
23、简述精灵图(css sprites)的原理及优缺点，如何使用
css sprites——精灵技术、雪碧技术，通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上，通过background-image、background-repeat属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。
好处：
1）减少网页的http请求，从而大大的提高页面的性能
2）图片命名上的困扰
3）更换风格方便
缺点：
1）必须要限定容器大小符合背景图元素位置 ，需要计算
2）维护的时候比较麻烦—图片修改麻烦
步骤：
1）制作一张具有多个状态的拼合图片
2）给要显示背景的盒一个固定的尺寸，以背景方式加载让其局部显示
3）通过背景图定位控制不同的显示状态
24、你能想出几种方法让元素在页面中消失？
1）display: none; 元素的隐藏，将整个元素隐藏，不占用任何空间
2）visibility: hidden; 元素内容不可见，只隐藏内容，占位空间仍然保留
3）通过position属性设置元素位置，让其消失
4）overflow属性实现，将要隐藏元素移出父元素的范围
5）opacity属性，实现元素的不可见
25、css3新增了哪些选择器
属性选择器：
element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素
结构性伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素 element:nth-of-type(n){ } 一组元素中选择特定类型的元素
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素
26、如何处理HTML5新标签的浏览器兼容问题？
方案一：使用javascript新增元素的方法解决
document.createElement(“header”);
document.createElement(“footer”);
…
由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。
header,footer{ display:block;}
方案二：使用封装好的插件html5shiv.js解决兼容性问题。
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
27、说说常见浏览器兼容问题
1）ie8中图片边框问题：
解决方案:img{ border:none; }
2) ie8中背景复合属性写法问题：
在标准浏览器中能正常显示背景图片，但在ie8中图片显示异常。
.bg{ background:url(“./images/bg.jpg”)no-repeat center; }
解决方案:
.bg{ background:url(“./images/bg.jpg”) no-repeat center; }
3) 在 IE6 及更早浏览器中定义小高度的容器问题？
解决方案：#test{ overflow:hidden; height:0px; font-size:0; line-height:0; }
4) IE6 及更早浏览器浮动时产生双倍边距的 BUG问题 ？
解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可
#test{ float:left; _display:inline; }
5) IE7 下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父标签也设置相对定位 position:relative;
6)块转内联块 ie7- 不在一行显示问题
解决方案：div { display:inline-block; *display:inline; *zoom:1; }
7) IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
解决方案：给<li>加vertical-align:middle/top/bottom
li{ vertical-align:top; }
28、HTML5中新增的表单元素和表单属性有哪些？
新增表单标签--input类型
1）url类型：包含访问协议的URL地址的输入域
2）email类型：包含e-mail地址的输入域
3）search类型：用于检索关键字的输入域
4）tel类型：用于输入电话号码的输入域
5）number类型：用于包含数值的输入域
6）range类型：生成一个数字滑动条
7）color类型：生成一个颜色选择器
8）date类型：日期选择器
9）datetime类型：输入日期时间
10）datetime-local类型：日期和时间选择器
11）month类型：月选择器
12）time类型：时间选择器
13）week类型：周选择器
14）datalist类型：选项列表，与input元素配合使用
新增表单属性：
1）min、max、step属性：输入域中所允许的最小值、最大值、步长
2）placeholder属性：为输入域设置提示信息
3）list属性：通过input元素和datalist元素实现可选的下拉列表
4）autocomplete属性：是否启用自动完成功能
5）autofocus属性：自动获取焦点
6）form属性：定义表单元素所属的表单区域
7）required属性：提交表单时，表单元素不能为空
8）pattern属性：对用户输入内容做验证
9）multiple属性：选择多个值
29、简述rem布局原理
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px，一个div的width为1rem，则div的width大小为100px。
rem布局实现步骤
1）设置页面的viewport
2）动态计算并设置html的fontsize值
3）按照pc端布局方式正常布局，把px单位换算成rem
30、什么是less?less有什么好处？
拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别。
好处：
结构清晰，结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码，可以方便地应用到老项目中。
31、常见的移动端布局解决方案有哪些？原理如何？
1）流式布局
垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
优先：可以很好解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2）rem布局
rem——相对于根元素的font-size属性值的单位，css3新增单位
未经调整的浏览器的默认字号为16像素，1rem = 16px
rem布局的实现：
设置页面的viewport；
动态计算并设置html的font-size值;
按照PC端布局方式正常布局，将px单位换算成rem单位
3）vw适配
vw——viewport's width css3规范中视口单位
vh——viewport's height
vw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%
4）flexible.js
将设备划分成10份，确定好html标签的font-size属性值。假设有750px的设计稿，则html{ font-size: 75px; }，页面中元素的rem值 = 元素的px值/75
5）响应式布局
一站适配所有终端。通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果
6）grid网格布局
将页面划分成相应的表格进行布局
32、<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">如何解释这句话呢？
viewport 虚拟窗口
width 虚拟窗口的宽度
device-width设备宽度
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户手动缩放窗口
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，最大缩放比1倍，最小缩放比1倍，同时不允许用户手动缩放
