盒模型
包括：外邊距（margin）嗤详、邊框（border）惑惶、內(nèi)邊距（padding）袄琳、實(shí)際內(nèi)容（content）四個(gè)屬性前翎。
CSS盒模型：標(biāo)準(zhǔn)模型 + IE模型
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）婶恼，如何設(shè)置成 IE 盒子模型:box-sizing: border-box;
position 屬性值
static：默認(rèn)定位桑阶，對(duì)象遵循正常文檔流。top勾邦，right蚣录，bottom，left等屬性不會(huì)被應(yīng)用眷篇。
relative：對(duì)象遵循正常文檔流萎河，但將依據(jù)top，right，bottom虐杯，left等屬性在正常文檔流中偏移位置玛歌。而其層疊通過z-index屬性定義。
absolute：對(duì)象脫離正常文檔流擎椰，使用top支子，right，bottom达舒，left等屬性進(jìn)行絕對(duì)定位值朋。而其層疊通過z-index屬性定義。
fixed：對(duì)象脫離正常文檔流巩搏，使用top昨登，right，bottom贯底，left等屬性以窗口為參考點(diǎn)進(jìn)行定位丰辣，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)丈甸。而其層疊通過z-index屬性定義糯俗。
sticky：具體是類似 relative 和 fixed，在 viewport 視口滾動(dòng)到閾值之前應(yīng)用 relative睦擂，滾動(dòng)到閾值之后應(yīng)用 fixed 布局得湘，由 top 決定。
外邊距合并
兩個(gè)在普通文檔流中的“相鄰”元素外邊距相遇的時(shí)候發(fā)生合并的情況顿仇。這個(gè)“相鄰”可以是父子相鄰淘正，兄弟相鄰，如果一個(gè)元素內(nèi)部沒有東西臼闻，自身的上下邊距相遇時(shí)也會(huì)發(fā)生外邊距合并鸿吆。
合并的結(jié)果
兩個(gè)外邊距都是正數(shù)時(shí)，取兩者之中的較大者述呐；兩個(gè)外邊距都是負(fù)數(shù)時(shí)惩淳，取兩者之間絕對(duì)值較大者；當(dāng)一正一負(fù)時(shí)乓搬，取兩者的和思犁。
- 父元素和子元素：在正常的文檔流當(dāng)中，父元素沒有邊框或padding进肯，那么父子之間會(huì)發(fā)生外邊距合并激蹲。解決：給父元素加邊框／設(shè)置父元素的padding
- 自身元素：加邊框／加padding／設(shè)置overflow:hidden（它內(nèi)部形成了一個(gè)空間，自身的margin被這個(gè)空間隔離開）江掩。
不產(chǎn)生外邊距合并
- 浮動(dòng)元素不與任何元素產(chǎn)生外邊距合并
- inline-block元素不合并
- 使用絕對(duì)定位的元素学辱，不與任何元素發(fā)生外邊距合并
- 子元素加了div包裹之后乘瓤，利用overflow:hidden外邊距不合并，可見創(chuàng)建BFC與子元素不發(fā)生合并策泣。在外層形成了BFC真正把兩者的外邊距隔離開來衙傀。
總的來說，外邊距合并不一定是兩個(gè)相鄰元素着降，不相鄰的也可能會(huì)發(fā)生外邊距合并差油。只要它們的外邊距會(huì)融合到一起，沒有分界線（可以是邊框任洞、padding，也可以是BFC形成的空間）隔開发侵，就
有可能發(fā)生外邊距合并交掏。
去除inline-block內(nèi)縫隙
兩個(gè)相鄰的inline－block 元素中間會(huì)有間隙
- html內(nèi)標(biāo)簽不含空格
- 標(biāo)簽可以換行，但是要保證標(biāo)簽相接的地方?jīng)]有空格
- 利用負(fù)margin（一般-4px左右）(margin-top和margin-left移動(dòng)的是自己刃鳄，margin-right和margin-bottom移動(dòng)的是周圍的元素盅弛。因?yàn)閙argin的意思是要讓周圍的元素有多少距離，比如說10px叔锐。根據(jù)文檔流的順序挪鹏，當(dāng)前的元素距離下一個(gè)元素要有10px的位置。因此愉烙，如果設(shè)置的是right和bottom讨盒，自然就是下一個(gè)元素移動(dòng)。不然當(dāng)前的元素和它前面的元素margin就會(huì)受到影響步责。)
- 利用浮動(dòng) (容器設(shè)置overflow：auto返顺，容器內(nèi)inline_block元素float：left)
- 父元素font-size,在容器里面的元素需要把字體大小重置回來。
BFC
浮動(dòng)元素蔓肯、絕對(duì)定位元素遂鹊、非塊級(jí)元素的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的塊級(jí)格式化上下文蔗包。簡單的來說秉扑，BFC就是一個(gè)獨(dú)立的空間，內(nèi)部的元素不受外部元素影響调限。
主要有以下一些用處
清除浮動(dòng)
防止外邊距合并
設(shè)計(jì)布局
形成 BFC 的條件
五種：
? 浮動(dòng)元素舟陆，float 除 none 以外的值
? 定位元素，position（absolute旧噪，fixed）
? display 為以下其中之一的值 inline-block吨娜，table-cell，table-caption
? overflow 除了 visible 以外的值（hidden淘钟，auto宦赠，scroll）
? HTML 就是一個(gè) BFC
BFC 的特性：
? 內(nèi)部的 Box 會(huì)在垂直方向上一個(gè)接一個(gè)的放置陪毡。
? 垂直方向上的距離由 margin 決定
? bfc 的區(qū)域不會(huì)與 float 的元素區(qū)域重疊。
? 計(jì)算 bfc 的高度時(shí)勾扭，浮動(dòng)元素也參與計(jì)算
? bfc 就是頁面上的一個(gè)獨(dú)立容器毡琉，容器里面的子元素不會(huì)影響外面元素。
父容器使用overflow: auto| hidden撐開高度的原理
當(dāng)元素設(shè)置浮動(dòng)時(shí)妙色，父元素感知不到元素的存在桅滋，造成高度塌陷。在父容器使用overflow屬性時(shí)形成一個(gè)BFC身辨，使其內(nèi)部元素不受外界的影響丐谋。
BFC有三個(gè)特性：
BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊
BFC不會(huì)重疊浮動(dòng)元素
BFC可以包含浮動(dòng)
根據(jù)第三條特性就可以知道煌珊，父容器的高度可以被撐開号俐。
清除浮動(dòng)
.clearfix:after{ /* 在clearfix后面添加一個(gè)偽元素 /
content: ' '; / 偽元素的內(nèi)容為空白字符 /
display: block; / 因?yàn)閭卧厣傻哪J(rèn)為行內(nèi)又元素，而clear對(duì)象一定是塊級(jí)元素定庵，所以這里設(shè)置一下display屬性吏饿。 /
clear: both; / 不允許元素兩邊有浮動(dòng)元素 /
}
.clearfix{
zoom: 1; / “”號(hào)是IE68的一個(gè)bug，IE68看到以“”開頭的代碼蔬浙，會(huì)忽略星號(hào)猪落，執(zhí)行后面的代碼。而zoom的原意是放大畴博。它也會(huì)觸發(fā)BFC笨忌，在IE里面其實(shí)不叫BFC，叫hasLayout 绎晃。/
}
zoom是IE的特有屬性蜜唾，可以設(shè)置對(duì)象的縮放比例。后面可以接數(shù)字或者百分?jǐn)?shù)庶艾，也就是表示縮放的比例袁余。經(jīng)常用zoom: 1;來觸發(fā)IE的hasLayout、清除浮動(dòng)以及解決外邊距合并的問題咱揍。因?yàn)閭卧卦贗E8是部分支持颖榜，IE8以下不支持，所以上述的代碼在IE中也能達(dá)到清除浮動(dòng)的效果煤裙。
BFC是形成一個(gè)內(nèi)部的獨(dú)立小空間掩完，不受外部元素影響。而上述方法只是讓父元素感知到浮動(dòng)元素的存在硼砰，把內(nèi)容撐開且蓬，不會(huì)形成獨(dú)立的空間。
清除浮動(dòng)方法及原理
清除浮動(dòng)常用的四種方式：
- 父級(jí)
div定義height - 額外標(biāo)簽法： 在有浮動(dòng)的父級(jí)元素的末尾插入了一個(gè)沒有內(nèi)容的塊級(jí)元素div 并添加樣式
clear:both题翰。 - 利用偽元素：父級(jí)div定義 偽類:after恶阴，我們可以寫一個(gè)
.clearfix工具樣式诈胜，當(dāng)需要清除浮動(dòng)時(shí)，就為其加上這個(gè)類.clearfix:after { display: block; clear :both; content: '';}冯事。 - 父級(jí)添加
overflow屬性： 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto焦匈，通過觸發(fā)BFC方式，實(shí)現(xiàn)清除浮動(dòng)
負(fù)邊距 ／position: relative
負(fù)margin和position: relative在讓元素產(chǎn)生偏移時(shí)都沒有脫離文檔流昵仅。但是利用負(fù)margin讓元素產(chǎn)生偏移時(shí)缓熟，元素原來的位置會(huì)被占據(jù)；而position: relative元素原來的位置不會(huì)被占據(jù)摔笤，仍然會(huì)被保留够滑。
使用 相對(duì)定位 時(shí)，無論是否進(jìn)行移動(dòng)籍茧，元素仍然占據(jù)原來的空間版述。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框
負(fù)邊距
margin-top和margin-left是移動(dòng)自己（偏移后會(huì)對(duì)后面的元素有影響寞冯，比如設(shè)置margin-top:-10px,后面的元素也會(huì)跟著往下移），而margin-right和margin-bottom是讓周圍的元素移動(dòng)晚伙。
position: relative 的元素發(fā)生偏離后不會(huì)影響到其他的元素的偏移
利用負(fù)margin來擴(kuò)大面積:一個(gè)元素沒有設(shè)置 width吮龄，只有左右的負(fù)margin，那么它就會(huì)變寬
margin 百分比
屬性值為百分比時(shí)的邊距是基于父元素的寬度來計(jì)算的咆疗。默認(rèn)情況下writing-mode的值為 horizontal-tb漓帚，即水平書寫方式。當(dāng)把書寫模式修改為縱向的時(shí)候午磁，margin-top/bottom/left/right的百分比值都將會(huì)以包含元素（父元素）的高度為參照 https://blog.csdn.net/qq_40776187/article/details/87865123
兩欄布局
- 左 float尝抖， + 右 margin-left（右邊自適應(yīng)）
- 右 float，margin-right
- BFC + float
.aside {
width: 300px;
float: left;
}
.main {
overflow: hidden;
} - float + 負(fù) margin
.left {
width: 100%;
float: left;
background: #f00;
margin-right: -200px;
}
.right {
float: left;
width: 200px;
background: #0f0;
} - flex
flex: flex-grow, flex-shrink 和 flex-basis的簡寫
flex 的默認(rèn)值是 0 1 auto迅皇。
.container {
display: flex;
}
.left {
flex: 0 0 200px;
}
.right {
flex: 1;
} - position + margin
.container {
position: relative;
}
.left {
position: absolute;
width: 200px;
}
.right {
width: 100%; /* 基于包含塊的百分比/
margin-left: 200px; / 避免被前面的left 蓋住*/
}
三欄布局
position + margin-left + margin-right
.wrap {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
}
.middle {
margin-left: 200px;
margin-right: 200px;
}-
圣杯布局
代碼：https://www.yuque.com/tuture/interview/htok5l?viewer=lake#TjkAS
left盒子負(fù)內(nèi)邊距-100%的解釋(https://segmentfault.com/a/1190000014546205).container { padding: 0 300px 0 200px; border: 1px solid black; } .content { float: left; width: 100%; background: #f00; } .left { width: 200px; background: #0f0; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 300px; background: #00f; float: left; margin-left: -300px; position: relative; right: -300px; }<div class="container">
<div class="content">中間內(nèi)容</div>
<div class="left">左側(cè)區(qū)域</div>
<div class="right">右側(cè)區(qū)域</div>
</div> -
flex
.wrapper { display: flex; } .content { flex: 1 1; order: 2; background: #f00; } .left { flex: 0 0 200px; order: 1; background: #0f0; } .right { flex: 0 0 300px; order: 3; background: #00f; }
圣杯布局和雙飛翼布局
- 共同點(diǎn)：三欄全部float浮動(dòng)昧辽，但左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局登颓。負(fù)邊距是這兩種布局中的重中之重
- 不同點(diǎn)：解決“中間欄div內(nèi)容不被遮擋”的思路不同
圣杯布局
- 1.三者都設(shè)置向左浮動(dòng)
- 2.設(shè)置middle寬度為100%;
- 3.設(shè)置負(fù)邊距搅荞， left設(shè)置負(fù)左邊距為100%, right設(shè)置負(fù)左邊距為負(fù)的自身寬度
- 4.設(shè)置content的padding值給左右兩個(gè)子面板留出空間
- 5.設(shè)置兩個(gè)子面板為相對(duì)定位，
left面板的left值為負(fù)的left面板寬度框咙，right面板的right值為負(fù)的right面板的值
但是圣杯布局有個(gè)問題：當(dāng)面板的middle部分比兩邊的子面板寬度小的時(shí)候咕痛，布局就會(huì)亂掉。因此也就有了雙飛翼布局來克服這個(gè)問題喇嘱。如果不增加任何標(biāo)簽茉贡，想實(shí)現(xiàn)更完美的布局非常困難，因此雙飛翼布局在主面板上選擇了加一個(gè)標(biāo)簽
雙飛翼布局
- 1.三者都設(shè)置向左浮動(dòng)者铜。
- 2.設(shè)置middle寬度為100%腔丧。
- 3.設(shè)置 負(fù)邊距放椰，left設(shè)置負(fù)左邊距為100%，right設(shè)置負(fù)左邊距為負(fù)的自身寬度
- 4.設(shè)置middle-content的margin值給左右兩個(gè)子面板留出空間悔据。
對(duì)比兩者可以發(fā)現(xiàn)庄敛，雙飛翼布局與圣杯布局的主要差別在于：
- 1.雙飛翼布局給主面板（中間元素）添加了一個(gè)父標(biāo)簽用來通過margin給子面板騰出空間
- 2.圣杯布局采用的是padding,而雙飛翼布局采用的margin, 解決了圣杯布局的問題
- 3.雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的left和right值
http://www.reibang.com/p/be0094ace1c9
bfc
W3c定義：
Formatting context(格式化上下文) 是 CSS2.1 規(guī)范中的一個(gè)概念科汗。是頁面中的一塊渲染區(qū)域藻烤，并且有一套渲染規(guī)則，決定了子元素如何定位头滔，以及和其他元素的關(guān)系和相互作用怖亭。
BFC是一種布局方式，在這種布局方式下坤检，盒子們自所在的容器塊頂部一個(gè)接一個(gè)垂直排列兴猩，水平方向上撐滿整個(gè)寬度（普通流）。具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器早歇，容器里面的元素不會(huì)在布局上影響到外面的元素倾芝，并且 BFC 具有普通容器所沒有的一些特性。
浮動(dòng)元素和絕對(duì)定位元素箭跳，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）晨另，以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）谱姓。
兩個(gè)相鄰的BFC之間的距離由margin決定借尿。在同一個(gè)BFC內(nèi)部，兩個(gè)垂直方向相鄰的塊級(jí)元素的margin會(huì)發(fā)生“塌陷”屉来。
觸發(fā)BFC：
float屬性不為none
overflow不為visible(可以是hidden路翻、scroll、auto)
position為absolute或fixed
display為inline-block茄靠、table-cell茂契、flex
body根元素
應(yīng)用：
- 同一個(gè) BFC 下垂直相鄰塊元素外邊距會(huì)發(fā)生折疊。要避免外邊距的重疊嘹黔，可以將其放在不同的 BFC 容器中账嚎。
- 清除內(nèi)部浮動(dòng)。觸發(fā)容器的 BFC儡蔓，那么容器將會(huì)包裹著浮動(dòng)元素overflow郭蕉。
- 創(chuàng)建自適應(yīng)兩欄布局。BFC 可以阻止元素被浮動(dòng)元素覆蓋
容器等寬
table-cell
.left, .middle, .right{
display: table-cell;
width: 3000px;
}
flex
.wrap {
width: 100%;
flex-direction: row;
display: flex;
}
.div {
//取值為一個(gè)非負(fù)數(shù)字喂江，為 flex-grow 值召锈，flex-shrink :1，flex-basis :0%
flex-grow: 1;
}
百分比
水平获询、垂直均相對(duì)于父元素居中
行內(nèi)元素水平居中
把行內(nèi)元素包裹在父元素（<div>涨岁、<li>拐袜、<p>等）中，并且在父元素設(shè)置
container{
text-align:center;
}
適用于文字梢薪，鏈接蹬铺，及其inline或者inline-block、inline-table和inline-flex秉撇。
塊狀元素的水平居中
設(shè)置左右margin為auto甜攀，元素設(shè)置：
center{
margin:0 auto;
}
多個(gè)塊狀元素水平居中
方法1: 將元素設(shè)置為display: inline-block，在父元素設(shè)置text-align: center琐馆。
方法2: 使用flexbox规阀。
flex布局默認(rèn)為塊級(jí)元素，要設(shè)置元素為flex布局瘦麸，只需在父元素上設(shè)置
display: flex;
justify-content: center;
若要設(shè)置行內(nèi)元素谁撼，同理設(shè)置父元素：display: inline-flex
已知高度寬度元素的水平垂直居中
絕對(duì)定位+負(fù)margin
.container{
position: relative;
}
.item{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
將填滿整個(gè)父容器
.container{
position: relative;
}
.center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
inline或者inline-block 元素垂直居中
設(shè)置父元素：
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
css3的transform
translate是基于元素本身的寬高去計(jì)算百分比的，所以同樣適用于寬度和高度都不固定的情況
.container{
position:relative;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex布局
.container{
display:flex;
justify-content:center;
align-items: center;
}
用js控制
父元素相對(duì)定位滋饲，子元素絕對(duì)定位厉碟；js動(dòng)態(tài)設(shè)置top,left
childDom.style.top = (parent.offsetHeight - childDom.offsetHeight) / 2 + "px";
childDom.style.left = (parent.offsetWidth - childDom.offsetWidth) / 2 + "px";
CSS 權(quán)重和優(yōu)先級(jí)
常用選擇器權(quán)重優(yōu)先級(jí)：!important > id > class > tag
!important可以提升樣式優(yōu)先級(jí)，但不建議使用屠缭。如果!important被用于一個(gè)簡寫的樣式屬性墨榄，那么這條簡寫的樣式屬性所代表的子屬性都會(huì)被應(yīng)用上!important。 例如：background: blue !important;
Flex 布局
● 彈性盒布局勿她，CSS3 的新屬性，用于方便布局阵翎，比如垂直居中
● flex屬性是 flex-grow逢并、flex-shrink 和 flex-basis 的簡寫
flex:1 非負(fù)數(shù)字，為 flex-grow 值郭卫，flex-shrink : 1砍聊，flex-basis :0%
flex:0 對(duì)應(yīng)的三個(gè)值分別為 0 1 0%
flex :一個(gè)長度或百分比，則為 flex-basis 值贰军，flex-grow : 1玻蝌，flex-shrink : 1，（0% 是一個(gè)百分比）
(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
畫一個(gè)大小為父元素寬度一半的正方形
子元素設(shè)置：width: 50%; padding-bottom: 50%;
padding：％ 規(guī)定基于父元素的寬度的百分比的內(nèi)邊距词疼。
正方形
https://www.yuque.com/tuture/interview/htok5l#C5TDN
● width 設(shè)置百分比
● padding 撐高
● 如果只是要相對(duì)于 body 而言的話俯树，還可以使用 vw 和 vh
● 偽元素設(shè)置 margin-top: 100%撐高
固定寬高比
在div的width固定的情況下，設(shè)置height為0贰盗，使內(nèi)容自然溢出许饿，再通過設(shè)置padding-bottom使元素有一定高度。
.element {
/* 16:9寬高比舵盈，則設(shè)padding-bottom:56.25% /
/ height: 0px, 防止矩形被里面的內(nèi)容撐出多余的高度*/
width: 100vw;
height: 0px;
padding-bottom: 56.25%;
background: pink;
}
當(dāng)margin/padding取形式為百分比的值時(shí)陋率，無論是left/right球化，還是top/bottom，都是以父元素的width為參照物的瓦糟！
偽類和偽元素
css引入偽類和偽元素概念是為了格式化文檔樹以外的信息筒愚。偽類和偽元素是用來修飾不在文檔樹中的部分。
偽類
偽類 用于當(dāng)元素處于某個(gè)狀態(tài)時(shí)菩浙，為其添加對(duì)應(yīng)的樣式巢掺，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的伤为。比如說丰刊，用戶懸停在指定的元素時(shí)元践，我們可以通:hover來描述這個(gè)元素的狀態(tài)贬芥。雖然它和普通的css類類似场梆，可以為已有的元素添加樣式益眉，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式佳遣，所以將其稱為偽類奸鸯。
偽元素
偽元素 用于創(chuàng)建不在文檔樹中的元素坝初，并為其添加樣式浸剩，比如說，我們可以通過：before來在一個(gè)元素前添加一些文本鳄袍，并為這些文本添加樣式绢要。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中拗小。
css 選擇器
通用選擇器(*)
標(biāo)簽選擇器（div）
class選擇器(.wrap)
id選擇器（#wrap）
屬性選擇器(E[att], E[att=val], E[att~=val])
E[att]： 匹配所有具有att屬性的E元素重罪，不考慮它的值
E[att=val]：匹配所有att屬性等于"val"的E元素
E[att~=val]：匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于"val"的E元素
相鄰選擇器(h1 + p)
子選擇器（ul > li）
后代選擇器（li a）
偽類選擇器：
E:first-child：匹配父元素的第一個(gè)子元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
E:not(s) 反選偽類哀九，匹配不符合當(dāng)前選擇器的任何元素
css解析規(guī)則
CSS選擇器是 從右向左解析 剿配。
兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)）阅束，而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面呼胚。https://juejin.cn/post/6844904117819850765#heading-7
display: none和 visibility:hidden
是否占據(jù)空間
display: none 不占據(jù)空間
visibility:hidden 占據(jù)空間
是否渲染
display:none，會(huì)觸發(fā)reflow（回流）息裸，進(jìn)行渲染蝇更。
visibility:hidden，只會(huì)觸發(fā)repaint（重繪）呼盆，因?yàn)闆]有發(fā)現(xiàn)位置變化年扩，不進(jìn)行渲染。
是否是繼承屬性
display:none宿亡，display不是繼承屬性常遂，元素及其子元素都會(huì)消失。
visibility:hidden，visibility是繼承屬性克胳，若子元素使用了visibility:visible平绩，則不繼承，這個(gè)子孫元素又會(huì)顯現(xiàn)出來漠另。
opacity 會(huì)將元素設(shè)置為透明捏雌，但是其位置也在頁面文檔流中，不會(huì)被刪除笆搓，所以會(huì)觸發(fā)瀏覽器渲染引擎的重繪
em rem vh vw calc(), line-height 百分比
em
em: 相對(duì)父元素的font-size性湿，具有繼承的特點(diǎn)。如果字體大小是16px（瀏覽器的默認(rèn)值）满败，那么 1em = 16px
rem
rem：相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算肤频，不會(huì)像em那樣，依賴于父元素的字體大小算墨，而造成混亂
vw 和vh
vw：viewpoint width宵荒，視窗寬度，1vw等于視窗寬度的1%净嘀。
vh：viewpoint height报咳，視窗高度，1vh等于視窗高度的1%挖藏。
vmin：取當(dāng)前vw和Vh中較小的那一個(gè)值暑刃， vmax：取當(dāng)前Vw和Vh中較大的那一個(gè)值
vw、vh 與 % 百分比的區(qū)別：
- % 是相對(duì)于父元素的大小設(shè)定的比率膜眠，vw岩臣、vh 是視窗大小決定的。
- vw宵膨、vh 優(yōu)勢在于能夠直接獲取高度婿脸，而用 % 在沒有設(shè)置 body 高度的情況下，是無法正確獲得可視區(qū)域的高度的柄驻，所以這是挺不錯(cuò)的優(yōu)勢。
calc()
calc(): CSS3中新增的一個(gè)函數(shù), 用于動(dòng)態(tài)計(jì)算寬/高焙压，使用數(shù)學(xué)表達(dá)式來表示
- 使用“+”鸿脓、“-”、“*” 和 “/”四則運(yùn)算涯曲；
- 可以使用百分比野哭、px、em幻件、rem等單位拨黔；
- 可以混合使用各種單位進(jìn)行計(jì)算；
- 表達(dá)式中有“+”和“-”時(shí)绰沥，其前后必須要有空格篱蝇，如"width: calc(12%+5em)"這種沒有空格的寫法是錯(cuò)誤的贺待；
vertical-align
用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。
可被用于兩種環(huán)境：
- 使行內(nèi)元素盒模型與其行內(nèi)元素容器垂直對(duì)齊零截。
- 垂直對(duì)齊表格單元內(nèi)容
line-height 百分比
可以直接查看MDN上的相關(guān)解釋：
line-height 屬性被指定為以下任何一個(gè)：
- 一個(gè) <數(shù)字>： 該屬性的應(yīng)用值是這個(gè)無單位數(shù)字<數(shù)字>乘以該元素的字體大小
- 一個(gè) <百分比>：與元素自身的字體大小有關(guān)麸塞。計(jì)算值是給定的百分比值乘以元素計(jì)算出的字體大小
- 一個(gè) <長度> ：必須px， em等涧衙，詳細(xì)查看CSS長度
- 關(guān)鍵詞 normal哪工。
rem 布局
實(shí)際開發(fā)過程中，可以使用 lib-flexible庫弧哎，但是如果每次寫的時(shí)候都要手動(dòng)去計(jì)算有點(diǎn)太過麻煩了雁比，我們可以通過在webpack中配置 px2rem-loader, 或者 pxrem-loader，主要原理就是需要自己配置 px轉(zhuǎn)rem的計(jì)算規(guī)則撤嫩，在編輯的時(shí)候直接計(jì)算轉(zhuǎn)成rem偎捎。所以在開發(fā)的時(shí)候直接按照設(shè)計(jì)稿的尺寸寫px，編譯后會(huì)直接轉(zhuǎn)化成rem非洲；
推薦：
postcss
postcss可以理解為CSS的”babel“鸭限，可以讓我們使用比較新的CSS語法
postcss 不是類似less的CSS預(yù)處理器， 而是一種允許用JS插件來轉(zhuǎn)變樣式的工具两踏。 postcss提供了一個(gè)解析器败京，它能夠?qū)SS解析成抽象語法樹(AST)。
postcss的常用插件
- autoprefixer： autoprefixer插件會(huì)給根據(jù)CanIUse的兼容性去檢查你的CSS代碼梦染，然后自動(dòng)為你的CSS代碼加上瀏覽器廠商的私有前綴
- precss
- postcss-cssnext
- PostCSS 是個(gè)什么鬼東西赡麦？
css modules
作用:
- 避免css相互覆蓋的方法，CSS Modules 加入了局部作用域和模塊依賴
實(shí)現(xiàn)原理:
- CSS的規(guī)則是全局的帕识，任何一個(gè)組件的樣式規(guī)則泛粹，對(duì)整個(gè)頁面有效；
- 產(chǎn)生局部作用域的唯一方法肮疗，就是使用一個(gè)獨(dú)一無二的class名字晶姊，不會(huì)與其他選擇器重名，這就是CSS Modules的實(shí)現(xiàn)原理：將每個(gè)類名編譯成獨(dú)一無二的哈希值伪货；
css 預(yù)處理器
CSS 預(yù)處理器是一個(gè)能讓你通過預(yù)處理器自己獨(dú)有的語法來生成CSS的程序们衙。
絕大多數(shù)CSS預(yù)處理器會(huì)增加一些原生CSS不具備的特性，例如代碼混合碱呼，嵌套選擇器蒙挑，繼承選擇器等
最流行的CSS預(yù)處理器:
less
sass
stylus
postcss
CSS 動(dòng)畫
https://juejin.cn/post/6844903615920898056#heading-2
animation（動(dòng)畫）
用于設(shè)置動(dòng)畫屬性，是一個(gè)簡寫的屬性愚臀，包含6個(gè)屬性
transition（過渡）
用于設(shè)置元素的樣式過度忆蚀，和animation有著類似的效果，但細(xì)節(jié)上有很大的不同
transform（變形）
用于元素進(jìn)行旋轉(zhuǎn)、縮放馋袜、移動(dòng)(translate)或傾斜
translate（移動(dòng)）
translate只是transform的一個(gè)屬性值男旗，即移動(dòng)。
transition 過渡
語法：transition: property duration timing-function delay;
transition-property
設(shè)置過渡效果的 CSS 屬性的名稱
transition-duration
完成過渡效果需要多少秒或毫秒
transition-timing-function
速度效果的速度曲線
transition-delay
定義過渡效果何時(shí)開始
.box {
height: 100px;
width: 100px;
background: green;
transition: transform 1s ease-in 1s;
}
.box:hover {
transform: rotate(180deg) scale(.5, .5);
}
transition產(chǎn)生動(dòng)畫的條件是transition設(shè)置的property發(fā)生變化桃焕，這種動(dòng)畫的特點(diǎn)是需要“一個(gè)驅(qū)動(dòng)力去觸發(fā)”剑肯，有著以下幾個(gè)不足：
1.需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生
2.是一次性的观堂，不能重復(fù)發(fā)生让网，除非一再觸發(fā)
3.只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)师痕，也就是說只有兩個(gè)狀態(tài)
4.一條transition規(guī)則溃睹，只能定義一個(gè)屬性的變化，不能涉及多個(gè)屬性胰坟。
animation
這個(gè)屬性是transition屬性的擴(kuò)展因篇，彌補(bǔ)了transition的很多不足，我理解為animation是由多個(gè)transition的效果疊加笔横，并且可操作性更強(qiáng)竞滓，能夠做出復(fù)雜酷炫的效果
語法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;
name
用來調(diào)用@keyframes定義好的動(dòng)畫，與@keyframes定義的動(dòng)畫名稱一致
duration
指定元素播放動(dòng)畫所持續(xù)的時(shí)間
timing-function
規(guī)定速度效果的速度曲線吹缔，是針對(duì)每一個(gè)小動(dòng)畫所在時(shí)間范圍的變換速率
delay
定義在瀏覽器開始執(zhí)行動(dòng)畫之前等待的時(shí)間商佑，值整個(gè)animation執(zhí)行之前等待的時(shí)間
iteration-count
定義動(dòng)畫的播放次數(shù)，可選具體次數(shù)或者無限(infinite)
direction
設(shè)置動(dòng)畫播放方向：normal(按時(shí)間軸順序),reverse(時(shí)間軸反方向運(yùn)行),alternate(輪流厢塘，即來回往復(fù)進(jìn)行),alternate-reverse(動(dòng)畫先反運(yùn)行再正方向運(yùn)行茶没，并持續(xù)交替運(yùn)行)
play-state
控制元素動(dòng)畫的播放狀態(tài)，通過此來控制動(dòng)畫的暫停和繼續(xù)晚碾，兩個(gè)值：running(繼續(xù))抓半，paused(暫停)
fill-mode
控制動(dòng)畫結(jié)束后，元素的樣式格嘁，有四個(gè)值：none(回到動(dòng)畫沒開始時(shí)的狀態(tài))笛求，forwards(動(dòng)畫結(jié)束后動(dòng)畫停留在結(jié)束狀態(tài))，backwords(動(dòng)畫回到第一幀的狀態(tài))糕簿，both(根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則)涣易，注意與iteration-count不要沖突(動(dòng)畫執(zhí)行無限次)
