HTML

1. 语义化

语义化：用合理、正确的标签来展示内容，比如h1~h6定义标题。
优点：

1.易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。

2.有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

3.方便其他设备解析，如盲人阅读器根据语义渲染网页

4.有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

HTML5语义化标签：article nav（导航） aside section（节，段） header footer address等

2. src和href的区别

href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。


<a href="https://www.aaa.com"></a>

<link type="text/css" rel="stylesheet" href="aaa.css">

src：source的缩写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。


<img src="aaa.jpg">



<iframe src="aaa.html">



<script src="aaa.js">

区别

1.src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

2.浏览器需要加载完毕src的内容才会继续往下走。而遇到href，页面会并行加载后续内容。

2. IPhoneX的适配

适配方案viewport-fit：


auto默认：viewprot-fit:contain;页面内容显示在safe area内

cover：viewport-fit:cover,页面内容充满屏幕

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}

小程序：可以通过wx.getSystemInfo获取设备信息，来动态绑定样式

3. ios键盘问题

iOS12系统在输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来的位置


$("input, select").blur(function(){

setTimeout(() => {

const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

window.scrollTo(0, Math.max(scrollHeight - 1, 0));

}, 100);

}

键盘挡住输入框

element.scrollIntoView() // 让当前的元素滚动到浏览器窗口的可视区域内。

ios无法自动聚焦唤起键盘

ios中唤起键盘必须有用户触发，所以无法直接用focus，可以由用户触发一个其他事件来使得输入框focus，从而唤起键盘。

3. 盒子模型

一个盒子模型可分成margin(外边距), border(边框), padding(内边距), content(内容)，四部分组成。


box-sizing:border-box;

box-sizing:content-box;

4. 说说你用过的CSS布局有哪些？

layout布局、flex布局、双飞翼、圣杯布局等
双飞翼，圣杯布局有什么区别?

1.首先两种布局方式都是解决两边等宽,中间区域自适应的问题

2.相同之处:都是采用三栏全部浮动(float),左右两边两栏加上负(margin)让其跟中间栏并排，以形成三栏布局

3.不同之处:解决中间栏不被遮挡的问题,思路不同,圣杯布局采用一层结构,使用(position: relative)配合(left)和(right)属性实现

4.推荐使用双飞翼布局,虽然多一层结构,但是少几行CSS代码,看起来更清晰,性能更佳

5. link 和 @import的区别


<link rel="stylesheet" href="common.css" type="text/css" />

<style type="text/css">@import url(common.css) </style>

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

6. 移动端一像素边框

通过媒体查询,写具体的数值


.border { border: 1px solid #999 }

@media screen and (-webkit-min-device-pixel-ratio: 2) {

.border { border: 0.5px solid #999 }

}

通过伪类,配合transform,缩放


.border-1px::after {

  display: block;

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  pointer-events: none;

  transform-origin: center top;

  -webkit-transform-origin: center top;

  border-top: 1px solid #E6E6E6;

  width: 100%;

  height: 200%;

  transform: scaleY(0.5);

  -webkit-transform: scaleY(0.5);

}

7. 移动端点击300ms延迟

meta禁用缩放或固定视口宽度

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

fastclick插件

1.fastClick的实现原理:是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

2.缺点：脚本相对较大

3.fastclick 在ios 上可能会影响元素自动触发，比如直接click()；会拦截第一次，需要执行两次click()；才会触发；安卓上不需要；

tap事件

1.在touchstart 时会记录一个值x1，y1，在touchend时会记录x2，y2，通过对比这几个值，判断用户是否是点击事件，而不是滑动事件，然后直接触发事件

2.tap事件存在"点透"的情况

7. 单位问题

%：

1.margin,padding是相对父元素的宽度计算的

2.top,left,bottom,right是相对于父元素的高度计算的

3.translate是相对自身元素来算的

px：像素

1.em：1em等于当前元素的font-size(浏览器默认16px，可继承，em可以省略)

2.rem：1rem等于html元素的font-size

3.vw,vh：视口宽度被均分成100vw,视口高度被均分成100vh。视口宽高是页面的可视区域，如键盘弹起安卓的视口宽高发生变化，但iPhone不会。（安卓4.4，iOS6以上支持）

vmax, vmin：

1.vmax = max(vw,vh)（vmax安卓4.4，iOS8以上支持）

2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持）

ex和ch：

1.ex以字符"x"的高度为基准；例如1ex表示和字符"x"一样长。

2.ch以数字"0"的宽度为基准；例如2ch表示和2个数字"0"一样长

8. 居中方案

水平居中

1.行内元素：text-align: center;

2.固定宽度： + margin: 0 auto;

3.flex：justify-content: center;

4.grid：justify-items: center;

5.定位：left:50%，transformX(-50%);

垂直居中

1.行内元素:：padding-top = padding-bottom

2.行内元素: line-height = height

3.display：父display:table; 子display:table-cell; vertical-align: middle;

4.flex：align-items: center;

5.grid：align-items: center;

6.定位：top:50%，transformY(-50%);

水平垂直居中

1.已知高宽，使用负边距法

2.未知，使用grid, flex或transfrom

9. flex布局

比如：上面是内容区域，底部是购物车固定容器，高度50px


.content{

  flex: 1;

}

.bottom{

  height: 50px;

}

10. CSS3新特性（贝塞尔曲线）

过渡 transition
动画 animation
形状转换 transform
阴影 box-shadow
滤镜 Filter
颜色 rgba
栅格布局 gird
弹性布局 flex

...

11. BFC

块级格式化上下文，为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1.body元素

2.float的值不是none。

3.position的值不是static或者relative。

4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex

5.overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
特性:

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（margin坍塌）

3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4.BFC的区域不会与float box重叠。

5.计算BFC的高度时，浮动元素也参与计算

6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。