CSS复习总结

普通函数function(){} 与 ()=>{}箭头函数的差异

• 更简洁的语法
• 没有this
• 不能使用new 构造函数
• 不绑定arguments，用rest参数…解决
• 使用call()和apply()调用
• 捕获其所在上下文的 this 值，作为自己的 this 值
• 箭头函数没有原型属性
• 不能简单返回对象字面量
• 箭头函数不能当做Generator函数,不能使用yield关键字
• 箭头函数不能换行

display 属性规定元素应该生成的框的类型。

• none 此元素不会被显示。

• block 此元素将显示为块级元素，此元素前后会带有换行符。

• inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

• inline-block 行内块元素。（CSS2.1 新增的值）

• Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。

• Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符

• Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符

var const let区别

• const定义的变量不可以修改，而且必须初始化。
• var定义的变量可以修改，如果不初始化会输出undefined，不会报错
• let可以模拟块级作用域，函数内部使用let定义后，对函数外部无影响

css选择器

基础选择器：

• class选择器
• id选择器
• 通用选择器
• 标签选择器

组合选择器：

• 多元素选择(div,li,a 就是逗号 )
• 后代选择器(空格连接 ol li)
• 子元素（div>li）
• 同级选择器（+连接 a+a）

属性选择器：

• li[att] (具有att属性的li标签)
• li[att = val] (匹配所有att属性等于val的li元素)
• li[att ~= val] (匹配所有att属性具有多个空格分隔的值，其中一个值为val的li元素)
• li[att |= val] (匹配所有att属性具有多个连字号分隔，其中一个值以val开头的E元素，主要用于lang属性，"en”，“en-us”，“en-gb”)

伪类：

• li:first-child (第一个子元素)
• li:link (为被点击的链接)
• li:vieited (一被点击的链接)
• li:active (鼠标按下但是没有松开)
• li:hover (鼠标悬停)
• li:focus (获取当前焦点的li元素)
• li:lang© (匹配 lang 属性为c的li元素)
  (
  html 的 lang属性来设定不同语言的css样式或字体，
  告诉搜索引擎做精确的识别，
  让语言检查程序做语言识别，
  帮助翻译工具做识别，
  帮助网页阅读程序做识别等等
  )

选择器的优先级呢

行内样式>ID选择器>类，伪类和属性选择器>标签选择器,伪元素选择器>

CSS盒模型

就是用来装页面上的元素的矩形区域。浏览器在渲染的布局阶段的输出就是常说的盒子模型，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
box-sizing（有3个值）：border-box，padding-box，content-box。
从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的 宽度时存在着差异：
标准盒子模型的盒子宽度：border+padding+width
IE盒子模型的盒子宽度：width

在CSS3中引入了box-sizing属性，box-sizing：content-box；表示标准的盒子模型，box-sizing：border-box表示的是IE盒子模型
box-sizing:padding-box这个属性值的宽度包含了左右padding+width也很好理解

用view画一条0.5px的线

采用meta viewport的方式

< meta name=“viewport” content=“initial-scale=1.0,maximun-scale=1.0,user-scalable=no” />

link标签和import标签的区别

link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import应用的css会等到页面加载结束后加载
link是html标签，没有兼容性的问题，@import只有IE5以上才能识别。

transition和animation的区别

Animation和transition的大部分属性是相同的，他们都是随着时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition是2帧，从from…to ,而animation可以一帧一帧的。

并且animation的监听事件有三个
animationstart（动画开始方法）
animationend（动画结束方法）
animationiteration（重复运动方法）

监听transition的事件只有一个：
transitionend（结束的事件）

Flex布局

弹性布局，不多说阮一峰的博客。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex-direction（决定主轴的方向）（row | row-reverse | column | column-reverse）
flex-wrap（定义怎么换行）（nowrap | wrap | wrap-reverse）
justify-content(属性定义了项目在主轴上的对齐方式)（flex-start | flex-end | center | space-between | space-around）
align-items（在主轴上的对齐方式）（ flex-start | flex-end | center | baseline | stretch）
align-content（这是多根轴线的对齐方式）(flex-start | flex-end | center | space-between | space-around | stretch)

table布局

支持表格相关的属性值，table，table-row和table-cell。
CSS表格能够解决所有我们在使用决定定位和浮动定位进行多了布局时所遇到的问题，这种布局能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

display的属性：
table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染

不同的HTML标签所展示出来的不同特性都是在标签的背后添加css属性。

BFC（块级格式化上下文，用于清除浮动，放置margin重叠）

到底BFC是什么？

• 可以说是一种布局规则
  它有这些规则？
• 1.内部的盒子会在垂直方向，一个个的放置
• 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻BOX的上下margin会发生重叠。
• 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是一样；
• 4.BFC的区域不会与float重叠
• 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之也是如此
• 6.计算BFC的高度时，浮动元素也要参与计算

怎么触发BFC
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell，table-caption，inline-bloock中的任何一个
4.position的值不为 relative和static

关于js动画和css3动画的差异性

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead 完成（而js动画则会在main thread 执行，然后出发 compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别：
功能涵盖面，js比css大
实现、重构难度不一，CSS3比js更加简单，性能调优方向固定。
对帧速表现不好的低版本浏览器，css3可以做到自然降级
css动画有天然事件支持
css3有兼容性问题

快元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和padding以及高度和宽度。
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin 会失效

多行元素的文本省略号

	display: -webkit-box
	-webkit-box-orient:vertical
	-webkit-line-clamp:3
	overflow:hidden

visibility=hidden,opacity=0,display:none

opacity=0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，点击这个区域也能触发点击事件。
visibility=hidden，该元素隐藏起来，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
display= none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子元素）普通流的块元素垂直方向margin会重叠

重叠的结果：
两个相邻元素的外边距都是正数时，取他们两个之间较大的值。
两个相邻元素的外边距都是负数，取两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

position属性比较

固定定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间，Fixed定位的元素和其他元素重叠。
相对定位 relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进行移动，在使用相对定位时，无论是否进行移动，元素任然占据原来的空间。因此，移动元素会导致它覆盖其他框。
绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html> 。absolute定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
粘性定位sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的快级元素）定位。而后，元素定位表现为在跨越特性阈值前为相对定位，之后为固定定位。
默认定位 static：
默认值。没有定位，元素出现在正常的流中(忽略top，bottom，left，right 或者 z-index 申明)
inherit：
规定应该从父元素继承position属性的值。

浮动清除

1.使用带clear属性的空元素
2.使用css的 overflow 属性：给浮动元素的容器添加overflow：hidden；或overflow：auto；可以清除浮动
3.给浮动的元素的容器添加浮动：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局
4.使用邻接元素处理：什么都不做，给浮动元素后面的元素添加clear属性。
5.使用CSS的:after伪元素:给浮动元素的容器添加一个 :after伪元素实现元素末尾添加一个看不见的快元素清理浮动

CSS3中对溢出的处理

text-overflow属性，值为clip是修剪文本；ellipsis为显示省略符号来表被修剪的文本；string为使用给定的字符串来代表被修剪的文本。

三栏布局的实现方式

三列布局一般分为两种，两列定宽一列自适应，以及两侧定宽中间自适应
两列定宽一列自适应：
1.使用float+margin：
给div设置float:left ,left的div添加属性margin-right：left和center的间隔，right的div添加属性margin-left：left和center的宽度之和加上间隔
2.使用float+overflow:
给div设置float:left,再给right的div设置overflow:hidden。这两个盒子浮动，另一个盒子触动bfc达到自适应
3.使用position：
父级div设置position:relative，三个字级div设置绝对定位，要计算好盒子的宽度和间隔去设置位置，兼容性比较好。
4.使用table实现：
父级div设置为display:table,设置border-spacing：10px//这是间隔，取值随意。子级设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况。但是margin会失效，设计间隔会比较麻烦
5.flex：父级设置flex布局。left和center的div设置margin-right；然后right的div设置flex:1; 这样子right自适应，但是flex的兼容性不好
6.grid：
父级设置display:grid， 设置grid-template-columns属性,固定第一列第二列宽度，第三列auto 。
####CSS函数：calc和var
Calc用户动态计算长度值，任何长度值都可以使用calc函数计算，需要注意的是，在运算符前后都需要保留一个空格：例如：width:calc(100% - 10px);

var函数用于插入自定义的属性值，如果一个属性值在多处被使用

:root{
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

垂直居中的方法

（1）margin：auto

css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

定位为上下左右为0，margin：0可以实现脱离文档流的居中
（2）margin 负值法(已知需要垂直居中元素的高度)
（3）上面的margin的负值也可以改成transform:translateX（-50%）或者用transform：translateY(-50%)
（4）table-cell（未脱离文档流的）（本质还是使用vertical-align这个属性来实现垂直居中）

当然还有其他的方式可以让vertical-align这个属性生效。

• 父元素设置了 line-height （vertical-align不可继承，必须对子元素单独设置）
• 只有一个元素属于 inline 或者是 inline-block水平这个属性才会起作用（table-cell也可以理解为inline-block水平）（inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件）

div{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

（5）利用 flex ;
将父元素设置为display:flex,并且设置align-items:center;justify-content:center

垂直水平居中

1.父级元素设置text-alig:center,然后设置line-height和vertical-align使其垂直居中，最后设置font-size:0; 消除近似居中的bug
2.父级元素设置display:table-cell,vertical:middle达到水平垂直居中
3.绝对定位：父元素相对的定位，子元素绝对定位：然后通过transform或margin的组合使用达到垂直居中的效果，top:50%,left:50%,transform:translate(-50%,-50%)
4.绝对居中，当top或bottom为0时,margin-top&bottom设置auto的话会无限延申沾满空间并平分
5.父元素设置display：flex，子元素设置margin:auto
6.始床居中，vh为视口单位，50vh即是视口高度的一半，设置margin:50vh auto 0,transform:translate(-50%)

---

各种常见布局

https://juejin.im/post/6844903574929932301#heading-48

---

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM的变化影响到了预算内的集合属性比如宽高，浏览器重新计算元素的集合属性，其他元素的集合属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的不放呢重新绘制在屏幕上的过程称为重绘，

引起重排重绘的原因有：

• 添加或者删除可见的DOM元素
• 元素尺寸位置的改变
• 浏览器页面初始化
• 浏览器窗口大小发生改变，重排一定倒是重绘，重绘不一定导致重排。

减少重绘重排的方法有：
不在布局信息改变时做DOM查询
使用csstext，className一次性改变属性。
使用fragment

对于多次重排的元素怒，使用绝对定位脱离文档流，使其不影响其他元素