2019/10/22 ---纸鸢摇曳 挥散天边夕阳 秋千架下看萤尾蘸满月光
一：CSS3的新特性：：
(1):CSS3完善了选择器（包括属性，关系，伪类和伪元素等），其书写方式与jQuery的选择器类似，既能避免添加多余的HTML元素属性名（例如id，name,class)等，还能保持页面的整洁
(2):CSS3新增的阴影，圆角，Web字体，渐变能替代以往得用图像才能实现的效果，这样既能减少HTTP请求数，还能提升页面的加载速度。
(3):CSS3对背景不再局限于颜色，填充方式，定位，现在可以一次性使用多张背景图，控制背景尺寸，裁剪背景图片等。
(4):CSS3引入了过渡和动画两个属性，可处理简单或复杂的样式变化，不仅能让页面生动真实，还能摆脱对Flash的依赖，远离打断的JavaScript脚本。
(5):CSS3有两种全新的布局：多列布局和伸缩盒。多列布局可以轻松的让文本呈现出报纸杂志那样的多列排版，以往是浮动或定位来实现。伸缩盒是一种响应式布局，能轻松实现各种复杂布局（尤其是在移动端），使上下居中，多列等高，宽度自适应，绝对底部的实现变得非常简单，只需要几个属性就行
(6):CSS3可让元素进行2D或3D变形，包括旋转，移动，缩放和扭曲。在动画中使用3D的变形会新增一个渲染层，将重绘减少到一次，提升动画性能。
1:什么是CSS预处理器
答案：CSS预处理器为CSS增加变成特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用，代码冗余，可维护性低的问题，对CSS来说可谓是雪中送炭。常用的预处理器有Less,Sass,Stylus
2:CSS预处理器有哪些优缺点？
(1):用变量存储对此引用的信息，只需修改一个地方，就能让所有引用之处都随之改变
(2):新语法中的混合能够重用一段样式代码，可用混合将自动截取或列表中的小箭头样式组织在一起，需要这段代码的选择器只需简单引入即可
(3):内置丰富的函数，可处理颜色，字符串，数字和选择器等，也可以自定义函数，适应特定需求
(4):可像JavaScript那样使用数学运算，条件判断和循环，几句代码就能描述一大段CSS样式
(5):选择器可嵌套选择器，沿用嵌套的选择器链向上组合形成最终的选择器，嵌套的形式模拟出了HTML的层级结构，同时形成了命名空间，选择器之间的关系更加明显
(6):导入规则可让各部分代码保持独立，模块化管理，各个导入的文件最终被编译生成一个CSS文件
CSS预处理器的缺点如下：</br>
(1):通过编译生成CSS文件，降低了对CSS文件的控制力，如果书写不当，那么编译出的CSS文件将会变的巨大而负责</br>
(2):调试难度增加，在浏览器中调试的是编译后的CSS文件，并不是编译前的</br>
(3):带来了一定的学习成本，新人需要学习预处理器的语法规则</br>
盒模型
每个HTML元素都可看成是一个矩形的盒子)(box),每个盒子都会包含外边距，边框，内边距以及内容。如果将元素盒子比作现实生活中的纸盒的话：
(1):外边距-margin:盒子与盒子之间的距离
(2):边框-border：盒子纸板的厚度
(3):内边距-padding：盒子中装的东西与盒子之间的距离
(4):内容-content:盒子里装的东西
页面布局也就是盒子的摆放有两种方式：
(1):正常流（又叫做常规流或者文档流）：元素会按照其在HTML中的位置从左到右，从上到下按顺序排布
(2):脱离文档流：就是不按顺序来排布，常用的实现方法有浮动(float)和绝对定位(absolute positioning)
盒模型
所谓的盒模型就是从盒子顶部俯视所得到的一张平面图，用来描述元素所占用的空间。有两种盒模型：W3C盒模型和IE盒模型
box-sizing
CSS3中新增了一种能够更改盒模型的属性：box-sizing.这个属性有以下值：
(1):content-box:对应W3C盒模型
(2):border-box:对应IE盒模型
IE盒模型的优点：
无论内外边距和边框如何改变，都不会影响元素的尺寸，不会打乱整体布局。尤其是在精度要求比较高的时候
盒子的显示类型：
HTML元素只有两种默认的盒类型，即块级元素和行内元素，其中行内元素不可定义CSS属性width,height,上下margin和上下padding.常用的span和div分别是行内元素和块级元素
**
一：什么是外边距塌陷？
答：margin塌陷也成为外边距合并，是指两个在正常流中相邻的块级元素的外边距，组合在一起会变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种情况。通常由四种情况会发生塌陷：
(1):父元素（没有上边距和上内边距）和第一个子元素，在第一个元素之前没有内容，同时为其定义了上外边距
(2):父元素（没有下边距和下内边距）和最后一个子元素，在最后一个元素之后没有内容，同时为其定义了下外边距
(3):两个相邻的兄弟元素，分别为其定义了下外边距和上外边距
(4):一个空的元素(没有高，边框，内边距和内容)，只定义了上外边距
二：当出现外边距塌陷时，外边距之间的计算方式是怎样的？
答：元素的外边距可以用正数或复数来指定，使用不同的组合会改变外边距的计算方式，总共有三种组合方式：
(1):两个都是证书，取较大的值
(2):两个都是负数，取绝对值较大的值
(3):一正一负，取两个值相加的盒
**
元素盒类型
在CSS中用display属性指定元素的盒类型，最常用的两个盒类型是block和inline.
(1)block可以生成块级元素，每个元素将独占一行
(2)inline可以生成行内元素，多个行内元素只要宽度之和小于容器的宽度，就可排列在一行中。
list-item
list-item指定元素为列表，相当于变成了li元素。可以使用列表相关的CSS属性list-style-position和list-style-type.
2019/10/25 ---背枕千家灯火 醉里寻常 风轻水动依稀是稻香
用表格元素布局已经不再提倡，但是用CSS将元素变成表格，在布局，这种方式不但可以弥补曾经的不足，还能取得一些起效
(1):能够使用媒体查询，实现响应式布局；
(2):将某些信息(如联系方式，友情链接等)固定在页面底部，即使中间没有内容，也不会移上来。
(3):实现动态内容的多列高度相等
(4):让尺寸不固定的元素垂直居中
run-in:将CSS属性display定义为run-in后，会根据周围元素来决定盒子类型。其特点有三
(1):如果定义为run-in的元素包含一个块级元素，那么他也可被理解为块级元素。
(2):定义为run-in的元素的相邻兄弟元素(位于元素后面的兄弟元素)如果是块级元素，那么这个兄弟元素就会变成行内元素。
(3):如果是其他情况，那么run-in元素可被理解为块级元素
第二个特点并不是所有浏览器都能支持，下面的代码在IE9中能很好的实现，但是在其他浏览器比如chrome和Firefox中就不能实现图中效果。
<span style="display:run-inlborder:1px solid #000">
兄弟元素的第一个行内元素
</span>
<p>相邻的兄弟元素是块级元素</p>
inline-block
用inline-block能够创建混合了块和行内特征的元素，可不再借助浮动，就能让元素排列在一行中。不过这样排列会导致元素之间有间隙。
这是因为在编写HTML文档的时候，为了便于阅读，通常就会将结构格式化，格式化后的文档就会包含换行符，还会包含空白符。浏览器会将这些额外的字符合并成一个空白符。
去除空白符的的三种解决办法：
(1):在父元素div中定义css属性font-size为0
(2):将三个span元素写在一行中
(3):给父元素div定义负的css属性letter-spacing,减少字符之间的间距，再把span元素中的letter-spacing定义为0，清除间距。
伸缩盒 伸缩盒是css新增一的一种盒类型，它能让普通元素变成一个伸缩容器，在伸缩盒容器中可对一行条目进行排列，对齐和空间分配。用伸缩盒将元素排列在一行中，不会像使用inline-block那样有间隙问题 大致思路如下： (1):条目的宽度可用百分比适配屏幕，但也只能设置个大约值，避免3个条目由于宽度过大而变成两行。 (2):用浮动的方式排成一列 (3):条目的高度可继承容器的高度 (4):完成这些后，还得考虑1像素的边框
如果要创建一个伸缩容器，不仅需要定义标准属性，还得借用渐进增强的思想，既要支持早期的草案，还要支持浏览器的方案。(可以在属性值前加上浏览器前缀)
.flex{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
每个伸缩容器都包含两个轴，主轴(main axis)和侧轴 (cross axis).元素可分别在主轴和侧轴上对齐。
display:none与visibility:hidden都可隐藏元素，二者有何区别？
答案：将CSS属性display定义为none后，相当于元素没有了后代元素，在正常流中不占用任何空间，元素的真是尺寸会丢失，还对导致浏览器的重排(reflow)和重绘(repaint).而将css属性visibility定义为hidden后，在正常流中还是会占用空间，仍具有元素的真实尺寸，只会导致浏览器重绘。用例展示： (1)父元素用display隐藏后，子元素中的背景图像不会加载。
<div style="display:none">
<div style="background:url(1.png)"></div>
</div>
(2)父元素用visibility隐藏后，子元素的中的背景图像仍然会加载
<div style="visivility:hidden">
<div style="background:url(1.png)"></div>
</div>
2019/10/27 --- 行歌曲唱 落花锦衣为裳（转载）
作者：天方夜
链接：zhuanlan.zhihu.com/p/29418126
著作权归作者所有。
本文不是关于浏览器渲染的底层原理或前端优化具体细节的讲解，而是关于浏览器对页面的渲染——这一过程的描述及其背后原理的解释。
这是因为前端优化是一个非常庞大且零散的知识集合，一篇文章如果要写优化的具体方法恐怕只能做一些有限的列举。然而，如果了解清楚浏览器的渲染过程、渲染原理，其实就掌握了指导原则。根据优化原则，可以实现出无数种具体的优化方案，各种预编译、预加载、资源合并、按需加载方案都是针对浏览器渲染习惯的优化。
关键渲染路径
关键渲染路径提到页面渲染，有几个相关度非常高的概念，最重要的是关键渲染路径，其他几个概念都可以从它展开，下面稍作说明。
关键渲染路径（Critical Rendering Path）是指与当前用户操作有关的内容。例如用户刚刚打开一个页面，首屏的显示就是当前用户操作相关的内容，具体就是浏览器收到 HTML、CSS 和 JavaScript 等资源并对其进行处理从而渲染出 Web 页面。
了解浏览器渲染的过程与原理，很大程度上是为了优化关键渲染路径，但优化应该是针对具体问题的解决方案，所以优化没有一定之规。例如为了保障首屏内容的最快速显示，通常会提到渐进式页面渲染，但是为了渐进式页面渲染，就需要做资源的拆分，那么以什么粒度拆分、要不要拆分，不同页面、不同场景策略不同。具体方案的确定既要考虑体验问题，也要考虑工程问题。
浏览器渲染页面 浏览器渲染页面的过程从耗时的角度---浏览器请求---加载---渲染一个页面， 时间花在下面五件事情上：
- 1：DNS
- 2：查询TCP
- 3：连接HTTP
- 4：请求即响应服务器
- 5：响应客户端渲染 本文讨论第五个部分，即浏览器对内容的渲染.
这一部分（渲染树构建、布局及绘制），又可以分为下面五个步骤：
- 处理 HTML 标记并构建 DOM 树
- 处理 CSS 标记并构建 CSSOM 树
- 将 DOM 与 CSSOM 合并成一个渲染树
- 根据渲染树来布局以计算每个节点的几何信息
- 将各个节点绘制到屏幕上。
需要明白，这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM，下面就来看看它们的影响方式。
阻塞渲染：CSS 与 JavaScript
谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。
同时，由于下面两点：
1：默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。
2：JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。
存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。另外：
- 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
- JavaScript 可以查询和修改 DOM 与 CSSOM
- CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
所以，script 标签的位置很重要。
实际使用时，可以遵循下面两个原则：
1：CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
2：JavaScript 应尽量少影响 DOM 的构建
浏览器的发展日益加快（目前的 Chrome 官方稳定版是 61），具体的渲染策略会不断进化，但了解这些原理后，就能想通它进化的逻辑。下面来看看 CSS 与 JavaScript 具体会怎样阻塞资源。
CSS
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="index.css">
这样的 link 标签（无论是否 inline）会被视为阻塞渲染的资源，浏览器会优先处理这些 CSS 资源，直至 CSSOM 构建完毕。渲染树（Render-Tree）的关键渲染路径中，要求同时具有 DOM 和 CSSOM，之后才会构建渲染树。即，HTML 和 CSS 都是阻塞渲染的资源。HTML 显然是必需的，因为包括我们希望显示的文本在内的内容，都在 DOM 中存放，那么可以从 CSS 上想办法。最容易想到的当然是精简 CSS 并尽快提供它。除此之外，还可以用媒体类型（media type）和媒体查询（media query）来解除对渲染的阻塞。
<link href="index.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 30em) and (orientation: landscape)">
第一个资源会加载并阻塞。
第二个资源设置了媒体类型，会加载但不会阻塞，print 声明只在打印网页时使用。
第三个资源提供了媒体查询，会在符合条件时阻塞渲染。
JavaScriptJavaScript 的情况比 CSS 要更复杂一些。观察下面的代码：
<p>Do not go gentle into that good night,</p>
<script>console.log("inline")</script>
<p>Old age should burn and rave at close of day;</p>
<script src="app.js"></script>
<p>Rage, rage against the dying of the light.</p>
<p>Do not go gentle into that good night,</p>
<script src="app.js"></script>
<p>Old age should burn and rave at close of day;</p>
<script>console.log("inline")</script>
<p>Rage, rage against the dying of the light.</p>
这样的 script 标签会阻塞 HTML 解析，无论是不是 inline-script。上面的 P 标签会从上到下解析，这个过程会被两段 JavaScript 分别打断一次（加载并且执行的时间段内）。所以实际工程中，我们常常将资源放到文档底部。
改变阻塞模式：defer 与 async
为什么要将 script 加载的 defer 与 async 方式放到后面呢？因为这两种方式是的出现，全是由于前面讲的那些阻塞条件的存在。换句话说，defer 与 async 方式可以改变之前的那些阻塞情形。
首先，注意 async 与 defer 属性对于 inline-script 都是无效的，所以下面这个示例中三个 script 标签的代码会从上到下依次执行。
<script async>
console.log("1");
</script>
<script defer>
console.log("2");
</script>
<script>
console.log("3");
</script>
故，下面两节讨论的内容都是针对设置了 src 属性的 script 标签。
defer
<script src="app1.js" defer></script>
<script src="app2.js" defer></script>
<script src="app3.js" defer></script>
defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。
整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。defer 不会改变 script 中代码的执行顺序，示例代码会按照 1、2、3 的顺序执行。
所以，defer 与相比普通 script，有两点区别：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。
async
<script src="app.js" async></script>
<script src="ad.js" async></script>
<script src="statistics.js" async></script>
async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。
需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。
从上一段也能推出，多个 async-script 的执行顺序是不确定的。值得注意的是，向 document 动态添加 script 标签时，async 属性默认是 true，下一节会继续这个话题。
document.createElement
使用 document.createElement 创建的 script 默认是异步的，示例如下。
console.log(document.createElement("script").async); // true
所以，通过动态添加 script 标签引入 JavaScript 文件默认是不会阻塞页面的。
如果想同步执行，需要将 async 属性人为设置为 false。如果使用 document.createElement 创建 link 标签会怎样呢？
const style = document.createElement("link");
style.rel = "stylesheet";
style.href = "index.css";
document.head.appendChild(style); // 阻塞？
其实这只能通过试验确定，已知的是，Chrome 中已经不会阻塞渲染，Firefox、IE 在以前是阻塞的，现在会怎样我没有试验。
document.write 与 innerHTML通过 document.write 添加的 link 或 script 标签都相当于添加在 document 中的标签，因为它操作的是 document stream（所以对于 loaded 状态的页面使用 document.write 会自动调用 document.open，这会覆盖原有文档内容）。
即正常情况下， link 会阻塞渲染，script 会同步执行。不过这是不推荐的方式，Chrome 已经会显示警告，提示未来有可能禁止这样引入。
如果给这种方式引入的 script 添加 async 属性，Chrome 会检查是否同源，对于非同源的 async-script 是不允许这么引入的。
如果使用 innerHTML 引入 script 标签，其中的 JavaScript 不会执行。当然，可以通过 eval() 来手工处理，不过不推荐。
如果引入 link 标签，我试验过在 Chrome 中是可以起作用的。
另外，outerHTML、insertAdjacentHTML() 应该也是相同的行为，我并没有试验。这三者应该用于文本的操作，即只使用它们添加 text 或普通 HTML Element。
2019/10/28 ---折枝出招试与剑 比短长
CSS3实现动画的两种方式
1：设置transition设置过渡，添加transform设置形状，形成动画效果，如下：
.divadd {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
2、添加animation属性，设置动画效果，如下：
.a1 {
position: absolute;
animation: a1 3s;
opacity: 0
}
@keyframes a1 {
0% {left: 10px;opacity: 0}
30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
90% {left: 100px;background-color: red;opacity: 1}
100% {left: 10px;opacity: 0}
}
以上百分比后的方括号内可以添加各种属性值，比如transform ratote、left。。。。。。添加left top等定位不要忘记设置position absolute。
所有属性有：
animation-name: myfirst; //动画名称，用于animation引用
animation-duration: 5s; //动画时长，
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
animation-fill-mode
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先
2019/10/29 --- 晨昏洗砺少年意 初现锋芒 那时懵懂只当是寻常
BFC
BFC（Block Formatting Context）即块格式化上下文，既不是CSS属性，也不是一段代码，而是CSS2.1规范中的一个概念，决定元素的内容如何渲染以及与其他元素的关系和交互.
如果将BFC想象成一个箱子，BFC中的内容就相当于箱子中的物品，将物品摆放在箱子中，能避免与其他箱子中的物品混淆，还能保护他们不被破坏。
简述BFC的5条规则：
(1):BFC有隔离作用，内部元素不会受外部元素的影响(反之亦然)
(2):一个元素只能存在于一个BFC中，如果能同时存在于两个BFC中。那么就违反了BFC的隔离规则
(3):BFC内的元素按正常流排列，元素之间的间隙由元素的外边距(margin)控制
(4):BFC中的内容不会与外面的浮动元素重叠
(5):计算BFC的高度，需要包括BFC内的浮动子元素的高度
创建BFC的条件：
(1):根元素，也就是html元素
(2):float属性不为none的浮动元素
(3):position属性是absolute或fixed的定位元素
(4):display属性为inline-block,table-cell(相当于tf或th元素)，table-caption(相当于caption元素)或伸缩盒(flex和inline-flex)的元素
(5):overflow属性不为visible的块级元素
BFC的用途
BFC的常规用途有三个：清除浮动，解决外边距塌陷，宽度自适应
清除浮动
浮动后的元素有许多问题，列举三个：
- 当一个元素被定义浮动后，附近的文字，即使不是相邻的关系，也会环绕着它，如下方代码所示，li元素被定义浮动后，就会影响span元素的行为。
<ul>
<li style="float:left"></li>
</ul>
<span>外部文案</span>
让li元素的父级元素ul创建bfc后(例如给ul的css属性overflow定义为hidden)，由于BFC有隔离作用，就能防止外部的文字环绕，如图
- 浮动的元素会脱离正常流，如果附近有其他元素，并且这个元素在正常流中，将会与其重叠。在下面的HTML文档中，将span元素定义为浮动后，就会与div元素重叠。
<span style="float:left">浮动文案</span>
<div></div>
让div元素创建BFC后，就能避免重叠，如图所示
- 如果一个元素未定义高度，并且有浮动的子元素，那么将会引起元素的高度塌陷。(height collapsing).在下面的HTML文档中，给ul元素定义为灰色的背景，ul的子元素li(包含宽高以及黄色背景)定义为浮动，此时ul的高度将会变为0,它的灰色背景也将看不到
<ul>
<li style="float:left"></li>
</ul>
让ul元素创建BFC后，就能避免高度塌陷。
解决外边距塌陷
这里所描述的是父元素和子元素之间的塌陷
<div></div>
<div style="margin-top:10px">
<p style="margin-top:10px"></p>
</div>
第一个div元素和p元素都包含宽度和背景色，给第二个div元素以及它的子元素p同时定义外边距，两个上外边距就会合并成一个，也就是10px。 让第二个div元素创建bfc后，就能避免外边距塌陷。
宽度自适应
将两个div元素的高度都设为100px,第一个黄色背景的div元素宽度固定，第二个灰色背景的div元素在创建BFC后，就能自适应剩余的空间。
<div style="float:left;width:100px;height:100px"></div>
<div style="overflow:hidden;height:100px"></div>
什么是hasLayout,触发hasLayout后会带来什么样的后果
hasLayout是微软的一个私有概念，类似于BFC，能够运行在早期的IE6和IE7中，但在IE8及之后的版本中已经被抛弃。在早期的IE浏览器中，元素会被分为拥有布局(has layout)和没有布局。
拥有布局的元素可以控制自己内容的尺寸和位置，而没有布局的元素需要由最近的拥有布局的祖先元素代劳。IE6中的很多BUG都是由于元素没有布局所引起的，例如浮动元素会引起双倍外边距。可以通过定义特定的CSS属性来触发hasLayout,是的这个元素所列的是能触发hasLayout的情况。
(1)：float属性为left或right
(2)：position属性为absolute
(3)：值不是auto的width或height属性
(4)：值不是normal的zoom属性
hasLayout除了能修复IE的BUG，还能像BFC一样，清除浮动，解决外边距塌陷。
2019/10/29 --- 提剑纵马初出茅庐 所遇皆是江湖
使用CSS选择器
基本选择器
1：通配选择器：*{}
2：类型选择器：div{};p{}
3：类选择器: .top{}
4：ID选择器: #top{}
5：属性选择器:属性选择器根据特定条件的属性来选择元素。下面列举三类属性选择器：
a:用属性名选择元素，可用 "[attr]"，attr就是属性名，例如name,class,type
b:用具体属性值选择元素，可用
"[attr="val"]",attr同样是属性名，字符串 "val"是属性值
c:用部分属性值选择元素，这里会涉及多个选择器。
关系选择器
每个元素在HTML文档中都有自己的位置，元素与元素之间存在某种关系。将HTML文档转化成一颗文档树，能够清晰地展示元素之间的关系。
1：后代选择器：后代选择器描述了元素之间祖先与后代的关系，格式很简单，选择器之间用空格分开。
.bfc li{}
<div class="bfc">
<ul>
<li>子代</li>
<li>子代</li>
</ul>
</div>
2：子选择器：子选择器与后代选择器不同，他只会选择子选择器
.bfc>ul {}
3：相邻选择器与兄弟选择器：
代码示意：
<div class="bfc"></div>
<div>与bfc是相邻关系</div>
<div>与bfc是兄弟关系</div>
选择器应用
/*相邻选择器*/
.bfc+div{}
/* 兄弟选择器*/
.bfc~div{}
伪选择器
1:伪类选择器：用来描述元素的动态特征，再根据元素的特殊状态选择元素，常用的有链接伪类，位置伪类，表单伪类，具体如下所列，圆括号包裹的是相关选择器
(1):在链接元素中，常用的4个状态有未访问(:link);已访问(:visited);激活(active);悬停(:hover)
(2):元素的位置可以是第一个(:first-child或：first-of-type)，最后一个(:last-child或:last-of-type)或第n个(:nth-child或:nth-of-type)
(3):表单元素用于搜集用户输入的数据，它们的状态有选中(:checked),启用(:enabled)和禁用(:disabled)
伪类允许出现在选择器的任何位置，并且能同时定义多个伪类：
/*任意位置*/
a:hover span{}
/*多个伪类*/
a:first-child:hover{}
2:伪元素选择器：伪元素选择器(pseudo-element selector)用于处理文档内容，可指定某处的内容(即过滤内容)或添加内容
(1):过滤内容的选择器有::first-letter(首字符) ,::first-line(首行),::placeholder(占位符)和::selection(选中字符)
(2):添加内容的选择器有 ::before(元素之前插入内容)和::after(元素之后插入内容)
/*固定位置*/
div::before{}
选择器分组： 选择器分组可以让多个元素应用于同一段声明块(即CSS样式)，使得样式能更简洁，更灵活。将选择器用逗号(,)隔开，就能形成分组，如下所示：
.bfc+div,
.bfc~div{}
1：CSS中类选择器和ID选择器有哪些区别
CSS中的类选择器和ID选择器主要有以下4个方面的区别：
(1):类选择器是以点号(.)开头,ID选择器是以井号(#)开头
(2):类选择器是根据class属性的值选择元素，ID选择器根据id属性的值选择元素
(3):类选择器可以应用于多个元素，ID选择器只能应用于一个元素
(4):ID选择器的特殊性比类选择器的特殊性要高
2：伪元素::before和:before有什么区别
早期的时候为元素和伪类都是用单冒号:before.但最新的CSS3规定伪元素使用双冒号(::before) ，伪类使用单冒号(:befor)，两者区分更明显
3：伪类:first-child与:first-of-type有什么区别
伪类:first-child表示父元素中的第一个子元素，只要这个元素是在第一个位置，就能匹配。伪类：:first-of-type表示父元素中的第一个与父元素相同类型的子元素，这个类型应该是相同的元素名，用一个例子来展示两者之间的不同，先创建一个HTML文档，代码如下,在div元素中包含span和p元素
<div>
<span>第一个span元素</span>
<p>第一个p元素</p>
<p>第二个p元素</p>
</div>
/*匹配第一个span元素*/
div:first-child{}
/*匹配第一个p元素*/
div p:first-of-type{}
2019/10/30 --- 茶馆盛酒以坛不论壶
内容生成
除了前面提到的::before和::after可以添加内容，在这两个选择器中有一个content属性用来生成内容。这个属性有多种功能，除了生成内容外，还能创建计数器，引用属性值和图像
一：计数器
应用场景:需要插入一系列递增的值是
实现方式：3个内容属性组合使用：
content————counter-reset————counter-increment
1:counter-reset:为计数器设置名称，并初始化计数器，可定义两个值，第一个是计数器的名称，第二个是计数初始值，默认为0.
counter-reset:<identifer><integer>
2:counter-increment:通过counter-increment能设置计数器的增量，第一个是计数器的名称，第二个是增量
counter-increment:<indentifer><integer>
3:显示计数器：在content()或counters()函数，能将最终的计数显示在页面上。
counter函数有两个参数，第一个参数是计数器的名称，第二个参数是列表属性list-style-type的值，默认为decimal(阿拉伯数字)
counters()函数有三个参数，第一个和第三个与counter()函数中的参数相同，第二份是分隔符，当需要嵌套计数器的时候，可以用这个函数。
引用属性值和图像
属性值：在counter属性中应用attr()函数。可将内容指定为某个CSS属性的值。attr()函数只有一个参数，那就是CSS属性名。利用这个特性可以弥补日期控件在移动端不能使用placeholder属性的缺陷。placeholder是HTML5新增的元素属性，提供商输入字段预期值的提示信息。
然后用Javacript代码来实现交互的效果，即在聚焦时隐藏提示，在失焦并且没有内容时呈现提示
图像：在countent属性中应用url()
函数，能将内容指定为某个图像，这个函数只有一个定义url资源的参数，不能设置位置，尺寸和填充方式等CSS属性
添加文本
普通文本：在counter属性中定义一段字符串，可在元素内容中显示
可替换文本：在counter属性中可定义open-quote和close-quote，这两个值相当于两个变量，它们的内容被定义在quotes属性中。
A:content:123
B:content:"\6211"
C:content:no-open-quote
D:content:no-close-quote
2019/11/01---座上妙语连珠 晕开少年眉目
层叠
层叠是一个处理样式表的过程，先合并不同源的CSS规则，再通过特殊算法，得到最终的样式。层叠依赖5个方面：来源、重要性，特殊性、继承和次序
1：来源：样式有3种不同来源：用户代理，用户和走着
应用到元素中的样式都是权重最高的，不同来源的权重各不相同，按照从高到低的顺序排列：内联样式，内嵌样式，外部样式，用户样式，用户代理样式
2：重要性
将样式标记为重要(在声明的分号之前插入“!important”),就能立刻提高权重，改变层叠次序。如果重要和非重要声明发生冲突，胜出的永远是重要声明
将来源和重要性结合在一起，重新排序，同样按照权重从高到低的顺序排列：
(1):标记为重要的用户样式
(2):标记为重要的作者样式
(3):作者样式
(4):用户样式
(5):用户代理样式
3：特殊性
假设一种情况。来源和重要性都相同，一个元素同时被多个选择器选中，这些选择器又有相同的声明。这是要解决冲突，就需要姐住特殊性(specificity)
关于选择器的特殊性：这个地方其实是有些问题的。分为两个版本。
我先说第一个版本：
W3C规范中特殊性的计算使用四个字母a,b,c,d重要性从高到低，为了便于理解，将a,b,c,d对应为数字的千位，百位，十位和个位。选择器的特殊性如下所示：
(1):ID选择器的特殊性为100
(2):类选择器，属性选择器和伪类选择器的特殊性为10
(3):类型选择器和伪元素选择器的特殊性为1
(4):关系选择器中的分隔符和通配选择器的特殊性为0，虽然为0但是还是要比无特殊性要强
内联声明的特殊性最高，每个都是1000
4:继承
在页面布局的时候，为了网站的整体性，会在body元素中定义几个通用的CSS属性。在body内的所有后代元素只要没有显示的声明颜色或行距，就会被赋予body中的CSS属性值。样式之所以能从父元素传递到子元素，主要得益于继承计之。只有与元素外观相关的属性能被继承，与布局相关的（例如外边距，内边距，尺寸）等就不能被继承。
有时候为了方便，需要继承父元素中非继承的属性，此时可以为属性赋予inherit关键字，显示地继承。如图所示
非显示继承而来的声明是没有特殊性的
。
5：次序
当来源，重要性和特殊性都相同的时候，选择器在样式表中所处的位置，决定了权重，越是在后面，权重越高。
链接有四种状态，包括未访问，已访问，激活和悬停，他们的声明顺序是怎样的呢？
推荐使用LVHA顺序，通常这4个状态会使用同一个源声明，也不会给某个状态标重要性，4个状态的特殊性也相同。因此影响权重的只有在样式表中所处的位置了。
当鼠标悬浮在未访问未访问或已访问链接的时候，都会同时存在两种状态,:link与:hover或:visited与:hover,如果:hover声明在:link或:visited之前，那么就会被覆盖掉。当鼠标点中链接的时候，会同时存在两种状态，:active与:hover，如果:active声明在:hover之前，那么就会被覆盖掉。因此:hover与:active必须在:link与:visited之后，而:active必须在:hover之后，至于:link与:visited，他们两个的顺序可以互换
单位
绝对单位长度
1：in
2：cm和mm
3：pt
4：pc
相对单位长度
1：px
2：em
3：ex
4：rem
目前比较流行的移动端适配会使用特定的算法，计算出根元素的字体大小，然后用rem作为单位，应用到边距，尺寸，字体大小等各个属性中
5：%
6：ch
7：vw和vh：视口也就是文档内容的可视区域，将他的宽和高均分为100份，50vw等于视口宽度的50%，50vh等于视口高度的50%。
8：vmax和vmin
其他单位
角度和时间都是CSS3新增的单位，角度用于旋转(rotate),时间用于过渡(transition)和动画(animation).
1.角度
与角度相关的单位有4种
2.时间
时间单位有两个：秒和毫秒
用过calc()函数吗？它是什么？它有什么作用？
calc()是CSS的一个函数，只有一个数学表达式参数，此函数可处理加减乘除等数学运算，并且在表达式中可混用不同的单位。在用百分比做自适应布局的时候，如果要进行计算会比较困难，例如为了让有两个有边框的元素排列在一行，需要准确的算出各个元素的高度，而宽度都是百分比，边框却是像素值。不同单位很难得出结果，但有了calc()函数后，就方便的多了
百分数
用百分数表示的值必须有一个参照值，不同属性的参照值各不相同。例如元素的宽度为百分数时，它参照的就是包含块的宽度，而像边框圆角参照的是元素自身的宽和高
定位
定位用于将元素摆放在某个位置，参照的是元素的包含块。四个偏移属性分为两组，left和right参照的是包含块的宽度，bottom和top参照的是包含块的高度。不同的定位置，对包含块的定义也不同。
1:static或relative
如果元素的position属性为static或relative，那么他的包含块就是离他最近的块级(block),单元格(td)或者行内块(inline-block)祖先元素的内容区域
2:fixed
如果元素的position属性为absolute，那么它的包含块就是当前视口
3:absolute
如果元素的position属性为absolute，那么它的包含块就i是离它最近的position不为static的祖先元素的内容区域。
宽和高
元素的宽和高参照的也是包含块。width参照包含块的宽度，height参照包含块的高度。这里着重说一下高度的百分比计算
执行下面的代码，经过计算后，p元素的真实行高是多少
div{
font-size:18px;
line-height:14px
}
div p{
line-height:50%
}
行高(line-height)参照的是,元素自身的字体大小(font-size),p元素自身没有定义字体。需要从父元素div中继承过来，继承过来的值为18px,再乘以50%，可以得到p元素的最终行高，这个值就是9px.
颜色
RGB颜色：
1：十六进制:#FF0000;
2：函数式：color:rgb(222,222,222);
color:rgba(222,222,222,0.5)
3:HSL颜色
hsl函数有三个参数，分别表示色调(h)，饱和度(s)和亮度(l).
Web安全色
在各种平台下显示效果与预期一直，如果不是安全色，操作系统可能会在处理颜色的时候产生抖动（就是混合几种颜色，模拟出系统没有的颜色）。这样形成的在不同的平台会有色差
在CSS中，transparent关键字相当于rgba(0,0,0,0),作为background的属性值，仅仅是将元素的背景设为透明，元素中的内容还能显示。而opacity会把元素和内容当成一个整体，当定义为0时，两者都会透明。
