一阶段面试题——html,css

■ 符号说明

💘 课题

🌟 常见重要

🌛 需要有印象的

■ 杂谈

🌛 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属性值，这样可以绕开以上两个问题

• 举例

🌟 实战必备：favicon.ico

制作：https://tool.520101.com/diannao/ico/

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

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

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

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

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

dns-prefetch

域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 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')"



区别：Preload 来告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级。比如，对于那些本来请求优先级较低的关键请求，我们可以通过设置 Preload 来提升这些请求的优先级。
Prefetch 来告诉浏览器用户将来可能在其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在 http 缓存内，最常见的 dns-prefetch。比如，当我们在浏览A页面，如果会通过A页面中的链接跳转到B页面，而B页面中我们有些资源希望尽早提前加载，那么我们就可以在A页面里添加这些资源 Prefetch ，那么当浏览器空闲时，就会去加载这些资源。
所以，对于那些可能在当前页面使用到的资源可以利用 Preload，而对一些可能在将来的某些页面中被使用的资源可以利用 Prefetch。如果从加载优先级上看，Preload 会提升请求优先级；而Prefetch会把资源的优先级放在最低，当浏览器空闲时才去预加载。

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新特性

• 属性选择器选择器
• 圆角
• 阴影
• 渐变
• 多列布局
• css自定艺术性
• 等等

🌟 定位 position

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

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

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

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

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

🌟 定位 position场景

static 默认

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

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

sticky 网站导航栏 例如 https://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应用

• 自适应两栏、三栏布局

  盒子1

  盒子2

🌛 谈谈你对栅格的理解

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


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

🌟 自适应

rem和em区别、vw是什么

都是相对单位

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

em相对父麻烦

vw可视窗口1%

🌛 解决谷歌最小字体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

文档

http://www.alloyteam.com/2020/06/css-pixels/

https://juejin.cn/post/6844903734347055118#heading-10

解决：

方法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的语法规则，而是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定位 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定位 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);

等等

🌟 两栏布局

方法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：弹性盒 左固定 右侧flex:1

方法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布局

说出详细语法

🌟 谈谈你对flex:1的理解

哪些属性简写的

🌟 网格布局 Grid 布局

说出详细语法