■ 符号说明

💘 课题

🌟 常见重要

🌛 需要有印象的

■ 杂谈

🌛 SEO优化

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容（查看网页源代码要有数据，有利于seo优化）

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

🌟 渐进增强与优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

■ 一阶段 HTML

🌟 H5新增API

HTML5新增了哪些内容或API，使用过哪些

(1) 音视频audio、video标签
(2) 语义化标签article、footer、header、nav、section等
(3) 表单控件date、time、color、emial、url、search等
(4) 新增图形绘制canvas标签
(5) H5存储localStorage、sessionStorage
(6) 新的技术webworker, websocket, Geolocation;
(7) DNS预获取、FormData、FileReader、全屏API（Fullscreen API） 
等等

🌛 忽略电话号码

移动设备忽略将页面中的数字识别为电话号码的方法

<meta name="format-detection" content="telephone=no"> // 禁止把数字转换为拨号链接
<meta name="format-detection" content="address=no">	  // 禁止把地址跳转至地图
<meta name="format-detection" content="email=no">	  // 禁止识别邮箱自动发送邮件
<meta name="format-detection" content="telephone=no,adress=no,email=no">

🌟 iframe标签

iframe就是HTML中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。

- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

举例

<iframe scr="http://baidu.com" ></iframe>
<iframe scr="http://baidu.com" ></iframe>

🌟 实战必备：favicon.ico

制作：tool.520101.com/diannao/ico…

作用：通过link生成网站自定义图标

<link rel="shortcut icon" href="http://www.mobiletrain.org/favicon.ico" type="/image/x-icon" / >

场景：打开淘宝京东查看窗口左上角有自定义图标

🌟 性能优化：标签你不知道的属性

场景：打开淘宝、京东等网站查看标签加了一些你不知道的属性

 <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
  <link rel="dns-prefetch" href="//g.alicdn.com" />
  <link rel="dns-prefetch" href="//img.alicdn.com" />
  <link rel="dns-prefetch" href="//tce.alicdn.com" />
  <link rel="dns-prefetch" href="//gm.mmstat.com" />
  <link ref="dns-prefetch" href="//tce.taobao.com" />
  <link rel="dns-prefetch" href="//log.mmstat.com" />
  <link rel="dns-prefetch" href="//tui.taobao.com" />
  <link rel="dns-prefetch" href="//ald.taobao.com" />
  <link rel="dns-prefetch" href="//gw.alicdn.com" />
  <link rel="dns-prefetch" href="//atanx.alicdn.com"/>
  <link rel="dns-prefetch" href="//dfhs.tanx.com"/>
  <link rel="dns-prefetch" href="//ecpm.tanx.com" />
  <link rel="dns-prefetch" href="//res.mmstat.com" />

dns-prefetch

域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你将域名转换为IP地址。尤其是大型网站会使用多域名，这时候更加需要 dns 预取。
<link rel="dns-prefetch" href="//m.baidu.com">
prefetch

prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。
<link rel="prefetch" href="http://www.baidu.com/">
preload

和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。
<link rel='preload' href='style.css' as="style" onload="console.log('style loaded')"
defer 和 async 现在重技术的公式面试必问
//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>
defer 和 async 都是异步(并行)加载资源，不同点是 async 是加载完立即执行，而 defer 是加载完不执行，等到所有元素解析完再执行，也就是 DOMContentLoaded 事件触发之前。因为 async 加载的资源是加载完立即执行，所以它不能保证脚本执行顺序，而 defer 会按顺序执行脚本。

■ 一阶段 CSS

🌟 CSS选择器

留心：:befor是Css2的写法（兼容好），::before是Css3的写法（兼容相对不好)

🌛 CSS选择器优先级

权重顺序： !important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

权重大小

通配符0
标签 1
类/伪类/属性 10
ID 100
行内样式 1000
important	无穷大

🌟 CSS3新特性

属性选择器选择器
圆角
阴影
渐变
多列布局
等等

🌟 定位 position

static 默认值，没有定位，元素出现在正常的文档流中；

relative 相对定位，相对位置为自身默认位置；

absolute绝对定位，相对位置为最近父非static的元素，没有就是body/可见视口/浏览器窗口；

fixed固定定位，对象位置为 body/可见视口/浏览器窗口；

sticky粘性定位，该定位基于用户滚动的位置；

🌟 定位 position场景

static 默认

relative、absolute 淘宝京东轮播图左右箭头、分页器、热卖商品、新品等等

fixed 传统网站两侧滚动广告、还有右下角客服、返回顶部等等

sticky 网站导航栏例如 www.discuz.net/

🌟 谈谈你对盒模型的理解

问：什么是盒模型？

网页布局中CSS布局的思想模型，
主要规定元素和元素之间的关系
例如：内容（content）,内边距（padding）,边框（border）,外边距（margin）

问：标准盒模型、怪异盒模型

用box-sizing告诉浏览器如何计算一个元素的总宽度和总高度

标准盒模型   box-sizing: content-box
一个块的总宽度  width + margin(左右) + padding(左右) + border(左右)
	
IE盒模型或怪异盒模型 box-sizing: border-box
一个块的总宽度 = width（已包含padding和border） + margin(左右)

🌟 谈谈你对BFC的理解

BFC是什么：是一个独立的布局环境

BFC能干吗：形成一个完全独立的空间，让空间中的子元素不会影响外面的布局

BFC特性（独立空间内元素/标签的布局规则）

1 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并（应用：防止margin重叠）；

2 BFC的区域不会与float box重叠（应用：自适应两栏布局）

3 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

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

5 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)；即使存在浮动也是如此。（说明：就是子盒子排列时候从父盒子左上角开始）

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

触发BFC

float：除 none 以外的值
position为 absolute、fixed
display 为 inline-block、table、table-row、table-cell、flex等等
overflow 除了 visible 以外的值 (hidden、auto、scroll)
column-count等

BFC应用

自适应两栏、三栏布局

<style>
* {padding:0px;margin:0px;}
.left {width:200px;height:100px;background:green;float: left;}
.right {height:200px;background:red;overflow: hidden; }
</style>

<div class="left"></div>
<div class="right"></div>

清清除内部浮动

<style>
* {padding:0px;margin:0px;}
/*
ul {background: green;}
*/
ul {background: green; overflow: hidden;}
li {width:100px;height:20px;background:red;float: left;}
</style>

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
</ul>

利用BFC避免margin重叠（案例：京西商城后台首页头部导航

<style>
* {padding:0px;margin:0px;}
p {width:100px;height:20px;background:red;margin:10px 0px;}
</style>

<!-- 
<p>盒子1</p>
<p>盒子2</p> 
-->

<div style="overflow:hidden;"><p>盒子1</p></div>
<p>盒子2</p>

🌛 谈谈你对栅格的理解

将网页内容划分成12等分
使用布局容器宽度变小了，依旧12等分  
会发现内容变小了
不够就空着
超出就另起一行


案例：bootstrap
测试：https://www.bootcss.com/p/layoutit/

🌟 自适应

rem和em区别、vw是什么

都是相对单位

rem是相对于html的，绕开了复杂的层级关系

em相对于父，比较麻烦

vw可视窗口1%

小程序用的 rpx 是相对设计稿屏幕尺寸大小的

🌛 解决谷歌最小字体12px限制

通过transform缩放即可解决

transform: scale

🌟 CSS三角形怎么实现

宽度、高度设为0，然后设置边框样式全透明

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

🌟 高度塌陷解决方法

概念：父高自适应，子浮动，父高为0的表现

解决：

方法1：clear: both + 空标签（不推荐代码冗余）方法2：父级添加overflow属性（不推荐超出隐藏特殊定位布局出问题）方法3：伪元素清除浮动（推荐使用）方法4：双伪元素清除浮动（推荐使用）

/*声明清除浮动的样式*/
.clearfix:after {
	content: "";		
	display: block; 	// 没有内容转换为快元素
 	clear: both;		// 清除浮动
	visibility: hidden;  // 元素隐藏，位置保留
	height: 0;		  	// 解决IE6解析高度0不正确问题
	overflow: hidden;  	 // 解决IE6解析高度0不正确问题
}
.clearfix {
    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}


/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

🌟 样式兼容

【所有】图片下方三像素原因及解决办法解决：display:block、vertical-align: middle;

【谷歌】表单元素获取焦点有边框线解决：outline: none

【IE】表单元素去掉边框 border:none 不兼容IE低版本解决：border:0;

【IE】表单元素加高度后所有浏览器默认内容垂直居中不兼容IE低版本解决：加行高line-height

【IE】a标签包图片会有边框解决：图片border:0

【IE】透明语法兼容问题

【IE】双倍margin问题

等等

css hack 例如

选择器 {
    height:32px;
    background-color:#f1ee18;    /*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;   /*IE6、7识别*/
    _background-color:#1e0bd1;   /*IE6识别*/
}

🌛1px细线问题

说明：在移动端实现1px

文档

www.alloyteam.com/2020/06/css…

juejin.cn/post/684490…

解决：

方法1：伪元素 + transform

.border-1px {
    position: relative;
}
.border-1px:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid red;
    color: red;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
  .border-1px:after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
  }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
  .border-1px:after {
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
  }
}

方法2：通过缩放viewport实现

var scale = 1 / window.devicePixelRatio;
var viewport = document.querySelector("meta[name=viewport]")
viewport.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

方法3：媒体查询利用设备像素比缩放，设置小数像素（存在兼容WWDC苹果全球开发者大会ios8+才支持小数

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
	.border { border: 0.333333px solid #999 }
}

留心：ios8- 和  安卓低版本等都不能识别小数会忽略为0px

开源UI组件库解决方案

vant ui  https://github.com/youzan/vant/blob/dev/src/style/mixins/hairline.less
antd m   https://github.com/ant-design/ant-design-mobile/blob/master/components/style/mixins/hairline.less

🌛图片模糊问题

方法1

/*默认大小*/
.photo {
	width:100px;height:100px;
	background-image: url(image100.png);
}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
  .photo {
    background-image: url(image200.png);
    background-size: 100px 100px;
  }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
  .photo {
    background-image: url(image300.png);
    background-size: 100px 100px;
  }
}

方法2：

<img src="./imgs/goods.png" alt="" srcset="./imgs/goods@2.png 2x,./imgs/goods@3.png 3x">

🌟 link和@import区别

功能角度：

@import是CSS的语法规则，而<link></link>是HTML标签。

所以link不仅可以加载CSS，还可以定义RSS等，而@import只能导入CSS

加载顺序：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

兼容角度：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题

DOM操作：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

优化角度：link可以加一些预解析的标签，而@import没有它强

🌟 水平居中

方法1：【移动推荐】利用flex弹性布局 justify-content center

方法2：【需要宽高】利用position定位 left 50% margin-left 负自身一半

方法3：【需要宽高】利用position定位 right/left =0 然后 margin: auto

方法4：【留心兼容】利用position定位 left 50% transform translate(-50%,0)

方法5：【行内元素】text-align center

方法6：【块级元素】margin auto

🌟 垂直居中

方法1：【移动推荐】利用flex弹性布局 align-items center

方法2：【需要宽高】利用position定位 top 50% margin-top 负自身一半

方法3：【需要宽高】利用position定位 top/bottom=0 然后 margin: auto

方法4：【留心兼容】利用position定位 top 50% transform translate(0, -50%);

方法5：【文本居中】line-height

🌟 水平垂直居中

方法1：【移动推荐】利用flex弹性布局 justify-content/ align-items center

方法2：【需要宽高】利用position定位 top/left 50% margin-top/left 负自身一半

方法3：【需要宽高】利用position定位 top/right/bottom/left =0 然后 margin: auto

方法4：【留心兼容】利用position定位 transform translate(-50%,-50%)

方法5：【留心兼容】利用position定位 calc((100% - 100px) / 2);

方法6：利用transform position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)

等等

🌟 两栏布局

方法1：左固定浮动、右触发BFC

方法2：左固定浮动、右margin-left

方法3：左固定定位、右margin-left

方法4：父弹性盒、左固定、右flex:1

等等

<style>
*{padding:0px;margin:0px;}
.test {width:50px;height:50px;background: black;color:#fff;}
</style>

<!-- 方法1：左固定浮动、右触发BFC -->
<style>
.left1 {width:200px;height:100px;background:#ccc;float:left;}
.right1 {height:100px;background:red;overflow: hidden;}
</style>
<div class="left1">你好</div>
<div class="right1"><div class="test">中国</div></div>

<!-- 方法2：左固定浮动、右margin-left -->
<style>
.left2 {width:200px;height:100px;background:#ccc;float:left;}
.right2 {height:100px;background:red;margin-left:200px;}
</style>
<div class="left2">你好</div>
<div class="right2"><div class="test">中国</div></div>

<!-- 方法3：左固定定位、右margin-left -->
<style>
.left3 {width:200px;height:100px;background:#ccc;position:absolute;}
.right3 {height:100px;background:red;margin-left:200px;}
</style>
<div class="left3">你好</div>
<div class="right3"><div class="test">中国</div></div>

<!-- 方法4：父弹性盒、左固定、右flex:1  -->
<style>
.main {display: flex;}
.left4 {width:200px;height:100px;background:#ccc;}
.right4 {height:100px;background:red;flex:1;}
</style>
<div class="main">
<div class="left4">你好</div>
<div class="right4"><div class="test">中国</div></div>
</div>

🌟 三栏布局

方法1：左右固定浮动、中间触发BFC

方法2：左右固定浮动、中间margin-left/right后自适应

方法3：左右固定定位、中间margin-left/right后自适应

方法4：弹性盒左右固定中间flex1

方法5：圣杯布局、双飞翼布局

<style>*{padding:0px;margin:0px;}</style>

<!-- 方法1：左固定浮动、右触发BFC -->
<style>
.left1{width:200px;background:green;float:left;}
.right1{width:200px;background:#ccc;float:right;}
.center1{background:red;overflow:hidden;}
</style>
<div class="left1">左侧</div>
<div class="right1">右侧</div>
<div class="center1">中间</div>

<!-- 方法2：左右固定浮动、中间margin-left/right后自适应 -->
<style>
.left2 {width:200px;background:green;float:left;}
.right2 {width:200px;background:#ccc;float:right;}
.center2 {background:red;margin:0px 200px 0px 200px}
</style>
<div class="left2">左侧</div>
<div class="right2">右侧</div>
<div class="center2">中间</div>

<!-- 方法3：左右固定定位、中间margin-left/right后自适应 -->
<style>
.box3 {position: relative;}
.left3 {width:200px;background:green;position:absolute;top:0px;left:0px;}
.right3 {width:200px;background:#ccc;position:absolute;top:0px;right:0px;}
.center3 {background:red;margin:0px 200px}
</style>
<div class="box3">
  <div class="left3">左侧</div>
  <div class="center3">中间</div>
  <div class="right3">右侧</div>
</div>

<!-- 方法4：圣杯布局-有定位 -->
<style>
.box4{padding:0 200px;}
.content4{width:100%;background:red;float:left;}
.left4{width:200px;background:green;float:left;margin-left:-100%;position: relative;left:-200px;}
.right4{width:200px;background:#ccc;float:left;margin-left:-200px;position: relative;right:-200px;}
</style>
<div class="box4">
  <div class="content4">中间</div>
  <div class="left4">左侧</div>
  <div class="right4">右侧</div>
</div>

<!-- 方法5：双飞翼布局-无定位 -->
<style>
.box5 {width:100%;float:left;background:red;}
.box5 .content5{padding:0 200px;}
.left5{width:200px;background:green;float:left;margin-left:-100%;}
.right5{width:200px;background:#ccc;float:left;margin-left:-200px;}
</style>
<div class="box5">
  <div class="content5">中间</div>
</div>
<div class="left5">左侧</div>
<div class="right5">右侧</div>

🌟 弹性布局 flex布局

display:flex;

🌟 谈谈你对flex:1的理解

flex:1 表示flex-grow:1,flex-shrink 和 flex-basis 为1和auto 默认值。


flex-grow 、flex-shrink 和 flex-basis

🌟 网格布局 Grid 布局

说出详细语法

阶段一面试

■ 符号说明

■ 杂谈

🌛 SEO优化

🌟 渐进增强与优雅降级

■ 一阶段 HTML

🌟 H5新增API

🌛 忽略电话号码

🌟 iframe标签

🌟 实战必备：favicon.ico

🌟 性能优化：标签你不知道的属性

dns-prefetch

prefetch

preload

`defer` 和 `async` 现在重技术的公式面试必问

■ 一阶段 CSS

🌟 CSS选择器

🌛 CSS选择器优先级

🌟 CSS3新特性

🌟 定位 position

🌟 定位 position场景

🌟 谈谈你对盒模型的理解

🌟 谈谈你对BFC的理解

🌛 谈谈你对栅格的理解

🌟 自适应

🌛 解决谷歌最小字体12px限制

🌟 CSS三角形怎么实现

🌟 高度塌陷解决方法

🌟 样式兼容

🌛1px细线问题

🌛图片模糊问题

🌟 link和@import区别

🌟 水平居中

🌟 垂直居中

🌟 水平垂直居中

🌟 两栏布局

🌟 三栏布局

🌟 弹性布局 flex布局

🌟 谈谈你对flex:1的理解

🌟 网格布局 Grid 布局

阶段一面试

■ 符号说明

■ 杂谈

🌛 SEO优化

🌟 渐进增强与优雅降级

■ 一阶段 HTML

🌟 H5新增API

🌛 忽略电话号码

🌟 iframe标签

🌟 实战必备：favicon.ico

🌟 性能优化：标签你不知道的属性

dns-prefetch

prefetch

preload

defer 和 async 现在重技术的公式面试必问

■ 一阶段 CSS

🌟 CSS选择器

🌛 CSS选择器优先级

🌟 CSS3新特性

🌟 定位 position

🌟 定位 position场景

🌟 谈谈你对盒模型的理解

🌟 谈谈你对BFC的理解

🌛 谈谈你对栅格的理解

🌟 自适应

🌛 解决谷歌最小字体12px限制

🌟 CSS三角形怎么实现

🌟 高度塌陷解决方法

🌟 样式兼容

🌛1px细线问题

🌛图片模糊问题

🌟 link和@import区别

🌟 水平居中

🌟 垂直居中

🌟 水平垂直居中

🌟 两栏布局

🌟 三栏布局

🌟 弹性布局 flex布局

🌟 谈谈你对flex:1的理解

🌟 网格布局 Grid 布局

`defer` 和 `async` 现在重技术的公式面试必问