人生实验室

# 前端知识（基础）

💡 “不是生活给了我什么，我就要什么，而是我想要过什么样的生活，我自己去构建。”

# 前言

# 重要考点

  • HTML 和 CSS
  • 原型、作用域、异步
  • DOM 事件和 Ajax
  • 性能优化
  • 各种手写代码
  • HTTP 协议

# 知识点

  • CSS
    • 布局
    • 定位
    • 移动端响应式
  • ES 语法
    • 原型，原型链
    • 作用域，闭包
    • 异步，单线程
  • Web API
    • DOM，BOM
    • Ajax跨域
    • 事件，存储
  • 开发环境
    • 版本管理
    • 调试抓包
    • 打包构建
  • 运行环境
    • 页面渲染
    • 性能优化
    • Web 安全
  • 网络通讯（HTTP 协议）
    • headers
    • Restful API
    • 缓存策略

详细：
FE - Web 前端知识体系
前端基础思维导图1-基础知识
前端基础思维导图2-基础知识+进阶知识
前端简历和面试技巧导图

其他：
面试过程中应该避免的几种情况（最后附送前端面试题）
资深技术Leader曹乐：如何成为技术大牛

# 思想

面对试题时，懂得归纳知识点/考点，建立自己的知识体系。

高效学习三部曲：找准知识体系（结构化，有组织、易拓展的知识范围）；刻意训练；及时反馈。

# HTML

# HTML语义化

(001)如何理解HTML语义化？

可读性（人和机器）、搜索引擎（SEO）

# 块级元素，内联元素

(002)默认情况下，哪些HTML标签是块级元素，哪些是内联元素？

块状： 独占一行
display: block/table
有div、h1、h2、table、p、ul、ol等

内联： 不会独占一行，在同一行，排着往后挤
display: inline/inline-block 有span、img、input、button等

# CSS

# 布局

# 盒子模型

(003)盒子模型的宽度如何计算？

<!--如下所示，请问div1的offsetWidth是多大？-->
<style>
	#div1{
		width: 100px;
		padding: 10px;
		border: 1px solid #ccc;
		margin: 10px;
	}
</style>

<div id="div1">
</div>
1
2
3
4
5
6
7
8
9
10
11
12

111px❌
错误，是122px，💦 （注意，padding和border这里是上下左右都有）

  • offsetWidth = （ 内容宽度 + 内边距 + 边框 ），无外边距

  • 补充：如果让div1的offsetWidth等于100px，该如何做？
    （即：让元素的with设置完之后等于offsetWidth，要怎么做？）

  • 解答：增加一条 box-sizing: border-box;
    设置了之后，padding 和 border 的宽高会被限制在 width 里面。
    此时，内容（所能用的）宽度，就变成78px了。

tip：

安装运行本地网页的服务

npm install -g http-server
1

安装之后，cd到你所要起服务的文件夹，输入：

http-server -p 8881
1

这里8881是端口

补充：

  • 标准盒模型 border, padding, content, margin
  • IE盒模型 border, padding, content
  • 通过 box-sizing属性改变元素的盒模型

# margin纵向重叠的问题

(004)如下代码，AAA和BBB之间的距离是多少？

<!-- 如下代码，AAA和BBB之间的距离是多少？ -->
<style>
	p{
		font-size: 16px;
		line-height: 1;
		margin-top: 10px;
		margin-bottom: 15px;
	}
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

100px(25x3+15+10)❌
错误，是15px，💦

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的<p></p>也会重叠

# (005)分别对margin的top、bottom、left、right设置负值，有什么效果？

  • margin-left 和 margin-top 设置负值，元素向左、向上移动
  • margin-right 设置负值，自身不受影响，右侧元素会左移
  • margin-bottom 设置负值，自身不受影响，下方元素会上移

# (006)什么是BFC？如何应用？

  • Block format context，块级格式化上下文
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

BFC规定了内部的Block Box如何布局。
定位方案：

  • 内部的Box会在垂直方向上一个接一个放置。
  • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box 的左边，与包含块border box的左边相接触。
  • BFC的区域不会与float box重叠。
  • BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

  • float 不是 none（默认）
  • position 是 absolute 或 fixed
  • overflow 不是 visible（默认）
  • display 是 flex 或 inline-block等（table-cell、table-caption）

BFC的常见应用

  • 清除浮动
    例子：当浮动元素比容器大，浮动元素跑出容器时，对容器和容器内其他块级元素用
    overflow: hidden，把容器撑大，而不是让内容跑到容器之外。

# float布局的问题，以及clearfix

(007)如何实现圣杯布局和双飞翼布局？

目的

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于 PC 网页

技术总结

  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖，圣杯布局 通过 padding 为两边留白，双飞翼布局 通过 margin 为两边留白
  • 圣杯布局 比 双飞翼布局 的css 复杂一些，结构也稍有不同

圣杯布局代码示范：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>圣杯布局</title>
		<style>
			body{
				min-width: 550px;
			}
			header,footer{
				background-color: gray;
				text-align: center;
			}
			footer{
				clear: both;
			}
			.container{
				padding-right: 150px;
				padding-left: 200px; 
			}
			.column{
				float: left;
			}
			.center{
				background-color: blue;
				width: 100%;
			}
			.left{
				background-color: green;
				width: 200px;
				margin-left: -100%;
				position: relative;
				right: 200px;
			}
			.right{
				background-color: yellow;
				width: 150px;
				margin-right: -150px;
			}
		</style>
	</head>
	<body>
		<header>头部</header>
		<div class="container">
			<div class="center column">中间</div>
			<div class="left column">左边</div>
			<div class="right column">右边</div>
		</div>
		<footer>底部</footer>
	</body>
</html>
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

双飞翼布局代码示范：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>双飞翼布局</title>
		<style>
			body{
				min-width: 550px;
			}
			header,footer{
				background-color: gray;
				text-align: center;
			}
			footer{
				clear: both;
			}
			.container{
				width: 100%;
				/*height: 200px;*/
				background-color: #ccc
			}
			.column{
				float: left;
			}
			.center{
				/*background-color: blue;*/
				margin: 0 150px 0 200px;
			}
			.left{
				background-color: green;
				width: 200px;
				/*height: 200px;*/
				margin-left: -100%;
			}
			.right{
				background-color: yellow;
				width: 150px;
				/*height: 200px;*/
				margin-left: -150px;
			}
		</style>
	</head>
	<body>
		<header>头部</header>
		<div class="container column">
			<div class="center">中间内容</div>
		</div>
		<div class="left column">左边</div>
		<div class="right column">右边</div>
		<footer>底部</footer>
	</body>
</html>
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

(008)手写clearfix

  • 一般给内部内容有浮动的块设置
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix{
	*zoom: 1;/* 兼容IE低版本 */
}
1
2
3
4
5
6
7
8

兼容IE低版本这个现在可能没有太多必要，写不写都没什么问题。了解一下。

补充：
为什么要清除浮动？清除浮动的方式？

  • 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
  • 浮动带来的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素

  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

  4. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear: both;）(不推荐)
    优点：通俗易懂，方便
    缺点：添加无意义标签，语义化差

  5. 父级添加 overflow 属性（父元素添加 overflow: hidden）(不推荐)
    优点：代码简洁
    缺点：内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示要溢出的元素

  6. 使用 after 伪元素清除浮动 （推荐使用）

.clearfix::after{
  /* 伪元素是行内元素，正常浏览器清除浮动方法 */
  content: "";
  dispaly: block;
  height: 0;
  clear: both;
  visibility: hiden;
}
.clearfix{
  /* *ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */
  *zoom: 1; 
}
1
2
3
4
5
6
7
8
9
10
11
12

优点：符合闭合浮动思想，结构语义化正确
缺点：IE6-7不支持伪元素：after,使用zoom：1触发hasLayout
④ 使用before 和 after 双伪元素清除浮动

.clearfix::after, .clearfix::before{
  content: "";
  display: table;
}
.clearfix::after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}
1
2
3
4
5
6
7
8
9
10

# flex画色子

flex相关基本概念：

CSS3的flexbox（弹性盒布局模型）

  • 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
    在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。
    弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
  • 适用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

Flex 布局教程：语法篇 - 阮一峰

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}
1
2
3

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}
1
2
3

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
1
2
3
4

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

常用语法回顾：

以下6个属性设置在 容器 上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

  • flex-direction 属性决定主轴的方向（即项目的排列方向）
.box {
  flex-direction: row | row-reverse | column | column-reverse;
  /* 从左到右（默认值） | 从右到左 | 从上到下 | 从下到上 */
}
1
2
3
4
  • flex-wrap 属性定义，如果一条轴线排不下，如何换行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  /* 不换行 | 换行，第一行在上方。 | 换行，第一行在下方。 */
}
1
2
3
4
  • flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
1
2
3
  • justify-content 属性定义了项目在主轴上的对齐方式。
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  /* 它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 */
  /* （默认值）左对齐 | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等。 | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
}
1
2
3
4
5
  • align-items 属性定义项目在交叉轴上如何对齐。
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
  /* 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。 */
  /* 交叉轴的起点对齐 | 交叉轴的终点对齐 | 交叉轴的中点对齐 | 项目的第一行文字的基线对齐 | （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。 */
}
1
2
3
4
5
  • align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  /* 与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 与交叉轴的中点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布 | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 | （默认值）轴线占满整个交叉轴 */
}
1
2
3
4

以下6个属性设置在 项目 上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self
以上可以概括为order、flex 和 align-self，看下文即可知。

  • order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
  order: <integer>;
}
1
2
3
  • flex-grow 属性定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大。
.item {
  flex-grow: <number>; /* default 0 */
}
1
2
3

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
  flex-shrink: <number>; /* default 1 */
}
1
2
3

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

  • flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
  flex-basis: <length> | auto; /* default auto */
}
1
2
3

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  • flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
1
2
3

该属性有两个快捷值：auto (相当于 1 1 auto) 和 none (相当于 0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  /* 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 */
}
1
2
3
4

(009) flex 实现一个三点的色子（画骰子三点的那一面）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>三点骰子</title>
		<style>
			.box{
				display: flex;/* flex布局 */
				width: 90px;
				height: 90px;
				padding: 20px;
				border: 1px solid #666;
				border-radius: 5px;
				justify-content: space-between;/* 两端对齐 */
			}
			.item{
				display: block;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background-color: #333
			}
			.item:nth-child(2){
				align-self: center;/* 第2项居中对齐 */
			}
			.item:nth-child(3){
				align-self: flex-end;/* 第3项尾对齐 */
			}
		</style>
	</head>
	<body>
			<div class="box">
				<span class="item"></span>
				<span class="item"></span>
				<span class="item"></span>
			</div>
	</body>
</html>
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

# 定位

# (010) absolute 和 relative 分别依据什么定位？

  • relative 依据自身定位（不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位）
  • absolute 依据最近一层的定位元素定位（参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；）
    • 定位元素：定义了 position：absolute | relative | fixed 的元素，没有的话定到 body。

附加：
static（默认）：按照正常文档流进行排列；
fixed(固定定位)：所固定的参照对像是可视窗口。

# (011)居中对齐有哪些实现方式？

水平居中、垂直居中

水平居中：

  • 不需要知道子元素尺寸：
    • inline 元素：text-align: center
    • block 元素：margin: auto
  • 需要知道子元素尺寸：
    • absolute 元素：left: 50% + margin-left 负值（元素自身宽度的一半）

垂直居中：

  • 需要知道子元素尺寸：
    • inline 元素：line-height 的值等于 height 值
    • absolute 元素：top:50% + margin-top 负值（元素自身高度的一半）
  • 不需要知道子元素尺寸：
    • absolute 元素：top: 50% ,left: 50% + transform: translate(-50%,-50%) (水平垂直居中)
    • absolute 元素：top,left,bottom,right = 0 + margin: auto (水平垂直居中)

水平垂直居中的例子1，写样式的时候不需要用到它的宽高（它要有定义宽高，否则没有效果；但如果里面有内容，可以不定义宽高）。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中</title>
		<style>
			.box{
				/*width: 50px;				
				height: 60px;*/ /* 如果里面有内容，不定义宽高也不影响垂直居中效果 */
				background-color: #ccc;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="box">内容123</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

水平垂直居中的例子2，写样式的时候不需要用到它的宽高（它要有定义宽高，否则没有效果）。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中</title>
		<style>
			.box{
				width: 50px;				
				height: 60px;
				background-color: #ccc;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

对比例子1、例子2:

transform:translate(-50%,-50%)的应用场景

例子1:
trasform:translate(-50%,-50%)除了可以水平垂直居中，还可以根据屏幕的大小来调节自身的宽度，做弹框时不用设置宽高。
如果你不想要那么宽，设置max-width这个属性就可以了。
缺点是有的浏览器不支持。

例子2:
内容可能会溢出（见链接），但兼容性更好。

# 图文样式

# (012)line-height如何继承？

<!-- 如下代码，p标签的行高将会是多少？ -->
<style>
	body{
		font-size: 20px;
		line-height: 200%;
	}
	p{
		font-size: 16px;
	}
</style>
<body>
	<p>AAA</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

答案：40px

  • 写带单位的具体数值，如30px，直接继承该值。
  • 写比例数字，如2，则继承该比例，得到的值跟继承者的值有关。在上面这个例子中，如果body写的行高是2，则p的行高为2乘以p的font-size的16px，即32px。
  • 写百分比，如200%，继承计算出来的值。在上面这个例子中，p的行高就是body的font-size的20px乘以200%，得到40px。

附加：
你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

# 响应式

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

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

# (013)rem是什么？

rem是一个长度单位

  • px，绝对长度单位，常用
  • em，相对长度单位，相对于父元素，不常用
  • rem，相对长度单位，相对于根元素，常用于响应式布局

在body里定义一个font-size，以此为大小的依据。
一般将 html 或 body （html更多）的font-size设置为100px（为什么？在响应式中会提到）。
可以定在任何需要定义大小、长度的地方，如字体大小、高度宽度、内外边距。

# (014)如何实现响应式/响应式布局的常见方案？

方案一：使用rem

  • media-query，根据不同的屏幕宽度设置根元素 font-size
  • rem，基于根元素的相对单位
@media only screen and (max-width: 374px) {
	/* iphone5 或更小的尺寸 */
	/* 86px是iphone5的屏幕宽度320除以iphone6/7/8 和 iphoneX的屏幕宽度375，得到0.853的比例 */
	html{
		font-size: 86px;
	}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
	/* iphone6/7/8 和 iphoneX */
	html{
		font-size: 100px;
	}
}
@media only screen and (min-width: 414px) {
	/* iphone6p 或更大的尺寸 */
	/* 110px是iphone6的屏幕宽度414除以iphone6/7/8 和 iphoneX的屏幕宽度375，得到1.104的比例 */
	html{
		font-size: 110px;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

也可以：
<head>里边

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
1

CSS:

@media only screen and (max-device-width:480px) {/css样式/}
1

方案二：使用vw/vh

出现的原因和基础

  • rem的弊端：“阶梯”性（一定宽度范围内都相同，不是渐进的；而vw/vh能随着网页视口的尺寸变化）
  • 网页视口尺寸
    • window.screen.height 屏幕高度
    • window.innerHeight 网页视口高度（当前浏览器去掉上下两个默认的导航条后实际所视网页高度）
    • document.body.clientHeight body（所占据的）屏幕高度

vw / vh 单位

  • window.innerHeight === 100vh
  • window.innerWidth === 100vw
  • 1vh = 网页视口高度的 1/100，所以 10vh = 网页视口高度的 1/10
  • 1vw = 网页视口宽度的 1/100，所以 10vw = 网页视口宽度的 1/10

vmax / vmin

  • vmax 取视口宽高两者最大值，vmin 取视口宽高两者最小值
  • 举例：10vmax等于多少？
    • 如果是竖屏，10vmax = 10vh
    • 如果是横屏，10vmax = 10vw
    • 同理，vmin则反之。

# HTML&CSS面试题补充

# css动画

（课程一开始说要讲，实际上没讲，自己找了一些）

(015)css3动画和JS动画的区别？

  • js实现的是帧动画（使用定时器，每隔一段时间，更改当前的元素）
  • css实现的是补间动画（过渡动画，加过渡只要状态发生改变产生动画，多个节点来控制动画，性能会更好）
    其他区别：
    功能涵盖面，js比css大 实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
    对帧速表现不好的低版本浏览器，css3可以做到自然降级
    css动画有天然事件支持
    css3有兼容性问题
    在支持css3的浏览器尽可能的使用css3动画（适用于移动端开发）
  • transition animation
    transition 组合写法 transition: all 1s linear 1s

(016)如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

# CSS选择器

(017)CSS选择器有哪些？哪些属性可以继承？

  • id选择器（#myId）

  • 类选择器（.myClassName）

  • 标签选择器（div, h1, p）

  • 后代选择器（h1 p）

  • 相邻后代选择器（子）选择器（ul > li）

  • 兄弟选择器（li~a）

  • 相邻兄弟选择器（li+a）

  • 属性选择器（a[rel="external"]）

  • 伪类选择器（a:hover, li:nth-child(2)）

  • 伪元素选择器（::before, ::after）

  • 通配符选择器（*）

  • 可继承的属性：font-size, font-family, color

  • 不可继承的样式：border, padding, margin, width, height

# CSS优先级

(018)CSS优先级算法如何计算？

  • 元素选择符： 1
    class选择符： 10
    id选择符：100
    元素标签：1000
  • 优先级（就近原则）：!important > [ id > class > tag ]
  • !important 比内联优先级高
    !important声明的样式优先级最高，如果冲突再进行计算。
    如果优先级相同，则选择最后出现的样式。
    继承得到的样式的优先级最低。

# CSS3新特性

(019)CSS3新特性有哪些？

  • 新增各种CSS选择器（:not(.input) 所有class不是“input”的节点）
  • 圆角（border-radius: 8px;）
  • 多列布局（multi-columnlayout）
  • 阴影和反射（Shadow/Reflect）
  • 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
  • 文字渲染(Text-decoration)
  • word-wrap（对长的不可分割单词换行）word-wrap：break-word
  • font-face属性：定义自己的字体
  • 盒阴影：box-shadow: 10px 10px 5px #888888
  • 边框图片：border-image: url(border.png) 30 30 round
  • 线性渐变(gradient)
  • RGBA和透明度
  • 旋转(transform)
  • 缩放，定位，倾斜，动画，多背景
  • 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
  • background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

(020)CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的首个元素
  • p:last-of-type 选择属于其父元素的最后元素
  • p:only-of-type 选择属于其父元素唯一的元素
  • p:only-child 选择属于其父元素的唯一子元素
  • p:nth-child(2) 选择属于其父元素的第二个子元素
  • :enabled :disabled 表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

# 兼容性

(021)浏览器兼容性有哪些？

  1. 浏览器默认的 margin 和 padding 不同
    解决：加一个全局 *{ margin: 0; padding: 0; }来统一
  2. 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
    解决：(1)使用p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例;收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
    (2)可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  3. 超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
    解决：改变css 属性的排列顺序L-V-H-A( love hate ): a:link {} a:visited {} a:hover {} a:active {}
  4. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。
    hack：display:inline;将其转化为行内属性。
  5. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/

}
1
2
3
4
5
6
7
8
  1. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。
    解决方法:统一通过getAttribute()获取自定义属性。
  2. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。
    hack：给超出高度的标签设置overflow:hidden;
    或者设置行高line-height 小于你设置的高度。

(022)为什么要初始化CSS样式

  • 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }

{ text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(023)position:fixed;在android下无效怎么处理？

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

# css性能优化

(024)CSS优化，提高性能的方法有哪些？

  1. 加载性能：
  • CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。
  • CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0; 但margin-top: top;margin-bottom: bottom;执行的效率更高。
  1. 选择器性能：
  • 关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。
  1. 其他
    避免过度约束；
    避免后代选择符；
    避免链式选择符；
    最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么；
    避免！important，可以选择其他选择器；
    尽可能的精简规则，你可以合并不同类里的重复规则。

(025)阐述一下CSS Sprites 将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

# 实例

(026)用纯 CSS 创建一个三角形？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。

/* 
  采用的是相邻边框链接处的均分原理
  将元素的宽高设为0，只设置 border ,
  将任意三条边隐藏掉（颜色设为 transparent ）,剩下的就是一个三角形
 */
#demo{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12

(027)一个满屏“品”字布局如何设计？

  1. 第一种真正的品字：
    三块高宽是确定的；
    上面那块用margin: 0 auto;居中；
    下面两块用float或者inline-block不换行；
    用margin调整位置使他们居中。
  2. 第二种全屏的品字布局:
    上面的div设置成宽100%，
    下面的div分别宽50%，
    然后使用float或者inline使其不换行。

(028)有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。 外层div使用position：relative 高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

(029)视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

  1. CSS3实现
    优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
  2. jQuery实现
    通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
    优点：能兼容到各个版本的，效果可控性好
    缺点：开发起来对制作者要求高
  3. 插件实现方式
    例如：parallax-scrolling，兼容性十分好

(030)全屏滚动的原理是什么？用到了CSS的哪些属性？
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease

(031)上下margin重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。
例子：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>

<!--下面是css代码-->
.aside {
	margin-bottom: 100px;  
    width: 100px;
    height: 150px;
    background: #f66;
}
.main {
	margin-top: 100px;
    height: 200px;
    background: #fcc;
}
.text{
	/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
	overflow: hidden;  //此时已经触发了BFC属性。
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 其他

(032)::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

  • 在 CSS3 中 : 表示伪类， :: 表示伪元素
  • ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中
  • 想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

(033)width: auto 和 width: 100% 的区别

  • width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
  • width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

(034)display:none与visibility：hidden的区别？ display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

(035)CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

(036)style标签写在body后与body前有什么区别？ 页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

(037)display:inline-block 什么时候会显示间隙？ 有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

(038)li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。 解决方法：
可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

(039)在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。
偶数字号相对更容易和 web 设计的其他部分构成比例关系。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

(040)margin和padding分别适合什么场景使用？

  • 何时使用margin：
    需要在border外侧添加空白
    空白处不需要背景色
    上下相连的两个盒子之间的空白，需要相互抵消时。
  • 何时使用padding：
    需要在border内侧添加空白
    空白处需要背景颜色
    上下相连的两个盒子的空白，希望为两者之和。

(041)设置元素浮动后，该元素的display值是多少？
自动变成display:block

(042)使用 CSS 预处理器吗？ Less sass

← 前端知识（进阶） →