1.如何理解html语义化
html语义化是指从代码上展示页面的结构，而不是从最终视觉上来表现结构。
1.2 表现形式
html5新标签:
header-页眉、footer-页脚、aside-附属信息、nav-导航链接、section、article，
caption-表格标题、thead-表头、tbody-表格内容、tfoot-表尾
1.3 作用
有利于构建良好的html架构，有利于搜索引擎建立索引和抓取
页面结构清晰，有利于代码的维护和管理
有利于不同设备(盲人阅读器、屏幕阅读器)的解析
2.px，em，rem区别
px 表示绝对尺寸，这里并非真正的绝对，实际上就是css中定义的像素 em 相对尺寸（在自身没有设置font-size为绝对尺寸的情况下），相对父元素的字体大小而言的 rem 相对尺寸，相对html根元素的字体大小而言的，css3新增元素
3.盒子模型
1.IE盒子模型 宽度=内容宽度+padding 2+border 2
3.w3c盒子模型 宽度=内容宽度 通过box-sizing切换，默认为content-box(w3c盒子模型)，border-box时为IE盒子模型
4.BFC
块级格式化上下文，让BFC里面的元素与外面元素隔离，使里外元素的定位不会相互影响。 触发条件:
根元素
overflow不为visible
float
position:absolute或fixed
display:inline-block或table 应用: 防止垂直方向margin重叠 不和浮动元素重叠 清除元素内部浮动
5.doctype作用，严格模式和混合模式的区别
声明位于文档的最前面，在html之前显示。用于告诉浏览器的解析器，用什么文档类型规范来解析文档。严格模式默认用浏览器支持的最高版本解析，混合模式以宽松的向后兼容的方式解析，doctype不存在或格式不正确时会让文档以混杂模式呈现
6.水平垂直居中的方法（盒子中的内容）
//方法一,flex+父
display:flex;
justify-content:center;
align-items:center;
//方法二，table-cell+父
display: table-cell;
vertical-align: middle;
text-align: center;
//方法三:适用于已知宽高且父元素定位不为static +子
postion:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
//方法四+子
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//方法五:适用于行内元素+父
display:inline-block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
//方法六:水平居中
margin:0 auto;//块级元素+子
text-align:center;//行内元素+父
7.回流和重绘区别
回流：当渲染树中元素尺寸、结构或者某些属性发生变化时，浏览器重新渲染部分或全部页面的情况叫回流。下列元素改变引发回流:
getBoundingClientRect()
scrollTo()
scrollIntoView()或者scrollIntoViewIfneeded
clientTop、clientLeft、clientWidth、clientHeight
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
getComputedStyle() 重绘：当页面中元素样式变化不会改变它在文档流中的位置时，即不会使元素的几何属性发生变化，浏览器会将新样式赋给它并重新绘制页面(比如color、backgroundColor) 频繁回流和重绘会引起性能问题 避免方法:
1.减少table布局使用
2.减少css表达式的使用(如calc())
3.减少DOM操作，用documentFragment代替
4.将元素设为display:none;操作结束后把它显示回来，因为display:none不会引发回流重绘
5.避免频繁读取会引发回流重绘的元素，如果需要最好是缓存起来
6.对复杂动画元素使用绝对定位，使它脱离文档流
7.减少使用行内样式
8.如何让Chrome显示小于12px的文本
利用css3的转换属性的缩放函数来实现， 举例：让p标签的文本显示6px；css:font-size:6px;transform:sacle(.5) 如果这个样式只是在谷歌中显示，那要加上浏览器内核前缀webkit
9.iphoneX如何适配
1.问题定位:如何让页面适配iPhoneX的齐刘海，底部的操作区域以及大圆角的问题
2.iphonex虽然和其他手机一样都是一个屏幕，但是内部分为了好几个模块。 正常的网页放到iPhonex里面来的话，头部和底部会出现白框。(iPhonex里面有一个safedArea安全区域，也就是中间的大部分区域，而非安全区域部分是没有网页内容的。处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响)
3.解决方案:
1.给body添加背景色，之前说头部和底部会出现白框，实际上不一定是白色，这个颜色是body的背景色。另外当我们上拉或者下拉内容的时候，显示网页下方的颜色其实也就是body的背景色。
2.在meta标签中引入viewport-fit=cover属性。使页面占满整个屏幕。但是导航栏却会被齐刘海遮住部分内容，并且发现原来设置了100%的高度并没有占据全部内容空间
3.首先对于头部和底部的高度是在iPhone X中是有匹配值的，另外的话在ios11的浏览器Chrome内核提供了一些属性类似于safe-area-inset-top、-right、-left、-bottom，用于设定安全区域与边界的距离。 给body上加一个css样式：content只有加上了viewport-fit=cover才会生效
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
一般只设置bottom，它对应的就是小黑条的高度
在安卓手机上constant是不会被识别的。
4.100%的高度并没有占据全部内容空间： 设置body的高度为100vh，占满全屏高度
10.什么是vw和视口
1.视口，浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域
在pc端中视口指的是浏览器的可视区域，而在移动端中涉及三个视口，一个是布局视口，二是视觉视口，三是理想视口。
浏览器默认的视口是布局视口
浏览器可视区域的大小是视觉视口
完美适配移动设备的视口是理想视口
2.vw就是相对于视口的宽度，而不是父元素的宽
vw,1vw = 1%的视口宽度
vh,1vh = 1%的视口高度
vmin,选取vw和vh中的较小值
vmax,选取vw和vh中的较大值
11. 谈谈你是如何做移动端适配的
1.meta viewport的使用(字体)
为什么移动端初始视口默认都是980像素呢？原因是市面上绝大多数pc网页的版心宽度为980像素，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。 为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。
这里的device-width告诉浏览器，将视口的宽度设置为设备宽度（这个宽度是人为预设的，不设的话就是980px）。
2.图片适配
通常对图片的处理时是这样的img { width: 100%;},但是这样的话，当容器大于图片宽度时，图片会无情的拉伸变形，一些图片会失真 解决方案:
img { max-width: 100%; }
此时图片会自动缩放，同时图片最大显示为其自身的100%（即最大只可以显示为自身那么大）
3.媒体查询（模块)
1.什么是媒体查询 针对不用的设备提前为网页设定各种 CSS 样式.利用CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件
2.例子
@media screen and (min-width:1200px){
body{
background-color: red;
}
4.动态 rem 方案(整体)
让1rem = 100px；方便其他元素尺寸转换
根据设计稿宽度尺寸给html根元素的font-size设置大小:calc(100vw/7.5);假设设计稿是750px的
1vw = 7.5px 100vw = 750px
1rem =100px =100vw/7.5 px
通常和媒体查询配合，实现响应式布局 如果我们做的H5页面只在移动端访问，这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码，建议使用流式布局（百分比布局)
12.移动端1像素边框方案
当设计稿的边框为1px
1.为什么会有这个问题？
设备像素也被称之为物理像素，不同设备自带不同像素。逻辑像素指的是css中记录的像素，也就是css像素。因为移动端布局，根据不同的手机会有不同的dpr，设备独立像素比= 物理像素/逻辑像素
iphone6 = 2，iPhone X = 3，当逻辑像素=1，在6和x中显示的就是2px和3px。所以说，因为dpr大于1，所以在手机上显示的要更粗一些。
2.解决方案
1.媒体查询 非高清屏设置1px没有问题，如果在高清屏，比如说dpr=2，则设置边框为0.5px。
2.css3缩放（更常用) 伪元素选择器，height:1px;用媒体查询，当dpr=2，通过transform:scaleY(.5).如果是3，transform: scaleY(0.333333);
13.bootstrap如何实现响应式布局
1.将一个页面分为12个格子区域，根据终端设备不同的宽度来设定模块内容所占格子区域的大小或者多少来最终决定模块所占空间的实际大小。
2.将模块分为container容器>row行>column列三个概念，
3.设定终端宽度，根据定义不同终端的宽度，来调整容器行列不同的显示效果，一般有xs,s,sm,md,lg五种显示方式，分别占1,2,3,4,6列，不同的宽度下，按照列的不同显示方式最终来实现响应式布局