一阶段面试题——html,css

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

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

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

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

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

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

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。
1
2
3
4
5
6
7
8
9
10
11
12
13

(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） 
等等
1
2
3
4
5
6
7
8

 // 禁止把数字转换为拨号链接
	  // 禁止把地址跳转至地图
	  // 禁止识别邮箱自动发送邮件

1
2
3
4

1

1

1

• 1
• 2
• 3
• 4
• 5
• 6
• 7

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

//defer

//async

1
2
3
4

defer 和 async 都是异步(并行)加载资源，不同点是 async 是加载完立即执行，而 defer 是加载完不执行，等到所有元素解析完再执行，也就是 DOMContentLoaded 事件触发之前。 因为 async 加载的资源是加载完执行，所以它比不能保证顺序，而 defer 会按顺序执行脚本。

■ 一阶段 CSS

🌟 CSS选择器

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

🌛 CSS选择器优先级

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

权重大小

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

🌟 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）
1
2
3

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

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

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

🌟 谈谈你对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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
1
2
3
4
5
6
7
8
9
10
11

触发BFC

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

BFC应用

• 自适应两栏、三栏布局

  盒子1

  盒子2

🌛 谈谈你对栅格的理解

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


案例：bootstrap
测试：https://www.bootcss.com/p/layoutit/  
1
2
3
4
5
6
7
8
9

🌟 自适应

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;
1
2
3
4
5
6

🌟 高度塌陷解决方法

概念：父高自适应，子浮动，父高为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 专门清除浮动的样式*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

🌟 样式兼容

【所有】都图片下方三像素原因及解决办法 解决：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识别*/
}
1
2
3
4
5
6
7

🌛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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

方法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')
1
2
3

方法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
1
2
3
4
5
6
7
8
9

开源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
2

🌛图片模糊问题

方法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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

方法2：

   
1

🌟 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

🌟 三栏布局

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

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

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

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

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

左侧
右侧
中间



左侧
右侧
中间




  
左侧
  
中间
  
右侧





  
中间
  
左侧
  
右侧





  
中间

左侧
右侧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

🌟 弹性布局 flex布局

说出详细语法

🌟 谈谈你对flex:1的理解

哪些属性简写的

🌟 网格布局 Grid 布局

说出详细语法