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属性值。