【记录】前端知识点 - HTML、CSS

HTML

async和defer的区别

script

• 会阻塞HTML的解析。只有下载好并执行完脚本才会继续解析HTML。

async script

• 有可能会阻塞HTML的解析。解析HTML过程中进行脚本的异步下载，下载成功后如果HTML还没解析完，则阻塞HTML的解析立即执行脚本。谁先到谁先执行。

defer script

• 不会阻塞HTML的解析。解析完HTML后，再按照顺序执行脚本。

图解

href和src的区别

href

• 指向网络资源所在位置，确定网络资源和当前文档的关系。
• 遇到href会并行下载资源，并且不会停止对当前文档的处理。

<a href="url">
<link type="text/css" rel="stylesheet" href="common.css">

src

• 下载外部资源应用到当前页面。
• 遇到src会暂停其他资源的下载和处理，直到该资源加载或执行完毕。

<img src="url">

---

CSS

CSS选择器优先级

• !important
• 内联样式（1000）
  style=“color: green”
• ID选择器（0100）
  #app
• 类、伪类、属性选择器（0010）
  .foo, :first-child, div[class=“foo”]
• 标签、伪元素选择器（0001）
  div::first-line
• 通配符、子类选择器、兄弟选择器（0000）
  *、>、+
• 继承的样式（没有权值）

标准盒模型、IE盒模型

box-sizing

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

不声明doctype类型，IE浏览器会将盒模型解释为IE盒模型，其余浏览器会解释为W3C盒模型。声明了则统一解释为W3C盒模型。

垂直外边距重叠

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: absolute、fixed（不是static或者relative或者sticky。
• 开启浮动，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;
}

CSS选择器解析为什么是从右往左？

为什么呢？

CSS预处理器是什么？有啥用处？

CSS预处理器通过给CSS添加变量、嵌套、函数、计算等可编程特性，通过工程化的手段让CSS更易维护，提高开发效率。

用处

• 提供嵌套语法。
• 提供简洁的变量定义，方便样式复用、代码维护。

谈谈CSS预处理器

Sass和Less的区别（为什么选择Sass而不是Less？）

（1）环境

• Sass在服务端运行。
• Less可以在服务端，也可以在浏览器上运行。

（2）作用域

• Sass在作用域里重新赋值而不影响外部。
• Less以全局的最后一次赋值为准。

（3）逻辑语句

• Sass支持条件语句if、else、for循环等语句。
• Less只有if语句。

Sass和Scss的关系

Sass3.0以前的文件扩展名是.sass，语法中没有大括号{}、严格的代码缩进。
Sass3.0以后的文件扩展名是.scss，语法更贴近css写法，有大括号{}、严格的代码缩进。

dart-sass和node-sass

dart-sass

• 用dart写的sass编译器，对css新特性支持较好。
• 保存后生效。
• 性能更好。

node-sass

• 用c++写的sass编译器。
• 实时自动编译。

sass发展史