移动Web面试考题：
一.前端页面有哪三层构成，分别是什么？作用是什么？
1.结构层：由HTML标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题
2.表示层：由css负责创建，解决了页面“如何显示内容”的问题。
3.行为层：由脚本（js）负责。解决了页面上“内容应该如何对事件做出反应”的问题。
二.主流的浏览器分别是什么内核？
Trident[ˈtraɪdnt]内核：（国产的绝大部分浏览器）IE，360，搜狗
Gecko[ˈɡekoʊ]内核：火狐
Presto[ˈprestoʊ]内核：Opera7[ˈɑːprə]
及以上（欧朋）
Webkit内核：（国产大部分双核浏览器其中一核）Safari[səˈfɑːri]
（苹果），Chrome[kroʊm]
三.如何居中一个浮动元素？
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
<style type="text/css">
.p{
position:relative;
left:50%;
float:left;
}
.c{
position:relative;
float:left;
right:50%;
}
</style>
</head>
<body>
<div class="p">
<h1 class="c">Test Float Element Center</h1>
</div>
</body>
四.行内元素有哪些？块级元素有哪些？空元素（void）有哪些？
1.行内元素：a,b,span,img,input,strong,label,button,seletct,textarea,em
2.块级元素：div,ul(无序列表),ol(有序列表),dl(自定义列表),li,p,h1-h6,blockquote(块引用)
3.空元素(void): 既没有内容的HTML元素。br(换行),hr(水平分割线),meta,link,input,img
五.BFC（Block Formatting Context，块级格式化上下文）
1.是什么：决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用，简而言之，它就是一个特殊的块，内部元素和外部元素不会互相影响，BFC盒子在垂直方向上一个接一个的放置，垂直方向上也会发生外边距重叠。
2.应用场景：自适应布局(BFC不与float box重叠)、清除浮动(计算BFC高度时，内部的浮动元素也被计算在内)、防止外边距重叠。
3.如何触发BFC：float属性(不为none)、overflow属性(不为visible)、position属性(absolute,fixed)、display属性(inline-block,table-cell,table-caption,flex,inline-flex)。
六.CSS选择器的优先级:
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承
七.初始化css样式的意义：
为什么要初始化css样式：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异
八.HTML5新特性:
1.语义化标签：header nav section acticle aside footer
2.多媒体标签：video audio
3.input类型：number search email tel date file time url
4.本地离线缓存：localStorage 长期存储数据，改变浏览器数据不会丢失
sessionStorage 浏览器数据关闭数据丢失
5.自定义属性：data-
6.画布： Canvas
7.webscoket 双向通信协议
九.CSS3新特性：
1.圆角：boder-radius
2.盒子模型：box-sizing
3.阴影：box-shadow 盒子阴影 text-shadow 文字阴影
4.过渡：transition
5.2D转换：transfrom translate(平移) scale(缩放) skew(斜切) rotate(旋转) transform-origin 控制转换中心点
6.3D转换：perspective(透视距) transform-style(3D控件效果)
7.渐变：linear-gradient radial-gradient
8.弹性布局：flex
9.媒体查询：@media screen and () {...}
10.边框图片：border-image
11.自定义动画：@keyframes animation
12.颜色 新增：RGBA HSLA模式
13.背景：background-size background-origin background-clip
十.对HTML语义化的理解：
1.用正确的标签做正确的事情
2.HTML语义化让页面的内容结构化，结构更加清晰，便于对浏览器、搜索引擎解析
3.即使在没有样式css情况下也以一种文档格式显示，并且是易于阅读的
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
5.使阅读源代码的人更容易将网站分块，便于阅读维护理解
十一.css的盒子模型：
有两种：IE盒子模型 W3C盒子模型
盒模型：内容(content) 填充(padding) 边界(margin) 边框(border)
区别：IE的content部分把border和padding计算了进去
十二.如何居中div：
1、 水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;}
2、让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; }
3、水平垂直居中一
确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative;
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background-color: pink;
}
4、水平垂直居中二
未知容器的宽高，利用 `transform` 属性
div {
position: absolute;
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
5、水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
background-color: pink;
}
十三.什么是重绘和重排:
1.重排：当DOM元素影响了元素的几何属性(例如宽和高)，浏览器需要重新计算元素的问题，同样其他元素的几何属性也会和位置因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为"重排"。
2.重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕上，该过程称为"重绘"
当我们改变DOM的大小，增加删除都会导致重排，当给DOM元素改变颜色的时候，会导致重绘，重排一定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作
十四.px/em/rem有什么区别:
1.px是固定的像素，一旦设置了就无法因为适应页面大小而改变
2.em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是的定死的，更适用于响应式布局
3.em相对自身font-size，没有则相对于父元素，rem相对于根元素的font-size
十五.rem布局的原理:
1.rem是css的相对单位，rem缩放是相对根元素字体大小
2.rem布局的本质是等比缩放的，一般是基于宽高
3.rem会配合媒体查询(或js动态获取屏幕宽度)来一起使用，来实现屏幕的适配
