心得：css学习很久远了，很多基础知识有些生疏了，通过今天的整理感觉基础牢固了很多，基础不牢，地动山摇，找到之前项目中效率不高的原因了呀。
1.标准盒模型（W3C）和怪异盒模型(IE浏览器)
- 在标准模式下，一个块的总宽度= width + padding(左右) + border(左右)+ margin(左右)
- 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
2.垂直居中的方案
1）line-height = height
可以让块级和⾏内元素（行内非替换元素，⾏内替换元素（eg:
)，⾏内块级元素）的⽂本垂直居中。
补充：ｌｉｎｅ－ｈｅｉｇｈｔ和ｈｅｉｇｈｔ的区别？
-
- ｈｅｉｇｈｔ就是元素的高，固定值不变。
- ｌｉｎｅ－ｈｅｉｇｈｔ是行高，是每一行文字的高，如果换行，height＝行数＊ｌｉｎｅ－ｈｅｉｇｈｔ，是动态变化的。
2）定位
或者
width: 200px
height:200px
position: absolute; （需要设置⾼）
left: 0;
right: 0;
margin: 0 auto;
或者
position: absolute;
top:50%
height: 200px;
margin-top: -100px （需要居中的元素使⽤）
3）flex布局方案1 (块级元素)
display: flex;
align-items: center (flex item居中)
4）flex布局方案2：块级元素和行内元素均可
3.flex布局
4.transition 和animasition动画的区别
5.为什么CSS动画要更高效呢？
第一点
从实现动画的复杂度来看，CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果
第二点
编码的高效，采用 JS 去实现的动画，无论多简单的动画，都需要去控制整个过程，当然你可能会说可以采用一些库来解决这些问题，但是这些库的实际运行可能要比原生实现的效率要低的多
第三点
性能的高效，在我们前面讲到了回流和重绘，如果我们要操作一个元素向右移动，我们可能需要控制 dom.style.left 属性，每次来改变元素的位置，而结合我们所说的，几何属性的改变必然会引起回流，回流必然引起重绘，可想而知如果我们采用 JS 来实现动画，这个代价有多大，这会造成浏览器在不断的计算页面，从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧
而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘
当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU
总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画
那我们什么时候使用 CSS 动画，什么时候使用 JS 动画呢？
我个人觉得
只要能用 CSS 实现的动画，就不要采用 JS 去实现，可以多采用 CSS 预处理器去做更多复杂的动画，就像我之前用 SCSS 做的流星雨动画一样
如果动画相较复杂，我们可以采用 JS + canvas 去尝试，能不能实现
最后再考虑纯 JS 实现
6.BFC：就是一个独立的容器，按照一定的规则对容器里面的子元素进行摆放，且不会影响外边的元素。
问题：高度塌陷问题
原因：浮动，脱离标准流
原则：如果一个元素有BFC，则内部元素再怎么变动都不会影响外面元素
对策：触发一个新的BFC，清除浮动
-
- overflow非visible
- float的值left/right
- display:inline-block/table-cell
- position:absolute/fixed
7.移动端适配方案
8.ｉｍｇ中的ｔｉｔｌｅ和ａｌｔ有什么区别
区别一：title：鼠标移入图片时显示的值；alt:图片无法显示时加载的值。
区别二：有利于SEO优化，ｓｐｉｄｅｒ抓取不到图片的内容，因此需要ａｌｔ属性来描述这张图的内容。
９．ｐｎｇ＼ｊｐｇ＼ｇｉｆ
- ｐｎｇ：无损压缩，体积大，适合做小图标，不适合做ｂａｎｎｅｒ图
- ｊｐｇ：压缩算法、体积小、失真，适合做中大型图
- ｇｉｆ：适合做动图
- ｗｅｂｐ：结合ｐｎｇ和ｊｐｇ的优点，支持有损和无损压缩，体积小，但是兼容性不好
１０.ｃｓｓ属性哪些可以继承？哪些不可继承？
- 可以继承：ｆｏｎｔ－ｓｉｚｅ、ｃｏｌｏｒ、ｌｉｎｅ－ｈｅｉｇｈｔ、ｔｅｘｔ－ａｌｉｇｎ、小手
- 不可以继承：ｂｏｒｄｅｒ、ｐａｄｄｉｎｇ、ｍａｒｇｉｎ
１１.选择器的权重
- ！ｉｍｐｏｒｔａｎｔ
- 内联样式
- iｄ选择器
- 类、属性选择器、伪类、
- 元素选择器、伪元素
- 通配符
１２．用ｃｓｓ画一个三角形（ｂｏｒｄｅｒ）
.div {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid blue;
transform: rotate(45deg);
}
１３.ｄｉｓｐｌａｙ有哪些值？
- ｉｎｌｉｎｅ－ｂｌｏｃｋ是可以设置宽高的，同时不会独占一行。
- ｄｉｓｐｌａｙ：ｎｏｎｅ只是隐藏掉，但是ｄｏｍ中是依然存在的。
１４.position的值及作用？
- static：默认值；UI框架中的弹窗，我想取消其定位效果，就用默认值盖掉（想让元素回归到正常的文档流中、不需要特殊定位）
- absolute：绝对定位；相对于第一个有relative的父元素。脱标（原来的位置腾空）
- relative：相对于自己原来的位置去定位，不脱标（原来的位置不腾空）
- fixed：固定定位；根据浏览器视口进行定位，此时记得要给body设置一个高度才能滚动，测试其效果
- sticky：是结合relative和fixed的一个值。未到达“黏附”位置时，元素就像relative，不脱标；一旦到达“黏附”位置，就像fixed,不随页面滚动，此时依然是不脱标的。
15.双飞翼布局
- 子元素三个div全部float:left
- 左边元素margin-left:-100%
- 右边元素margin-right:200px;（等于width就行了)
<style>
body {
height: 100vh;
width: 100vw;
}
.main > div{
float: left;
}
.l {
width: 200px;
height: 100vh;
background-color: green;
margin-left: -100%;
}
.c {
background-color: red;
width: 100%;
height: 100vh;
}
.r {
width: 200px;
height: 100vh;
background-color: blue;
margin-left: -200px;
}
.text {
padding: 0 200px;
}
</style>
</head>
<body>
<div class="main">
<div class="c">
<div class="text">中</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>
16.关于reset.css文件：
- 官网有基础库,但是性能不是很好===》normalize.css推荐，增强跨浏览器一致性
- linkcss文件，href="reset.css"
17.雪碧图是什么？有什么优点？
- 是什么？把多个小图标合并成一个大图片
- 使用：
-
- background-position：
- 优缺点：
-
- 优点：减少http请求次数，提升性能
- 缺点：维护性较差，比如图片位置的修改和宽高的修改
18.display:none和visibility:hidden区别
a.占不占位置
- display不占用位置
-
- 原因：由浏览器渲染机制决定
- 浏览器输入url发生了什么？
-
-
- 输入url===》发送网络请求给服务器===》解析器：js+dom+css===》
-
-
-
- 如何解析dom?生成dom树（）
- 如何解析cssom？把样式罗列成一个树
- 合并上述二者===>render===>布局layout（决定位置）===>绘制paint===>合并
- visibility占用位置
-
- visibility确实存在，dom和cssdom都有，且render，所以有位置
- display解析了dom和cssdom,但是并没有render,所以没有位置
b.都会产生一次重绘，除此之外，display还会引起一次回流。
回流一定造成重绘，但是重绘不一定引起回流。
- 回流：改变元素的位置、显示隐藏元素
- 重绘：样式改变
19.opacity和rgba的区别
共同性：实现透明效果
opacity:0-1;1不透明，0完全透明/子元素会继承父元素的opacity属性
rgba:子元素不继承
补充：ｌｉｎｅ－ｈｅｉｇｈｔ和ｈｅｉｇｈｔ的区别？
-
- ｈｅｉｇｈｔ就是元素的高，固定值不变。
- ｌｉｎｅ－ｈｅｉｇｈｔ是行高，是每一行文字的高，如果换行，height＝行数＊ｌｉｎｅ－ｈｅｉｇｈｔ，是动态变化的。
2）定位
或者
width: 200px
height:200px
position: absolute; （需要设置⾼）
left: 0;
right: 0;
margin: 0 auto;
或者
position: absolute;
top:50%
height: 200px;
margin-top: -100px （需要居中的元素使⽤）
3）flex布局方案1 (块级元素)
display: flex;
align-items: center (flex item居中)
4）flex布局方案2：块级元素和行内元素均可
3.flex布局
4.transition 和animasition动画的区别
5.为什么CSS动画要更高效呢？
第一点
从实现动画的复杂度来看，CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果
第二点
编码的高效，采用 JS 去实现的动画，无论多简单的动画，都需要去控制整个过程，当然你可能会说可以采用一些库来解决这些问题，但是这些库的实际运行可能要比原生实现的效率要低的多
第三点
性能的高效，在我们前面讲到了回流和重绘，如果我们要操作一个元素向右移动，我们可能需要控制 dom.style.left 属性，每次来改变元素的位置，而结合我们所说的，几何属性的改变必然会引起回流，回流必然引起重绘，可想而知如果我们采用 JS 来实现动画，这个代价有多大，这会造成浏览器在不断的计算页面，从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧
而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘
当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU
总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画
那我们什么时候使用 CSS 动画，什么时候使用 JS 动画呢？
我个人觉得
只要能用 CSS 实现的动画，就不要采用 JS 去实现，可以多采用 CSS 预处理器去做更多复杂的动画，就像我之前用 SCSS 做的流星雨动画一样
如果动画相较复杂，我们可以采用 JS + canvas 去尝试，能不能实现
最后再考虑纯 JS 实现
6.BFC：就是一个独立的容器，按照一定的规则对容器里面的子元素进行摆放，且不会影响外边的元素。
问题：高度塌陷问题
原因：浮动，脱离标准流
原则：如果一个元素有BFC，则内部元素再怎么变动都不会影响外面元素
对策：触发一个新的BFC，清除浮动
-
- overflow非visible
- float的值left/right
- display:inline-block/table-cell
- position:absolute/fixed
7.移动端适配方案
8.ｉｍｇ中的ｔｉｔｌｅ和ａｌｔ有什么区别
区别一：title：鼠标移入图片时显示的值；alt:图片无法显示时加载的值。
区别二：有利于SEO优化，ｓｐｉｄｅｒ抓取不到图片的内容，因此需要ａｌｔ属性来描述这张图的内容。
９．ｐｎｇ＼ｊｐｇ＼ｇｉｆ
- ｐｎｇ：无损压缩，体积大，适合做小图标，不适合做ｂａｎｎｅｒ图
- ｊｐｇ：压缩算法、体积小、失真，适合做中大型图
- ｇｉｆ：适合做动图
- ｗｅｂｐ：结合ｐｎｇ和ｊｐｇ的优点，支持有损和无损压缩，体积小，但是兼容性不好
１０.ｃｓｓ属性哪些可以继承？哪些不可继承？
- 可以继承：ｆｏｎｔ－ｓｉｚｅ、ｃｏｌｏｒ、ｌｉｎｅ－ｈｅｉｇｈｔ、ｔｅｘｔ－ａｌｉｇｎ、小手
- 不可以继承：ｂｏｒｄｅｒ、ｐａｄｄｉｎｇ、ｍａｒｇｉｎ
１１.选择器的权重
- ！ｉｍｐｏｒｔａｎｔ
- 内联样式
- iｄ选择器
- 类、属性选择器、伪类、
- 元素选择器、伪元素
- 通配符
１２．用ｃｓｓ画一个三角形（ｂｏｒｄｅｒ）
.div {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid blue;
transform: rotate(45deg);
}
１３.ｄｉｓｐｌａｙ有哪些值？
- ｉｎｌｉｎｅ－ｂｌｏｃｋ是可以设置宽高的，同时不会独占一行。
- ｄｉｓｐｌａｙ：ｎｏｎｅ只是隐藏掉，但是ｄｏｍ中是依然存在的。
１４.position的值及作用？
- static：默认值；UI框架中的弹窗，我想取消其定位效果，就用默认值盖掉（想让元素回归到正常的文档流中、不需要特殊定位）
- absolute：绝对定位；相对于第一个有relative的父元素。脱标（原来的位置腾空）
- relative：相对于自己原来的位置去定位，不脱标（原来的位置不腾空）
- fixed：固定定位；根据浏览器视口进行定位，此时记得要给body设置一个高度才能滚动，测试其效果
- sticky：是结合relative和fixed的一个值。未到达“黏附”位置时，元素就像relative，不脱标；一旦到达“黏附”位置，就像fixed,不随页面滚动，此时依然是不脱标的。
15.双飞翼布局
- 子元素三个div全部float:left
- 左边元素margin-left:-100%
- 右边元素margin-right:200px;（等于width就行了)
<style>
body {
height: 100vh;
width: 100vw;
}
.main > div{
float: left;
}
.l {
width: 200px;
height: 100vh;
background-color: green;
margin-left: -100%;
}
.c {
background-color: red;
width: 100%;
height: 100vh;
}
.r {
width: 200px;
height: 100vh;
background-color: blue;
margin-left: -200px;
}
.text {
padding: 0 200px;
}
</style>
</head>
<body>
<div class="main">
<div class="c">
<div class="text">中</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>
16.关于reset.css文件：
- 官网有基础库,但是性能不是很好===》normalize.css推荐，增强跨浏览器一致性
- linkcss文件，href="reset.css"
17.雪碧图是什么？有什么优点？
- 是什么？把多个小图标合并成一个大图片
- 使用：
-
- background-position：
- 优缺点：
-
- 优点：减少http请求次数，提升性能
- 缺点：维护性较差，比如图片位置的修改和宽高的修改
18.display:none和visibility:hidden区别
a.占不占位置
- display不占用位置
-
- 原因：由浏览器渲染机制决定
- 浏览器输入url发生了什么？
-
-
- 输入url===》发送网络请求给服务器===》解析器：js+dom+css===》
-
-
-
-
- 如何解析dom?生成dom树（）
- 如何解析cssom？把样式罗列成一个树
- 合并上述二者===>render===>布局layout（决定位置）===>绘制paint===>合并
-
-
- visibility占用位置
-
- visibility确实存在，dom和cssdom都有，且render，所以有位置
- display解析了dom和cssdom,但是并没有render,所以没有位置
b.都会产生一次重绘，除此之外，display还会引起一次回流。
回流一定造成重绘，但是重绘不一定引起回流。
- 回流：改变元素的位置、显示隐藏元素
- 重绘：样式改变
19.opacity和rgba的区别
共同性：实现透明效果
opacity:0-1;1不透明，0完全透明/子元素会继承父元素的opacity属性
rgba:子元素不继承
