HTML

defer和async的区别

script

• 会阻碍HTML的解析。只有下载好并执行完脚本才会继续解析HTML。 async script
• 有可能会阻碍HTML的解析。解析HTML过程中进行脚本的异步下载，下载成功后立即执行。 defer script
• 不会阻碍HTML的解析。解析完成之后再按照顺序执行脚本。

---

CSS

CSS选择器优先级

!important 内联样式（1000） id选择器（100） 类和伪类选择器（10） 元素选择器（1） 通配（0） 继承的样式（没有优先级）

标准盒模型、IE盒模型

box-sizing

• content-box 默认值，标准盒模型。 width/height = content。
• border-box IE盒模型。 width/height = content + padding + border。 解决：width设为100%且要设置padding时会溢出；减少计算。

垂直外边距重叠

margin collaspe

• 发生垂直外边距重叠的是兄弟元素。 相邻外边距中取最大值。

• 发生垂直外边距重叠的是父子元素。 父元素padding/border=1px，height-1px。（子元素在父元素的content，设置padding/border可以将父子元素的margin隔开） 在子元素前面放一个空的块标签。 给子元素添加.clearfix::before{ content: ""; diasplay:block; }

高度塌陷

如果父元素包含的元素全是浮动元素，则该元素高度变成0。

//利用after伪类
.clearfix::after{
	content: "";
	clear: both;
	//添的是内联盒子，要设成块级盒子clear才生效
	display: block;
}
/*
ie
.clearfix{
	zoom: 1;
}
*/

//开启BFC

BFC

BFC

• Block Formatting Contexts
• 具有BFC特性的元素可以看作是隔离的独立容器，容器内的元素不会在布局上影响到外面的元素。
• 默认关闭。

开启后的特性

• 父元素的垂直外边距不会和子元素重叠。
• 不会被浮动元素覆盖。
• 可以包含浮动的子元素。

触发条件

• 根元素。
• 开启定位，position不是static或者relative。
• 开启浮动，display: float。
• 开启display: inline-block、table-cell。
• 设元素为flex子项或grid子项。
• 设overflow为非visible的值，设置为hidden为副作用最小的方法。

居中

/* children是内联元素 */
/* 垂直居中 */
/* 
	flex 
*/
.father{
	display: flex;
	align-items: center;
}
.father{
	display: flex;
	flex-wrap: wrap;
	/*该属性要设置wrap才会生效*/
	align-content: center;
}
/*
	line-height（适用单行文本）
*/
.father{
	height: 200px;
	line-height: 200px;
}
/*
	table
*/
.father{
	display: table-cell;
	vertical-align: middle;
}




/* children是块级元素 */
/* 水平垂直居中 */
/*
	flex
*/
.father{
	display: flex;
	justify-content: center;
	align-items: center;
}
/*
	相对定位+绝对定位
*/
.father{
	position: relative;
}
.children{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*
	绝对定位+margin（children必须有宽高）
*/
.father{
	position: relative;
}
.children{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

flex

flex-grow

• 默认值0。 flex-shrink
• 默认值1。 flex-basis
• 默认值auto。元素在主轴上占的初始大小。

/* flex: 0 */
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;

/* flex: 1 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

/* flex: auto */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

grid

.father{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas:
	"a1 a1 a2"
	"a1 a1 a2"
	"a3 a3 a3";
	/*
	等价于
	grid-template-areas:
	"a1 a1 a2" 1fr
	"a1 a1 a2" 1fr
	"a3 a3 a3" 1fr
	/1fr 1fr 1fr(这一行指定的是列大小)
	*/
}
.children1{
	grid-area: a1;
}
.children2{
	grid-area: a2;
}
.children3{
	grid-area: a3;
}

子项分组布局

/* 3个在左，2个在右 */
.father{
	display: flex;
}
.chilren:nth-child(3){
	margin-right: auto;
}

等高布局

.father{
	display: flex;
}

两栏布局

左侧固定，右侧自适应。

/*
	左侧浮动
	右侧margin-left
*/
.outer{
	height: 100px;
}
.left{
	float: left;
	width: 200px;
	height: 100%;
}
.right{
	margin-left: 200px;
	height: 100%;
}

/*
	左侧浮动
	右侧开启bfc
*/
.outer{
	height: 100px;
}
.left{
	float: left;
	width: 200px;
	height: 100%;
}
.right{
	overflow: auto;
	height: 100%;
}

/*
	flex布局
	左侧固定宽度
	右侧flex：1
*/
.outer{
	display: flex;
	height: 100px;
}
.left{
	width: 200px;
	height: 100%;
}
.right{
	flex: 1;
	height: 100%;
}

/*
	父元素开启相对定位
	左侧绝对定位
	右侧margin-left
*/
.outer{
	position: relative;
	height: 100px;
}
.left{
	position: absolute;
	width: 200px;
	height: 100%;
}
.right{
	margin-left: 200px;
	height: 100%;
}

/*
	父元素相对定位
	右侧绝对定位，left=宽度
*/
.outer{
	position: relative;
	height: 100px;
}
.left{
	width: 200px;
	height: 100%;
}
.right{
	position: absolute;
	left: 200px;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
}

圣杯布局、双飞翼布局（经典三分栏布局）

目的

• 中间一栏最先加载和渲染。

两侧固定，中间自适应。

圣杯布局

<div class="container clearfix">
	<div classs="center"></div>
	<div classs="left"></div>
	<div classs="right"></div>
</div>

/*
	使用float布局。
	container设置padding，修复高度塌陷
	center宽度100%
	left的margin负值，再向左移防止覆盖中间
	right的margin负值
*/
.container{
	padding-left: 200px;
	padding-right: 150px;
}
.center, .left, .right{
	float: left;
}
.center{
	width: 100%;
}
.left{
	width: 200px;
	margin-left: -100%;
	position: relative;
	left: 200px;
}
.right{
	width: 150px;
	margin-right: -150px;
}
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}

双飞翼布局

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

/*
	float布局
	wrapper宽度100%
	center设置margin留给left和right
	left设置margin负值
	right设置margin负值
*/
.wrapper, .left, .right{
	float: left;
}
.wrapper{
	width: 100%;
}
.center{
	margin-left: 200px;
	margin-right: 150px;
}
.left{
	width: 200px;
	margin-left: -100%;
}
.right{
	width: 150px;
	margin-right: -150px;
}