共计 9188 个字符，预计需要花费 23 分钟才能阅读完成。
CSS
css 权重 (Specificity)
- 较长的 css 选择器权重会大于较短的 css 选择器
- id 选择器权重高于 class 选择器
官网文档阐明：
- Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
- 官网文档中用 Specificity: 特异性 来示意一个 css selector 和其元素的相关性. 相关性越强, 即示意示意其权重最高。
- Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector
- Specificity 是由 selector 中 不同 selector type 的数目决定的。
依据 W3 规范中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规定为:
- a: 如果 css 属性申明是写在 style=“”中的, 则数目为 1, 否则为 0
- b: id 选择器的数目
- c: class 选择器, 属性选择器(如 type=“text”), 伪类选择器(如: ::hover) 的数目
- d: 标签名 (如: p, div), 伪类 (如: :before) 的数目
在比拟不同 css selector 的权重时, 依照 a => b =>c => d 的程序进行比拟.
由第一个 selector type a 的计算规定可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具备最高的优先级。
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和咱们平时的教训相吻合。
- 除了下面 Specificity 计算规定中的 css 选择器类型, 还有一些选择器如: *, +, >,:not() 等. 这些选择器并不会被计算到 css 的权重当中。
- 有一个须要特地留神一下的选择器: :not(), 尽管它自身是不计权重的, 然而写在它外面的 css selector 是须要计算权重的。
- 如果 a,b,c,d 算完都一样，最初申明的 css selector 会失效。
- 如果我反复同样的 css selectory type, 权重会被反复计算。
对于!important:
依照 MDN 的说法, !important 是不在 css 选择器的权重计算范畴内的, 而它之所以能让 css 选择器失效是因为浏览器在遇见 !important 时会进行非凡的判断. 当多个 !important 须要进行比拟时, 才会计算其权重再进行比拟.
通常来说, 不提倡应用 !important. 如果你认为肯定要应用, 无妨先自检一下:
- 总是先思考使用权重更高的 css 选择器, 而不是应用 !important
- 只有当你的目标是笼罩来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范畴应用 !important
- 永远不要 在你写一个第三方插件时应用 !important
- 永远不要在全站范畴应用 !important
css 行内 块级 及 行内块级元素
块级元素 block：
顾名思义，该元素出现“块”状，所以它有本人的宽度和高度，能够自定义 width 和 height。并且单独占据一行高度（float 浮动除外），个别可作为其余容器应用，可包容块级元素和行内元素。
块级元素有以下特点：
- 每个块级元素都是独占一行。
- 元素的高度（height）、宽度（width）、行高（line-height）和边距（margin，padding）都是能够设置的。
- 元素的宽度如果不设置，默认为父元素的宽度（父元素宽度 100%）
常见的块元素：
<address>// 定义地址
<div>// 定义文档中的分页区或节
<dl>// 定义列表
<dt>// 定义列表中的我的项目
<form>// 创立 html 表单
<h1>--><h6>// 定义题目
<hr>// 水平线
<li>// 定义列表我的项目 <ol>// 定义有序列表 <ul>// 定义无序列表
<p>// 定义段落
<table>// 定义 html 表格 <tbody>// 表格主体 <tfoot>// 定义表格页脚 thead>// 定义表格表头
<td>// 定义表格中规范单元格
<th>// 定义表头单元格
<<tr>// 定义表格中的行行内元素 inline：
行内元素不能够设置（width）和高（height），但能够与其余行内元素位于同一行，行内元素内个别不跨域蕴含块级元素。行内元素的高度个别由元素外部的字体大小决定，宽度由内容的长度管制。
行内元素有以下特点：
- 每一个行内元素能够和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。
- 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它蕴含的文字或图片的宽度，不可扭转
常见的行内元素：
<a>// 标签可定义锚
<b>// 字体加粗
<big>// 大号字体成果 <small> 小号字体成果
<br>// 换行
<i>// 斜体文本成果
<img>// 向网页中嵌入一副图画
<input>// 输入框
<select>// 创立单选或多选菜单
<span>// 组合文档中的行内元素
<sub>// 定义下标文本 <sup>// 定义上标文本
<textarea>// 多行的文本输出控件
<tt>// 打字机或等宽的文本成果
<var>// 定义变量行内块级元素 inline-block：
行内块级元素，它既具备块级元素的特点，也有行内元素的特点，它能够自在设置元素宽度和高度，也能够在一行中搁置多个行内块级元素。比方 input，img 就是行内块级元素，它能够设置高宽以及，一行多个。
具体特点：
- 和其余行内或行内块级元素搁置在同一行上。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换 display：
- display: block（定义元素为块级元素）
- display: inline（定义元素为行内元素）
- display: inline-block（定义元素为行内块级元素）
css 画三角形
利用 border 属性，在宽高为 0 的 div 内
div {
width: 0px;
height: 0px;
border-top: 50px solid transparent;// 通明
border-bottom: 50px solid deeppink;// 此时显示出三角形
border-left: 50px solid transparent;// 通明
border-right: 50px solid transparent;// 通明
}
href 和 src 的区别
-
申请资源类型不同
- href：href 是 Hypertext Reference 的缩写，示意超文本援用。用来建设以后元素和文档之间的链接。罕用的有：link a
- src：在申请 src 资源时会将其指向的资源下载并利用到文档中，罕用的有 script，img，iframe
-
作用后果不同
- href：href 用于在以后文档和援用资源之间确立分割。
- src：src 用于替换以后内容。
-
浏览器解析形式不同
- href：若在文档中增加 href，浏览器会辨认该文档为 CSS 文件，就会并行下载资源并且不会进行对以后文档的解决。这也是为什么倡议应用 link 形式加载 CSS 而不是 @import
- src：当浏览器解析 src，会暂停其余资源的下载和解决，直到将该资源加载、编译、执行结束，图片和框架等也如此，相似于将所指向资源利用到以后内容。这也是为什么倡议把 js 脚本放在底部而不是头部的起因。
link 和 @import 的区别
两者都是内部援用 CSS 的形式，然而存在肯定区别：
- link 是 XHTML 标签，除了能加载 CSS, 还能够定义 RSS 等其余事物；而 @import 属于 CSS 领域，只能够加载 CSS。
- link 援用 CSS 时，在页面载入时同时加载；@import 须要页面齐全载入当前再加载。
- link 是 XHTML 标签，无兼容问题；@import 则是在 CSS2.1 提出的，低版本的浏览器不反对。
- link 反对应用 js 管制 DOM 扭转款式；而 @import 不反对。
position 属性四个值的区别和用法
position 属性有四个可选值，别离是：static，absolute，fixed，relative
static：
- （动态定位）是默认值，元素呈现在失常的流中。不会受到 top，bottom，left，right 影响。
relative： - 绝对定位元素的定位是绝对本人本来的失常地位。根据 left，right，top，bottom 等属性在失常文档流中偏移地位。
- 能够挪动的绝对定位元素的内容和互相重叠的元素，它本来所占的空间不会扭转
- 绝对定位元素常常被用来作为相对定位元素的容器块。
absolute：
- 将对象从文档流中拖出，应用 left，right，top，bottom 等属性进行相对定位，而其层叠通过 z -index 属性定义。
- 此时对象不具备边距，但仍有补白和边框。
- 相对定位的元素的地位绝对于最近的已定位的父元素，如果元素没有已定位的父元素，那么它的地位绝对于 <html>
- 应用相对定位的层后面的或者前面的层会认为这个层并不存在，也就是在 z 方向上，它是绝对独立进去的，丝毫不影响到其余 z 方向的层
- 设置 absolute 会使得 inline 元素被“块”化
- 设置 absolute 会使得元素已有的 float 生效，不过 float 和 absolute 同时应用的状况不多
- absolute 会使元素悬浮在页面之上，如果有多个悬浮元素，层级的确定是“后来者居上”
fixed：
fixed 和 absolute 是一样的，惟一的区别在于：absolute 元素是依据最近的定位上下文确定地位，而 fixed 永远依据浏览器确定地位。即便窗口是滚动的它也不会挪动
- fixed 定位使元素的地位与文档流无关，因而不占据空间。
- fixed 定位的元素和其余元素重叠
- IE6 不反对 css 中的 position:fixed 属性
z-index：
垂直定位：z 轴方向上的层叠定位
- z-index 默认值都是 0
- 但默认状况下，后来者会笼罩前者，此时，如果须要扭转层级关系，就要通过扭转 z -index 值来实现。z-index 越大优先级越高
- 如果将 position 设为 relative（绝对定位），absolute（相对定位）或者 fixed（固定定位），这样的节点会笼罩没有设置 position 属性或者属性值为 static 的节点，阐明前者比后者的默认层级高。例如弹出层时用到最多
- 在 position 属性值为 absolute 的同时，如果有一级父对象 (无论是父对象还是祖父对象，或者再高的辈分，一样) 的 position 属性值为 relative 时，则上述的绝对浏览器窗口定位将会变成绝对父对象定位，这对精确定位是很有帮忙的。
head 中的 meta 字段
meta 是 html 语言 head 区的一个辅助性标签，meta 标签共有两个属性，别离是 http-equiv 属性和 name 属性，它的作用有：
- 搜索引擎优化
- 定义页面应用语言
- 主动刷新并指向新的页面
- 实现网页转换时的动态效果
- 管制页面缓冲
- 网页定级评估
- 管制网页显示窗口
暗藏元素的办法和区别
- 元素.style.display=”none”, 设置后元素不占地位
- 元素.visibility=”hidden”, 设置后元素还占原先的地位
- 元素.opacity=0, 齐全通明，还占地位
程度垂直居中计划
1. 相对定位元素的居中实现
毛病：须要晓得元素尺寸
<body>
<div class="cter"></div>
</body>
<style>
.cter{
width:100px;
height:100px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-top:-50px // 一半高度
margin-left:-50px // 一半高度
}
</style>-
flex 布局(此例在 body 内 div 居中)
<body> <div class="cter"></div> </body> <style> body{ display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; } .cter{ width:100px; height:100px; background:red; } </style> - transform
<body>
<div class="cter"></div>
</body>
<style>
.cter{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>- margin:auto 实现相对定位元素的居中
<body>
<div class="cter"></div>
</body>
<style>
.cter{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>requestAnimationFrame 为什么能优化动画性能
- 这个是 setInterval 的优化
-
与 SetTimeout 相比
- requestAnimationFrame 最大的劣势是由零碎来决定回调函数的执行理论。
-
具体来讲，如果屏幕刷新率是 60HZ，那么回调函数就 16.7ms 被执行一次
- 如果刷新频率是 75HZ，那么这个工夫距离就变成了 1000/75=13.3ms
- requestAnimationFrame 的步调跟着零碎的刷新步调走
- 它能保障回调函数在屏幕第一次的刷新距离中只被执行一次
- 这样就不会引起丢帧景象，也不会导致动画呈现卡顿的问题
-
requestAnimationFrame 另外两个劣势
- CPU 节能：应用 setTimeout 实现的动画，当页面被暗藏或最小化时，setTimeout 依然在后盾执行动画工作，因为此时页面处于不可见或不可用状态，刷新动画是没有意义的，齐全是节约 CPU 资源。而 requestAnimationFrame 则齐全不同，当页面解决未激活的状态下，该页面的屏幕刷新工作也会被零碎暂停，因而跟着零碎步调走的 requestAnimationFrame 也会进行渲染，当页面被激活时，动画就从上次停留的中央继续执行，无效节俭了 CPU 开销
- 函数节流：在高频率工夫（risize，scroll）中，为了避免在一个刷新距离内产生屡次函数执行，应用 requestAnimationFrame 可保障每个刷新距离内，函数只被执行一次，这样既能保障流畅性，也能更好地节俭执行的开销，一个刷新距离内函数执行屡次是没有意义的，因为显示器没 16.7ms 刷新一次，屡次绘制并不会在屏幕上体现进去
盒子模型
-
W3C 盒子模型（规范盒模型）：依据 W3C 标准，元素内容占据的空间是由 width 属性设置的，而内容四周的 padding 和 border 值是另外计算的。
- 内容的宽高 = 咱们设置的宽高
- 盒子总宽高 =width/height+padding+border+margin
-
IE 盒模型（怪异盒模型）：该模式下，浏览器 width 属性不是内容的宽度，而是内容，内边距和边框的宽度的总和
- 咱们设置的宽度 = 盒子的宽度 + 内边距 padding+ 边框 border 宽度
- 盒子的总宽高 =width/height+margin
- 意思就是咱们设置的宽度蕴含了 padding 和 border
-
两种模式下兼容性问题
- 倡议不要给元素增加具备指定宽度的内边距，而是尝试将内边距或外边距增加到元素的父元素和子元素
- CSS3 指定盒子模型品种
-
box-sizing属性容许以特定形式匹配某个区域的特定元素
- box-sizing:content-box（默认属性，规范盒模型）；宽高别离利用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
- box-sizing:border-box（IE 盒模型，怪异盒模型）；为元素设定的宽高决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽高内进行绘制。通过从已设定的宽度和高度别离减去边框和内边距能力失去内容的宽度和高度。
- box-sizing:inherit；规定应从父元素继承 box-sizing 属性的值
革除浮动
革除浮动次要是为了解决，父元素因为子级元素浮动引起的外部高度为 0 的问题
总结一下：
当父元素不给高度的时候，
外部元素不浮动时会撑开
而浮动的时候，父元素变成一条线
办法：
- 对父级设置适宜 CSS 高度（个别设置高度须要能确定内容高度能力设置）
- clear:both 革除浮动（这个 css clear 革除 float 产生浮动，能够不必对父级设置高度 也无需技术父级高度，不便实用，但会多加 CSS 和 HTML 标签。在最初一个浮动标签后，新加一个标签，给其设置 clear：both）
- 父级 div 定义 overflow:hidden（对父级 CSS 选择器加 overflow:hidden 款式，能够革除父级内应用 float 产生浮动。长处是能够很少 CSS 代码即可解决浮动产生。通过触发 BFC 形式，实现革除浮动，毛病：内容增多的时候容易造成不会主动换行导致内容被暗藏掉，无奈显示要溢出的元素）
- 应用 before 和 after 双伪元素革除浮动，伪元素是行内元素 失常浏览器革除浮动办法（.clearfix:after{css}）
BFC
MDN：一个块格式化上下文（block formatting context）是 Web 页面的可视化 CSS 渲染出的一部分。它是块级盒布局呈现的区域，也是浮动层元素进行交互的区域。
性能：
- 使 BFC 外部浮动元素不会到处乱跑；(就是说内层 float 或定位后，会脱离文档流，而给外层设置 BFC 就能够使内存不脱离)
- 和浮动元素产生边界。
- 开启 BFC 的元素不会被浮动元素所笼罩
如何开启：
- 设置元素浮动 float
- 设置元素相对定位 position: absolute;
- 设置元素为 inline-block
- 将元素的 overflow 设置为一个非 visible 的值
- 举荐形式：将 overflow 设置为 hidden 是副作用最小的开启 BFC 的形式。
伪类和伪元素：
其中伪类和伪元素的基本区别在于：它们是否发明了新的元素。
伪元素 / 伪对象：不存在在 DOM 文档中，是虚构的元素，是创立新元素。代表某个元素的子元素，这个子元素尽管在逻辑上存在，但却并不理论存在于文档树中。
伪类：存在 DOM 文档中，逻辑上存在但在文档树中却毋庸标识的“幽灵”分类。
伪元素选择符（单双引号为 css1/css3 区别）：
- ::first-letter：设置对象内的第一个字符的款式
- ::first-line：设置对象内第一行的款式
- ::before：设置在对象前（根据对象树的逻辑构造）产生的内容。用来和 content 属性一起应用
- ::after：设置在对象后（依赖对象树的逻辑构造）产生的内容。用来和 content 属性一起应用
伪类选择符：
- :hover：设置元素在其鼠标悬停时的款式
- :active：设置元素在被用户激活（鼠标点击与开释之间产生的事件）的款式
- :focus：设置元素在成为输出焦点（该元素 onfocus 事件产生）时的款式
- first-child：匹配父元素第一个子元素
- last-child：匹配父元素的最初一个子元素
- nth-child(n)：匹配父元素第 n 个子元素
- nth-last-child(n)：匹配父元素的倒数第 n 个子元素
// 例子
<div>
<p>a</p>
<p>b</p>
</div>
// 应用伪类让第一个 p 标签变红
//css
p:first-child{color:red}
// 不应用伪类怎么做呢？给 p 加一个 class, 在 class 里加款式
<div>
<p class='fs'>a</p>
<p>b</p>
</div>
// 能够实现同样的成果，但要多写一个类，这时，被润饰的 li 仍然存在于 DOM 树中
// 伪元素操作(给第一个字母增加款式)
<p>Hello,world</p>
//css
p::first-letter{color:red}
// 不必伪元素
<p><span class='a'>H</span>ello,world</p>
//css(通过加 span 和 类，这时看起来像创立了一个虚构的 span 元素并为其增加款式，但实际上在 DOM 数中并不存在这个 span 元素)能够看出二者区别了，
伪类的成果能够通过增加理论的类来实现
伪元素的成果能够通过增加理论的元素来实现
所以它们的本质区别就是是否形象发明了新元素
伪类偏重丰盛选择器的抉择语法范畴内元素的抉择能力，伪元素偏重表白或者定义不在语法定义范畴内的形象元素。
伪类和伪元素各自有一些存在的兼容问题。
scrollWidth、clientWidth、offsetWidth、width 的区别
scrollWidth：对象的理论内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变动而扭转。offsetWidth：对象整体的理论宽度，包滚动条等边线，会随对象显示大小的变动而扭转。-
innerWidth：window.innerHeight= 浏览器窗口的外部高度window.innerWidth= 浏览器窗口的外部宽度
- 元素内无内容或者内容不超过可视区，滚动不呈现或不可用的状况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。offsetWidth为元素的理论宽度。 - 元素的内容超过可视区，滚动条呈现和可用的状况下。
scrollWidth>clientWidth。scrollWidth为理论内容的宽度。clientWidth是内容可视区的宽度。offsetWidth是元素的理论宽度。 - offsetWidth 和 width 区别
offsetWidth属性能够返回对象的padding+border+ 元素width属性值之和，style.width返回值就是定义的width属性值。offsetWidth属性仅是可读属性，而style.width是可读写的。offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。 style.width仅能返回以style形式定义的外部样式表的width属性值。