码农清风前端 2020-09-02

【1.2W】精心整理33个css知识干货助你升级

你们都不看的总集篇：从零开端的大前端筑基之旅(浅显易懂，继续更新～)

万字长目录，觉得不错就随手点个赞吧~

前言

值得扩展的我都在问题后边附上文章链接，里边会有详细的解说和案例剖析，面试突击的话只看本文就| = _ 3 4 e好了，想跟面试U X E E – L b , +官聊聊技术的能够深化的看一下。

终究，整理不易，所以。。e a S假如白嫖使你快乐的话。。。。那就白嫖{ ~ q R T N n I吧。。。可是，不点赞的话，以后找不到了哦

标准的CSS盒子模型及其和低版别的IX } ] Q K ? VE盒子模型的差异？

标准盒d , T v 4 h Z模型(content-box)：整个元素占位 = 内容宽度（content） + border + padding +~ * G margig / N 0 E o Q 2n

低版别IE盒子模型(border-box)：整个元Q F o Q q 8 T素占位 = 内容宽度（content + border + padding）+ margin5 * x 5

上述内容宽度即咱们设置的width值

差异：标准盒子模型盒子的heigB R % G d X % , *ht和width是content的宽高，而IE盒子模型盒子的宽高则包括content+padding+0 R ) 2 sborder部分。

CSS优先级算法怎样核算？

！important > 内联款式 > id >) 5 H 3 b u ( = & class > 标签y _ F 1 9 9 Q [ = > 通配符 > 承继 > 默许

权重核算

把特殊性分为4个等级，每个等级代表一类挑选器，每个等级的值为其所代表的Y ) P = (挑选器的个数乘以这一等级的权值，终究把一切等级的值相加得出挑选器的特殊值。

4个等级的界说如下：

假定第零# 0 b $ o U –等：!important 权值10000
第一等： ` O #代表内联款式，如: s– 5 _ b y / Xtyle=””，权值为1000。
第二等：代表ID挑选器，如：#coo x R & M # f 8ntent，权值为01i L 000。
第三等：代表类，伪类和特点挑选器，如.content，权值为0010。
第四等：代表标签挑选器和伪元素挑选器，如div p，权值为0001。
第五等：通用挑选器（*），子挑选器（>），相邻同胞挑选器（+），权值为0000
示例如下：

**留意** 数位之间没有进制 比方说： 0,0,0,5 + 0,0,, 8 Z Z @ U0,5 =0,0,0,10 而不是 0,0, 1, 0
#header #left ul li .first a {...}
100.   100  1  1.  10    1
---> sum 02x u F # V Q G13

权重相同，写在后边的会掩盖前面的g 6 – ( 9 X g
权重相同，一个在写在外部款式9 2 b $ y H _ u中link引进，另一个在内部款式sC [ | n {tyle引进，引进次序后边r / r的掩盖前面的
内联款式的权重为1,0,0,0，10个id挑选器的权重也为0,10,0,0，内联款式优先级高

怎样居中di= o t .v？

ps: 选中下列样例可在操控台直接调试，纯手艺打造，作者诚心很足的

运用下列款式：

1、margin: 0 auto;

要求方针元素宽度固定，并且与父元素左右mar[ g @ zgin有空余。

适用于父元素内有多个块级元素上下摆放的状况

<div class="container">
this is inner text
<div classs="ele2">
this is another block element
</h a | p gdiv>
</div>

.container{
width: 300px;
border: 1n U | P j T s Xpx solid grey;
text-align: center;
}
.ele2{
border: 1px soE % a ) ` blid grey;
width: 200px;
margin:0 auto;
}

this is ins o v Sner text

this is another block element

假如上下的: 5 } 5 Lmargin设置了auto，其核算值为0

2、abs– x 4 U D m } Qolute + transform

transform设置百分比参数是相对于自身尺度的

<div clasG U [ H 5s="container">
this is inner text
<div class="ele1">
this isF L z x ] | i a block element
</div>
</div>

.cont@ _ : @ {ainer{
height: 100px;
width: 200px;
position: relative;
border: 1px soli| a $ _ ed gre3 x ,y;
text-align: center;
}
.ele1{
p, ~ W &osition: absolut} f 1e;
lefI A $ i 0t: 50%;
transform: translateX(-50%);
width: 100px; // 此处能够不设置，默以为父元素一半宽度
boe b 0 X 5rder: 1pxb ( a s 4 l c ( g solid #888;
}

this/ A k is inner text

this is a block elev 4 ^ment

ele1能够不设定width的值，此刻ele1的宽度会被? 8 t ) x b * P (核算为 父元素的一半 - 左右边框的宽度

3、 absolute + margin

margin设置百分比参数是相对于父元素的，所以，此办法需求子元素固定宽度，并且值设为自身宽度_ E – 5 W p 的一半；

html代码同上p T n ` ( Z，替换 ele1 元素款式中 transform: translateX(-50%) 为 margin-left: -50px;

.ele1{
position: absolute;
left: 50%;h v d U Y ) G 2 1
margin-left: -50px; // 负值，设为元素自身宽度的一半
width: 100px; // 此处有必要设置
border: 1px solid #888;
}

this is inner text

this is a blockr _ T + O element

4、 flex

这个不必叙说了吧

5、 a{ h , C L jbsolute + margin: auto

适用于笔直居中

更多布局请移S 4 X M O步可食用的「cs! n U c n ( ` / 9s布局干货」 | 水平、笔直、多列，
条理明晰的列举了水平及笔直居中，手打示例，可在页面调试

display有哪些值？他们的效果是什么？

值	效果
n3 Q o \| 2 . Wone	运用后元素将不会显现
block	运用后元素将变为块级元素显现，元素前后带有换行符
inline	disp! , ] 2 w + Dlay默许值。运用后原色变为行内元素显现，前后无换行符
list-item	运用后元素作为列表显现
run-in	运用后元素会依据上下文作为块级元素或行内元素显现
table	运用后将作为块级表格来显现] @ 8 + n v G # t（类似`<table^ v 9 s>`），前后带有换行符
inlin* } H Ge-tably ( Y 4 * (e	运用后元素将作为内x ! F } ~联表格显现（类似`<table>`），前后没有换行符
table-row-group	元素将作为一个或多i z 5 ` e个行的分组来显现（类似`<tbody>`）
table-heR , E 1 y 8 Eader-group	元素将作为一个或多个行的分组来表明（类似`<thead>`）
table-footer-group	元素将作为一个或多个行分组显现（类似`<tfoot>`）
table-row	元素将作为一D ] i 8 , –个表格行显现（类似`<tr>`）
tB o T Y e y % Vable-column-group	元素将作为一个或多个列的分组显现（类似`<colgroup>`）
table-column	元素将作为一个单元格列显现（类似`<col>[ 5 W R Z : t p` ）
table-cell	元素将作为一个表格单元格显现（类似`<td>和<th>`）
table-caption	元素将作为一个表格标题显现（类似`<U J z ncaption>`）
inherit	规矩应该从父元素集成dis[ } ; :play特点的值

position不同的值的定| . V _位原点及其特性？

relati$ ? /ve（f W # @ 0 y 3相对c % j U = ; O L定位）：生成相对定位的元素，定位p . 1 F # 2 U p #原点是元素自身地点的方位，在原本文档流方位占有必定空间；

absolute（肯定定位）：生成肯定定位的元素，定位原点是最近的positioc ~ . an设E } B x v s置为absolute或许relative`的父元素的左上角。

fixed （老IE不支撑）：生成肯定定位的元素，相对于浏览器窗口进行定位，元素会被移出正常文档流，并不为元素预留空间。

static：默许值。没有定位，元素呈现在正常的流中（疏忽 top, bottom, left, right、z-index 声明）。

inherit：从父元素承继 position 特点的值。

stiU a u h ( Wcky：元素依据正常文档流进行定位，能够被以为是相对定位和固定定位的混合。当元素在屏幕或翻滚元素显现区域时，体现为relative，就要滚出显现器屏幕的时分，体现为fixed。可用来做吸顶特效，详见css poU * E f k ! V Nsition特点及其sticky特点值的特性

怎样用纯CSS创立一个三角形

ps: 选中下列样例可在操控台直接调试，纯手艺打造，作者诚心很足的

块级元素宽高设为0，仅设置某一条边的色彩，别的三条边色彩设定为（transparent）

<div class="container">
<dio Q C z ;v class="triangle-top"></div>
<div clk , 3 K w eass="triangle-left2 + i n ~ F ! O 5"></div>
<div class=[ E ; ) = 3 3"triangle-right"></div>
<div class="triangle-bottom"></div>
</div>

.container{
disph z # nlay: flex;
justifys C t x X R = 8-content: space-between;
width: 400px;
}v 8 n k f f
.container dw F T S P ; Liv{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent;
}
.container .triangle-top {
border-bo3 Q , 4 0ttom-color: orange;
}
.container .triangle-left {
border-right-color: orange;
}
.container .triangle-right {
border-left-c[ 1 A a # $olor: orange;
}
.container .triangle-bottoh q ~ # E -m {
border-top-color: orange;
}

记得运用相对定位居中箭头

起浮原理及什么时分需求铲除起浮？铲除起浮的办法？

什么是起浮

元素加了起浮后，会脱离文档流，提升了半层层A & r I # E w级，向着指定方向: 5 ] Q L v移动，直到遇到父元素的鸿沟或另一个起浮元素中止

什么是层级

假如将整个元素看做一层，. 5 p则下半层是元素自身（布景款式等），上半层是X P u . h 4 q元素中的内容

举例

<div class="container"&S s L sgt;
<div class="box1">box1</div>C | N ^ g
<div class="box2">box2&lF 5 V . / A Zt;/div>
<div class="box3">box3</div>
< p u { 3;/div>x R + : a G f }

.container{
width: 40px;
border: 1px solid black;
}
.container div{
width: 100%;
height: 30px;U ^ 0 - T
}
.box1 {
background: yellow;
}
.box2 {
background: orang{ ( 6e;
}
.box3 {
backgroF A ~  ` q und: pink;
}

三个盒子都没有起浮时

box1

box2

box3

当给box2添加float:left时，三个盒子的摆放变成

box1

box2

box3

此刻由于box2起浮脱离了文档流，box3上移，被boxg V w Z n I2遮挡了。但此刻w H ; k z % ? w tbox3盒子a p a , H里的文字box3并没有上移！！！

小知识

起浮元素之间是漂浮着，并不会形成一个流。起浮元素总是要确保自己的顶部与上一个标准流中的元素（未起浮元素）的底部对齐。
position：absolute和float会隐式地改动display类型，除display:none外，只需设置了position：absolute或float，都会让元素以display:inline-block的办法显现，能够设置长宽

起浮会带来的问题 . k：

1.影响兄弟元素的方位b y l = R w

2.使父元素发生高度陷落

铲除起浮造成的缺陷的办法：

父级盒子界说高度（heigt Z : : k (ht）;
终究一个起浮元素后边加一个d^ y L h ` 6 l I Oiv空标签，并且添加款式clear: bow } * Tth;
包括起浮元素的父级标签添加款式overflow为h1 F w [ u & C , _idden/both;
父级div界说zoom;

铲除起浮的本质

运用css的clear特点，加clear:both
触发起浮元素父元素的BFC，使该父元素能够包括x K z起浮元素

CSS预处理器/后处理器是什么？为什么要运用它们？

什么是CSS 预处理器？
CSS 预处理器界说了一种新的言语，其基本思想6 e . 8 / j是，用一种专门的编程言语，为 CSS 添加了一些编程的特性，3 b # ? Z U将 CS– t !S 作为方针生成文件，然后开发者就只需运用这种言z h n _ T语进行CSS的编码工作。

为什么要运用CSS预处理器？

CSS仅仅是一个标记言语，不能够自界说变量，不能够引证。

如) 8 5 R：less，sass，stylus,用来预编译sass或许less，添加了css代码的复用性，还有层级，mixin，变量，循环，函数等，对编写以及开发UI组件都极为便利。

CSS有3 6 , H & .详细以下几个4 + 3 8缺陷：

语法不够强大，比方无法嵌套书写，导致模块化开发中需求书写许多重复的挑选器；
没有变量和合理的款式复用机 4 c x n 4 ! ) )制，使得逻辑上相关的特点值有必要以字面量的办法重复输出，导致难以保护。

预编译很简略造成后代挑选器的乱用

运用预处理器的优点

供给CSS层缺失的款式层复用机制
削减冗余代码
进步款式代码的可保护性

详细资料能够参考：【S3 h 2ass.vs.Less | 简介与比较】

后处理器
是对 CSS 进行处理，并终究生成 CSS 的预处理器，它归于广义上的 CSS 预处理器。
咱们很久曾经就在用 CSS 后处理器了，最典型的比方是 CSS 压缩工具（如 clean-css），只不过曾经没独自拿出来说过。
还有最近比较火的 Autoprefixer，以 Can I Use 上的浏览器支撑数据为根底，主动处理兼容性问题。

运用原因：

结构明晰，便于扩展
能够很便利的屏蔽浏览器私有语法的差异
能够轻松完成多重承继

::before 和 :after中双冒号和单冒号有Q / X b a , T , @什么差异？

在 CSS 中伪类一向用单冒 u D L z d F p号 : 表明，如 :hover, :active 等

伪o ` B G X x = d元素在CSS1中已存在，当时语法是用 : 表明，如 :before 和 :after，后来在CSS3中修订，为了差异伪元素和伪类，伪元素改用用 :: 表明，如 ::befor? 3 g X | H X 3e 和 ::after。

由于低版别IE对双冒号不兼容，开发g [ E者为了兼容性各浏览器，继续使运用 :after 这种老语法表明伪元素。

想让刺进的内容呈现在其元素内容前，运用::before，否者，运用::after；

在代码次序上，::after生成的内容也比::before生成的内容靠后。

假如按仓库视角，::after生成的内容会在::before生成的内容之上

伪元素和伪类的差异

css引进伪类和伪元素概念是为了格式化文c 1 _ & u s档树以外的信息e ` $。

伪类+ n + 5 u F O /用于当已有元素处于的某个状况时，为其添加对应的款式，这个状况是依据用户行为而动态改动的。比方说，当用户悬停在指定的元素时，咱们能够经过:hover来描绘这个元素的状k ! b N * J 5 E况。尽管它和普通的css类类似，能够为已有的元素添加款式A 3 $ x E Z，可是它只有 h F处于dom树无法描绘的状况下才能为元素添加款式，2 E l R # ^ z B m所以将其称为伪类。
伪元素用于创立一! M m L h S些不在文档树中的元素，并为其添加款式。比方说，咱们能够经过:before来在一个: I d v n元素前添加一些文本，并为这些文本添加款式v m 0 k & @ # {。尽管用户能够看到这些文本，可是这些文本实际上不在文档树中。

css伪类

挑选器	示例	示例阐明
[:link]	a:linkt + R	挑选一切未拜访链接
[:visited]	a:visitedx ~ i Y t p	挑选一切拜访过的链接
[:active]	a:active	挑选正在活动链接
[:ht 7 F =over]	a:hover	把鼠标放在链接上的状况
[0 0 Q B c:focus]	input:focus	挑选元素输入后具有焦点

css伪元素

挑选器	示例	示例阐明
[:first-letterp N S l k]	p` v G + 0 I:first-letter	挑选每个元素的第一个字母
[:first-line]	p:first-line	挑选每个元素的第一行
[:first-child]	p:first-child	挑选器匹配归于任意元素的第一个子元素的元素
[:before]	p:before	在每个元素之前刺进内容
[:after]	p:after	在每个元素之后刺进内容
[:lang(language= w r I)]	p:lang(it)	为元素的langQ c q 7 ) W \| 6 –特点挑选一个开端值

rgba() 和 opacity 的通明效果有( c o ; b ^什么不同？i & = g y 2 –

opacity 效果于元素以及元素内的一切内容（包括文字）的通明度；
rgba()只效果于元素自身的色彩或其布景色，子元素不会承继通明效果；

css 特点 c) H U + fontent 有什么效果？

content特点专门应用在 before/afteD [ 0 D H A / = r 伪元素上，用来刺进生成内e ) o容。最常见的应用是运用伪类铲除起浮。

扩展：怎样经过css content特点完成css计数器？

css计数器是经过设置counter-reset 、counter-increment 两个特点、及 counter()/counters()一个办法配合after / before 伪类完成。

px、em、rem有什么差异？

px相对于显现器屏幕分i D _辨率。

PX特点
- IE无法调整那些运用px作为单位的字体巨细；
- 国外的大部分| . Z Q q = G网站能够调整的原因在于其运用了em或rem作为字体单位；
- Firefox能够调整px和em，rem。
em是相对长度单位。相对于; g Q k当时目标内文本的字体尺度。如当时对行内文本的字体尺度未被人为设置，则相对于浏览器的默许字体尺度。

EM@ h }特点
- em的值并不是固定的；
- em会z b I Q U _承继父级元素的字体巨细。

留意：任意浏览器的默许字体高都是1L , D + B D q6px^ T q v 4 |。一切未经调整的7 O ~ / W C浏览器都契合: 1em=16px= ~ ( g i | n。

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em差异在于运用rem为元素设定字体巨细时，仍然r | T k q %是相对巨细，但相对的仅仅HTML根元素。

现在，除了IE8及更早版别外，一切浏览器均已支撑rem。# Q ,

一@ 7 2 Z个高度自适应的div，里边有两个div，一个高度100px，期望另一个填满剩余的高度问题怎样处理？

运用calc

.div1{
heigh. D P V T = _t: 100px;
}
.div2 {
height: calc(100%-100px);
}

肯定定位

.container{
position: relative;
}
.div1{
height: 100px;
}
.div2 {
pos5 & dition: absolute;
ty Q - & * % v T Kop: 100px;
bottom: 0;
}

flex布局

.container {
display:flex;
flex-direction:coc P + s 0lumn;
}
.div1{
height: 100px;
}
.div2 {
flex:1;
}

transition、transform和animatioT . Sn的差异

Transform:

transform特点是静态特点，一旦写到style里边，将会直接显现效果，无任何改动进程。transform的主要用途是用E Z ( k 5 B来做元素的特殊变: $ #形，它界说了元素静态款式中完成变形、旋转、缩放、移位及透视等功能。

Transition

transition特点是一个简略的动画特点，能够说它是animation的简化版别，是给普通做简略网页特效用的。

比方你有如下两个款式：

.position{
left:100px;
top:100px;
}
.position1{
-webkit-transition:left 0.5s ease-out;T / P * k
left:500px;
top:500px;
}

元素的class类为position。当你将其classList 添加 position1 或许替换position 为position1的时3 P e f ^分，元素的特点改动，触发webkit-transition，以指定特点改动前的值为起始值，改动后的特点为完毕值，履行动画效果。这是一个简略的两点改动进程，大大简化了animation特点的复杂程度。

其间position1的transition的特点的意思说：当你的lefte Y x特点发生改动的时分，履行动画效果（仅仅1 M u y X X基于left的特点改A n T v ` S ? w @动，其他的特点不会加入到动画改动里边去）；

在transtion特点里边指定呼应特点为all，能够呼应并履行元Y * 8 * M l素一切特点的改动动画（能做动画的特点）。

Animation:

在官方的IntrI + K @ v z : ! 1oduction上介绍这个特点是transition特点的扩展。可是这个a s 1 ~ t d o简略的介绍里边包括了不简略的东西：keyframes。

看一个简略的 keyframes 的示例：m a c

@keyframes 'wo` U 5 7b ^ K V _ble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.i B 8animate{
left:100px;
-webkit-animation:wobble 0.5s ease-out;
-webkit-animation-fill-mode:backwards;
}

上面这个代码展现了一个keyframes ‘wobble’，其间 0％代表在改动中不同X ( q x E V w x时间点的特点值，你能够较精确的操控动画改动中任何一个时间点的特点效果。而a[ Z g Knimation则依据这个keyframes供给的特点改动办法去核算元素动画傍边的特点。

它自身被用来替代一些朴实体现的ja0 4 tvascrir 9 F ] Y ` A R 4pt代码而完成动画,能够经过keyframe显式操控当时帧的| u Z @特点值。

animation-fill-mode，这个特G S a d K w z点标明是以(from/0%)指定的款式还是以(to/100%)指定的款式为动画完成之后的款式。这个很便利咱们操控动画的结尾款式，确保动画的全体连接。

对 line-height 的了解？

liK v ] @ne-height指的是一行字的高度，包括了字间隔，实际上是下一行基线到a q F 7 7 @ 1 $上一行基线的间隔。

假如一个标签没有界说height特点(包括百分比高度)，那么其终究体现的高度必定是h A l &由line-height起效果

换种了解办法，0 # e j r假如一个有文字的div，不设置高度，并将其行高设置0，div将不会被撑开。

<div] f c e $ t ! U class="container">
<div class="ele">
this is inner te: A Y t K axt
</div>
<div class="ele16 + b">
this is i; # = ? B ^nner text
</div>
</div>

.con& 5 # A | 7 7 0tainer{
width: 220px;
height:100px;
borde$ _ s vr: 1px solid grey;
}
div{
margin-top: 20px;
border: 1px solid grey;
}
.ele{
line-height:0;
}

this is inner text

概况可移步可食用的「css布局干货」,纯Html示例，可调试 | 水平、笔直、多列中line-height 部分

CSS 外边b s i Z u距(margin)堆叠] 4 h ? ( _ ( i }及避免办法

相邻的两个盒子（ S 6 q 8或许是兄弟联系也或许是祖先联系）的外边距能够结合成一个独自的外边距。这种合并外边距的办法被称为折叠，结合而成的外边距称为折叠外边距。

折叠成果遵从下列核算原则：

两个相邻的外面边距是正数时，折叠成果便是他们之中的较大值；
两个相邻的外边距都是负数时，折叠成果是两者肯定值的较大值；
两个外边距一正一负时，折叠成果是两者的相加的和；

什么状况下不会发生外边距堆叠？

水平d z H ^ 2 v x U边距永久不会重合。 @ F P D 3 c
相邻的盒模型中，假如其间的一个是起浮的（float），笔直margin不会堆叠，并且起浮的盒8 z ) { $ n模型和它的子元素之o n ~ 7 t d , O间也是这样。
设置了ovo 8 J Serflow特点的元素和它的子元素之间的margin不被堆叠（overflow取值为visible在外）。
设置了肯定定位（position:ab` e W t S ) I u rsolute）的盒模型，笔直margin不会被堆叠，并且和他们的子元素之间也是相同。

其实边距堆叠主要是由于堆叠的两个元Y q g * K素处于同} 9 ^ K X一个BFh i & m 5 0 H Z yC下。经过某些特点使元素生成新的BFC上下文即可处理

什么是BFC？怎样触发BFC？有什么用？

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的烘托区域，只有Block-level box参与，它规矩了内部的Block-level Box怎k T S D Q O F # j样布局，并且与这个区域外部毫不相干。

BFC的布局约束规矩

内部的Box会在笔直方向，一个接一个地放置。
Box笔直方向的间隔由margin决议。归于同一个BFC的两个相邻Box的margin会发生堆x G _ C C 2 @ x x叠。
每个盒子（块@ e 9 i ] / n ? ;盒与行盒）的margin box的左面，与包括块border box的左Z V v 8 8 } $ ] :面相接触(对于从左往右的格式化，不然相反)。即便存在起浮也是如此。即BFC中子元素不会超出他的包括块。
BFC的区域不会与float box堆叠。
BFC便是页面上的一个阻隔的独立容器，容器里边的子元素不会影响到外面的元素。反之也如此。
核算BFC1 : ^ + #的高度时，起浮元素也参与核算。l S 2 K p Y = )

BFC触发办法

根元素，即HTML标签
起浮元素：floQ | M = Gat值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
定位元素：position值为 absolute、fixed
留意：
display: table也能够P 3 d { 5 K i f q生成BFC的原因在于Table会默许生成一个匿名d 9 ~的table-cell，是这个匿名的table-cell生成了9 M s 1 f – t hBFC。

BFC效果j + m O I

BFC是页面上的一个阻隔的独立容器，容器里边的子元素不会影响到外面元素，反之亦然。咱们能够运用BFC的这个特性来做i Y Z W许多事。

同一个 BFC 下外边距会发生折叠
BFC 能够包括起浮的元素（铲除起浮
BFC 能够阻止c c w元素被起浮元素掩盖

BFC示例及详细解说

display: none; 与 visibility: hidden;I } V o = | 有什么差异？

两者都会使元素变得不可见。

差异	描绘
文档流	display: none;会让元素彻底从烘托树中消失，烘托的时分不占有任何空间；visibility: hidden;不会让元素从烘托树消失，烘托师元素继续占有空间，仅仅内容不可见；
承继性	display: none;是非承继特点，后代节点消失由于元素从烘托树消失造成，经过修正后代节点特点无法显现；visibility:hidden;是承继特点，后代节点消失由于承继了hidden，经过设置visibility: visible;能够让后代节点显式；
烘托影响	修正元素的display特点使元素消失或显现通常会造成回流。修正visibility特点只会导致重绘
读屏器	无法读取 `display: none`的元素内容；会读取visibility: hidden元素内容；

躲藏元素的办法有哪几种？

visibility: hidden: 躲藏某个元素，可是元素占用的空间任然存在；
opacity: 0: 使一个元素彻底通明；
position: absolute + 一个很大的 left 负值定位: 使元素定位在可见区域之外；
display: none: 元素不可见，并且不再占用文档的空间；
tra( 3 L @ I ` e T Dnsform: scale(0): 将一个元素设置为缩放无限小，元素将不可见，元素本来地点的方位将被保留；
<div hidden="hid b J $ 6 / J /den">: HTML5特点,效果和display:none;相同，但这个特点用于记载一个元素的状况；
height: 0: 将元素高度设为 0 ，c j h w @ : Z 1并消除边框，有时需同步设置overflow: hidden；
filter: blur# % S 8 h l |(0): CSS3特点，括号内的数值越大，图画高斯含糊的3 K ( c程度越大，到达必定程度可使图画消失;

li与li之间有看不见的空白间隔是Z B g Y p { d什么原因引起的？有什么处理办法？

浏览器的默许行为是把inline元素间的空白字符（空格换行tab）烘托成一个空y h & `格。换行后会发生换行字( M q A符，而它会变成一个空格，当然空d v T 5 E ^ f @格就占用一个字符的宽度。

处理办法：

将< li>代码全部W A h x u 0 & w写在一排
将ul字符尺度直接设为0，重设li的字符尺度
将ul的u 3 M字符间隔设置为-5px，重设li的字符尺度

.C z Cwrap ulW D N{letter-spacing: -5px;}
.wrap ul li{letter-spacing: normal;}

设置li的特点float：left；

尽管我很久没纯手写ul了。。。

JS怎样获取盒模型的方位及宽高

dom.style.width/height
这种办法只能获取到内联款式的宽和高，而款式一般不回以内联办法写，所以这种办法不适用现在大多数的开发；
window.g9 8 7 W & % k = ?etComputedStyle(don c G 2m).~ : = i t ;width/N h U R W [ pheight
getComputedStyle()是一个能够获取当时元素一切终究运用的CSS特点值的办法；兼容性很好k E ) x e X。
dom.getBoundingClientRect()5 x V . . ~ 2 b
getBoundingClientRect用于获取某个元素相对于视窗的方位调集R O k / % : g $ v。调集中有top, right, bottom, left,Y 1 ` i aheight,width,x,y共8个特点

const rectObject = dom.getBouz 4 HndingClientRect()

re y y F $ectObject.top：元素上边到视窗上边的间隔;
rectObject.right：元素右边到视窗左面的间隔;
rectObject.bottom：元素下边到视窗上边的间隔;
rectObject.left：元素左面到视窗左面的间隔;
rectObject.width：元素宽度;
rectObject.height^ r k n t = j y：元素高度;
rectObject.x：元素内容与视口的水平间隔;
rectObject.yS 9 n：元素内容与视口的笔直间隔;

怎样让Chrome支撑小于12px 的文字

针对谷歌浏览器E L d内核，加webkit前缀，用transform:scale()这个特点进行缩放！

.text {
-webkit-transform: scaB P Hle(0.8);
}

浏览器怎样判断元素是否匹配某个CSS挑选器

浏览器先发生一个元素调h . J 4 w 6 n .集，这个调集往往由终究一个部分的索引发生（假如没有% ~ + b 5 b @索引便是一切元素的调* m C集）。然后向上匹配，假如j e D不契n K 2合上一个h P 8 & j ]部分，就把元素从调集中删去，直到真个挑选器都匹配完，还在调集中的元素就匹配这个挑选器了。

举个比方，有挑选器：
body.ready #wrapper > .lol2Y w n t 5 T b n33

先把一切 class 中有 lol233 的元素拿出来组成一个调集，然后上一层，对每一个调集中的元素，假如元素的 parent id 不为 #wrapp= K A . ~ J = L [er 则把元素从调集中删去。再向上，从这个元素的父元素开端向上找，没有找到一个 tn w 2 XagName 为 body 且 class 中有 ready 的元素，就把本W ^ _ } 1 y 3 9 z来的元素从调集中删u v F去。

至此这个挑选器匹配完毕，一切还在调集中的元素满足。

之所以从后往前匹配由于功率和文档流的解析方向。功率不必说，找元素的父亲和之前的兄弟比遍历一切儿子快并且便利。

关于文档流的f s $ R J W解析方向，是由于现在的 CSS，D g X $ n a 1 4 S一个元素只需确认了这个元素在文档流之前呈现过的一切元素，就能确认他的匹配状况。应用在即便 html 没有载入完成，浏览器也能依据现已载入的这一部分信息彻底确认呈现过的元素的特点。

为什么是用调集主要也还是功率。基于d d = U Y CSS Rule 数量q 4 ; ; N V ~ *远远小于元素数量的假定和索引的运用，a Z N _ g ]遍历每一条 CSS Rup U n = v 9 ) ple 经过调集筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

移动端B . ! W P R怎样完成1px

相同是1pw V i o 8 ix，移动端的1px 就会显得很粗。

在新近的移动设L x y备中，屏幕像素密m V G ^ w ; 5度都比较低，如iphone3，它的分辨率为320×480，在iphoneO Z R3上，一个css像素确实是等于一个屏幕物理像素的。后来跟着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开端，苹果公司便推出了所谓的RetinK v qa屏，分辨率进步了一F + – / / /倍，变成640×960，但屏幕尺度却没改动，这就意味着相同巨细的屏幕上，像素却多U ] x了一~ # : N . 4 _倍，这时，一个css像素是等于两个物理像素的。

计划f L x 4 p1: 0.5px
经过 JavaScript 检测浏览器能否处理0.5px的边框，C T p假如能够，给元素添加个class。

计划2: 运用图片完成
生成a 0 % C – T .一张边缘通明的图片，以堆叠z b w u *办法展现E y ( B + & @border-image: url(border.gif) 2 repeat;

计划3: 多布景突变完成
设置1px的突变布景，50%有色彩，50%通明，可是无法完成圆角

计划4: 伪类 + transfoz f ? b 2 Y + : }rm
把原先元素的 bordek , N I 6 ~ L Ir 去掉，然后运用 :before 或许 :after 重做 border ，并 transform 的 scale 缩小一半。原先的元L ] m素相对定位，新做的 border 肯定定位

计划5(引荐)：经过 viewport + rem 完成

var viewp: ~ t + ` % 2ort = document.querySelector("meta[name=viewport]");
//下面是依据设备像素设置viewport
if (window.devicePixelRatio == 1)H d 3 { Q {
viewport.setAttrib} g # ` E Fute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scalc m z : ~e=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewpoH / - &rt.setAttribute('content', 'width=device-wE d I 5 Ridth,initial-scale=0.5, maxim: L % { . xum-scale=0.5, minimum-scale=0.5, user-scalable=nU B o H {o');
}
if (window.devicePixelRatio == 3) {
viewport.setA Y s G 3 ( O NAttr8 3 Tibute('content', v [ 0 V t 1 } | 'width=C . Q q P ^ cdevice-width,initial-sca; s : k c w 1 .leG d d g G k=0.333333333333` h V ]3333, maximum ) , ~ n-scale=0.3333333333333333, minimum-scale=0.3333333333333333, usY = ?er-scalable=no');V + $ 4 c
}
// 设置对应viewport的rem基准值
var docEl = docr u G ] 1ument.documentElement;
var fontsize = 16* (docEl.clientWidth / 375) + 'px';
docEl.sT ~ 6tyle.fontSize =| : B D f 3 fontsize;

此处不再详细赘述。五种计划的详细完成及详细解说请移步【viewport和1px |p 0 u 8 $ K & 工具人: 这是1px，规划师：不，这不是】

CSS有哪些特点是能够承继的？

1、字体系列特点

font-fa! x ,mily：字体系列
font-wh j Xeight– + x + I f n b：字体的粗细
font-size：字体的巨细
font-style：字体的风格

2、文% H o ~ r W V B本系列特点

text-ind– J R q [ent：文本缩进
text-align：文本水平对齐
line-height：行高
-wor* s / ! $ 2 yd-spacing：单词之间的间隔
letter-so $ ( ? # r h % (pacing：中文或许字母之间的间隔
text-transform：操控文本巨细写（便是uppercase、lowercase、capitalize这三个）
coO r 1 klor：文本色彩

3、元素可见性：

visibility：操控元素显现躲藏

4、列表布局特点：

list-style：列表X – R ( 8 X风格，包括+ ( a _ jlist-style-type、list-style-image等

5、光标特点e ` I：
– cursor：光标显现为何种形状

React Native中的css款式？

React Native 的款式基本上是完成了 CSS 的一个子集，这些款式名基本上是遵从了 web 上的 CSS的命名，仅仅按照 JS 的语法要求运用了驼峰命名法。

1.w X U ) v u B内联款式：
一般状况下，内联款式简略S w v ? * = _ R A粗暴，让你能S [ a J 0 m M W M够快速的调试，

<Text style = {{fontSizx x @ q | s 2 j (e:20,fontStyle:'normal',fontWeight:'bold'}}>测验</TextS @ x M C [ W , ->

2.目标款式：
对比内联款式的语法，H $ )是将内联款式分离n a 8 ! B T 9 $ g出来，避免每一次render办法时都进行创立款式

 cof K * 2nst italic = {fontSiC % r L Sze:20, fontStyle:'italic',fontWeightt M P b d:'bold'};
<Text style = {italG f ] W / g qic}>我是目标款式</Text>

3.运用– z ` A ! b *StyleSheet.create：
StyleShA 3 * 3eet.create创立的款式，能够削减内存分配数，然后进步性能，StyleShex R q j W o ( Wet是不可变的C $ ~ y，通常能够带来一; 6 p I I S ( X w些遍历，

StyleSheet还能$ 1 y G M P帮你检查款式语法是否合理。所以它是一个不错的款式挑选

const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColf ! f f 2 X M % Hor:'#aaaaaa'}});
<Text style ={styles.font}>我是Sty^ b IleSheet.creB l } } nate创立的款式</j m # W Y d ] R 1Text>

4.款式拼接：
一@ 8 A Z 个组件对多个款式的复用，就能够运用款式拼接，款式拼接是结合款式的一种实用的办法

    const stylesG y ) 8 p + M - = StyleSheev 0 g e Y !t.* y D Jcreate({font:            {fontSize:20,i a _ p ~fontStyle:'italic',fontWeight:'bold'},content:{bac] o c ` [ 6 @ Gkgro= 0 Z $ 9 K H + :undColor:'#aaaaaa'}});
<Text style = {[styles.content,styles.font]}>我是组合款式一</Text>
<Text style = {[styles.content,stv H 2 ;yles.font,{color:'#666666'}]}>我是组合款式二</TeH z f : 7 M Qxt>

条件款式：
依据烘托逻辑对组件进行款式设置

 <Text style = {this.state.toucher &amR 7 jp;& styl8 C /es.font}>我是条件款式</Text>

运用父类款式
运用组g : o W v件款式进行传递，然后更有用的被父组件操控流程和操作款式。

 <Text s) I 3tyle = {this.props.style}>我是父类的特点款式</Text>

RN运用 JavaScripts S C d 来写款式，一切核心组件都承受名为style的特点，只需终究成果的类型是正确的，你能够运用任何js语法来生成style目标

在 React Native中默许运d 0 e J 8 Y用 Flexbox 规矩来指定某个组件的子元素的布局。

style标签写在body后与body前有什么差异v , p X h P

style元素呈现在body元素，终究效果和style元素呈现在head里是相同的。

页面加载是p 4 1 % R o 3自上而下的。将style标签放于body之前，为I % ] C B b Y G A的是先加载款式。若是写在body标签之后，由于浏览器以逐行办法对html文档进行解析，当解析到写在文档中的款式表时，会导致浏览器中止之前的烘托，等候加载且解析款式表，或许引起FOUC、重绘或从头布局

依据当时标准，<linkp # + r3 e B b w / gel=stylesheet …> 是能够呈现在body元素中的。并且也或许引起上述问题。然而link是引证资源，意味着能够用于成心规划的异步加载。而style元素是直接内嵌的，并h G c y C没有合理的use case去运用它。所以html标准中允许body中呈现link，而不允许style。

position:fixed;在手机f l x } ?端下无效怎样处理？

fixed 定位其实是相对与浏览器视口来定位的。移动浏览器有两个视口：可视视口和布局视口。

当在屏幕g : q $上滑动时是在滑动整个viewport，那么本来的网页还在，fixed也没有变过方位，可是相对于可视视口，fix元素就移动了方位。

假如是水平方向上的固定，能够经过

<meta name="viewportU a } a ! U t e Z" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=6 L 8 { V1.0, user-scalable=no"/>

来设置网页宽度等于屏幕宽度，并且不允} S .许用户缩放，当然，规划上就需求适配了

另一种是Y i – o笔直方向上的问题。
iOS 下经常会有 fixed 元素和输入框(in@ } r z M r 5put 元素)同时存在的状况。例如，页面底? L }部有fix页脚，可是 fixed 元素在有软键盘唤起的状况下，会呈现许多不可思议的问题。比方页a 9 } j 6面没改动，只w | s – ; X ( ~有fix元素发生方位改动，破坏了全体布局。

这也是可视视口和布局视口高度不共同的问题，调整页面布局，将body高度设成手机屏幕高度，即页面全体不翻滚，翻滚区域包裹在子组件中，并自适应高度，这样最外层的fix元素在被键盘顶起的时分，页面也会随之改动，相当于浏A a ` | 览器高度发生了改动。# + V ( = y o K

什么是回流（重排）和重绘以及其A . x ; ( C 4差异

回流与重绘，会影响页面性能J ; 3 0，9 M – U . u每次这两个都会被同时提及，联系就好像KFC边上必定会有MC相同密切的让人摸不到头6 4 E g 4 N u脑。

在页面加载时，浏览器烘托进程如下：

解析HTML，生成DOM树，解析B j : lCSS，生成CSSOM树
将DOM树和CSSOM树结合，生成烘托树(Render Tree)
Layout(回流):依据生成的烘托树，进行回流(Layout)，得到节点的几许信息（方位，巨细）
Painting(重绘):依据烘托树以及回流得到的几许信息，得到节点的肯定像素
Display:将像素发送给GPU，展现在页面上。a 8 –（这一步其实还有许多内容，比方会在GPU将多个合成层合并为同一个层，并展现在页面中。而css3硬件加速的原理则是新建合成层F @ C S e F）

回流

经过结构烘托树，将可见DOM节点以及它对应的款式结合起来，这时分需求核算它们在设备视口(t % yviewport)内的确切方位和巨细，d 1 M J h 5 + ; 这个核算的阶段便是回流。每个页面至少需求一次回流，便是在页面第一次加载的时# c W分，这时分是必定会发生回流的，由于要构建render tree。

重绘

经过结构烘托树和回流阶段，咱们确认了可见节点，以及可见节点的款式和详细的O h . N 9几许信息(方位、巨细)，将烘托树的每个节点都转换/ N *为屏幕上的实际像素，这个阶段就叫做重绘节点。

会导致回流的操作：

页面初次烘托
浏览器窗口巨细发生改动
元素尺度或方位发生改动r R F l c（包括外边距、内边框、边框巨细、高度和宽度等）
元素内容改动（文字数量或图H ? n % ] 5 F 3片巨细，比方用户在input框中输入文字等等）
元J ! o X ) _ *素字体巨细改动
添加或许删去可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些特点或调用某些办法

行内元素和块级元素的详细差异是什么0 q l + 0 [ h？行内元素的 padding 和 margin 可设置吗？

块级元素( block )特性：

总是独占一行，体现为另起一行开端，并且这以后的元素也有必要另起一行显现；

宽度(width)、高度(height)、内边距(padding)和外边距(ma1 % d o m k T 5rgin)都可操控；

内联元素(inline)特性：

和相邻的内联元{ z R o Y % M r !素在同一行;

宽度(width)、高度(height)、内边距的top/bottom和外边距的T f g ^top/bottom都不可改动（也便是paddih & L Yng和margin的left和right是能够设置的）。

浏览器还有默许的天然生成inline-block元素（具有内涵尺度，可设j I .置高宽，但不会主动换行）
<input>T T ] &; 、<img> 、<button> 、<textarea>。

img 图片自带a A j M T边距的问e ? /题是什么原因引起的？怎样处理？

图片底部的空地实际上涉及行内元素的布局模型，图片默许的笔直对齐办法是基线，而基线; y t A / V的方位是与字体相关的。所以在某些时分，图片底部的V – b R & 4空地或许是 2px，而有时或许是 4px 或1 ( q | p * b更多。不同的 font-size 应该也会影响到这个空地的巨细。

转化成（行级）块元素

 display : block

起浮，起浮后的元素默许能够转化为块元素（能够随意设置宽高特点）w 2 #

float6 7 ` & s ~ . + ： left；

给 img 界说 vertical-align（消除底部边距）

img{
border: 0;
verticb n E Hal-align: bottom;
}

将其父容器的font-size 设为 0；
给父标签设置与图片相同的高度

说说css层叠上下文

大部分人在初步学完css后，对z-index的印象大概处于“z-8 w a i 2index便是用来描绘界说一5 P E r o s 1个元素在屏幕Z轴上的堆叠次序”。例如，假如A元素和B元素堆叠了，这么说有点枯燥，换个说法，

假如美丽妹子A和文字B注释堆叠了
可是页面烘托的时分，文字处于图片之上，挡住你看妹子了
这时分，你或许会
- 设置妹子的z-index为999
- 设置文字的z-index为-1

便M N 2是这么不同对3 r P X n待。已然拿上面那一段举栗子，那就代表这种了解有问题，至少是不谨慎的。

z-index特点仅在定位元p A U素（界说了position特点，且特点值为非static值的元素）上有用果。
元素在Z轴上的a L r ? ?堆叠次序，R A * o o K由元素所属的层叠上下文、元素的层叠水平、以及元素在文档中n m l {的次序等一起决议，元素的z-i@ y B N ! T v Index值的仅仅决议元素的层叠水平的条件之一。

什么是“层叠上下[ y j K ) ?文”

层叠x 5 d T r d t C上下文(stacking contr I A } ? 7ext)，是) Y DHI t ) P qTML中一个三维的概念。它划分( Q & } 4 | z 7 a了某种范畴或规模，在烘托规矩层面，将内部与外部离隔，并赋予元素自身及内部区域某些特性。

在CSS2.1标准中，每个盒7 ) * v模型的方位是三维的，即元素除了在页面上沿X轴Y轴平铺w 8 M I，同时还具有一个相对屏幕笔直的纵深，也便是表明层叠的Z轴。

怎样P h 8 z I创立“层叠上下文”
层叠上下文大部分由一些特定的CSS特点创立。

HTML中的根元素自身就具有层叠上下文，称为“根层叠上下文5 } } 3 A A”。
普通元素设置position特点为非static值并设置z-index特点为详细数值，发生层叠上下文。
css3补充了一些创立层叠上下文的条件，后边会列举。

层叠次序

层叠次序(st f Yacking order)，表明元素发生层叠时的特定的笔直显现次序，是一种用于确认元素层叠水平的规矩。

当元素堆叠时，有必要决议哪部分G G P C I内容展现在屏幕上，因而，层叠次序E o – H决议了一条优先级规矩，也能够= j n g f称为等级链规矩。以下排名分先后，自上而下优先级越来越低：

z-index > 0 (要求z-index特点生效)
z-index: auto 或许 z-index: 0 (z-index: auto 不会创立层叠上下文)
inliW H s O u E @ne、inline-block 行内盒子M K 6 l = j C / L
float起浮盒子
block块级盒子，非 inline-block，无 position 定位（static在外）的子元素
z-index < 0
层叠上下文元素的 background/borderu ` # `

当M Y [ 6 H元素发生层叠的时分，其掩盖联系通常遵从下面2个原则：

在同一个8 r h f 4 C d e H层叠上下文范畴，当具有显着的层叠水平标明的时分，如有用的 z-index 值，层叠水平值大的那一个掩盖小的那一个。
当元素的层叠水平共同、层叠次序相同的时分，在DOM流中处于后边的元素会掩盖前面的元素。

详细解说及案例剖析请移步前端有必要把握的「CSS层叠上下文」解说

css百分比单位相对基准

对于包括在父元素中的子元素，padding、margin等设为百分比或负值时，并不是上下边距相对于父元素高度，左右边距相对于父元素宽度。

width height 百分比

当元O E D 3 G素的height、width设置为百分比时，分别基于包括它的块级目标的高度、宽度。这个是惯例百分比的含义。

margin 百分比
margin 的百分比值参照其包括块的宽度进行核算。当书写形 x 2 L $ 8式变成纵向的时分，其参照将会, @ u W [变成包括块的高度。
为什么

CSS权威指南中的解说：

咱们以为，正常流中的大多数元素都会足够f g 1 s K ( ! ~ 高以包括这以后代元素（包括外边距），假如一个元素的` C F上下外边距是父元素的height的百分数，就或许导致一个无限循环，父元素的height会添+ l B ] ~加，以适应后代元素上下外边距的添加，而相应的，上下外边距由于父元素height的添加也会添加。

paddiK C R j 3ng 百分比
同上
width、padding 联合百分比
在标准盒模型下，width: 100%; padding: 10% 10%; 会导致内部元素溢出，假如遇到r ] C K m这种状况，一般都会运用怪异盒模型，即设置box-sizing: bord6 h * . e k wer-box，这时分width的值是L $ a , g ?会包括padding的间隔的。
translate百分比
在translate 函数傍边运用百分比是以该元素自身的宽高作为基准。
margin为负值
1. margin-left,margin-right为负值
  - 元素自身没有宽度，e N G `会添加元素宽度
  - 元素自身有宽度，O G 5 ] ] F ; [会发: x _ q h – $ z生位移
2. margin-top为负值，不论是否设置高度，都不会添加高度，而是会发生向上的位移
3. margin-bottom为负值的时分不会位移,而是会削减自身供css读取的高度.
padding 为负值
很惋惜，padding不允许指定为负，指定了也无效～