你好
中国
一阶段面试题——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）
等等
忽略电话号码
移动设备忽略将页面中的数字识别为电话号码的方法
// 禁止把数字转换为拨号链接
// 禁止把地址跳转至地图
// 禁止识别邮箱自动发送邮件
iframe标签
iframe就是HTML中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。
-
返回
- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
-
举例
实战必备：favicon.ico
制作：https://tool.520101.com/diannao/ico/
作用：通过link生成网站自定义图标
场景：打开淘宝京东 查看窗口左上角有自定义图标
性能优化：标签你不知道的属性
-
场景：打开淘宝、京东等网站查看标签加了一些你不知道的属性
淘宝网 - 淘！我喜欢
dns-prefetch
域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。
prefetch
prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。
preload
和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。
defer 和 async 现在重技术的公式面试必问
//defer
//async
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：
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
等等
你好
中国
你好
中国
你好
中国
三栏布局
方法1：左右固定浮动、中间触发BFC
方法2：左右固定浮动、中间margin-left/right后自适应
方法3：左右固定定位、中间margin-left/right后自适应
方法4：弹性盒 左固定 右侧flex:1
方法5：圣杯布局、双飞翼布局
左侧
右侧
中间
左侧
右侧
中间
左侧
中间
右侧
中间
左侧
右侧
中间
左侧
右侧
弹性布局 flex布局
说出详细语法
谈谈你对flex:1的理解
哪些属性简写的
网格布局 Grid 布局
说出详细语法