引用CSS方式
內(nèi)部引用
html文件中寫一個(gè)<style>標(biāo)簽，并將樣式寫入到里面，舉例：
<style type="text/css">
p {
background: blue;
font-size: large;
}
</style>
外部引用
通過<link>標(biāo)簽實(shí)現(xiàn)，里面有rel表示關(guān)系，href表示css文件地址，舉例：
<link rel="stylesheet" type="text/css" href="a.css">
CSS文件內(nèi)部引入其他CSS文件
@import url(xxx);
// 舉例：@import url("1.css");
注1：
引用可以同時(shí)用，樣式也可以覆蓋樣式，所以最終樣式根據(jù)設(shè)置樣式的優(yōu)先級(jí)決定（一般范圍越精確優(yōu)先級(jí)越高），如果優(yōu)先級(jí)相同就按最后設(shè)置的確定，比如先內(nèi)部設(shè)置背景是藍(lán)色，在后面再引用外部樣式把背景弄成綠色，那么最終就是綠色。但是有個(gè)例外的就是，如果某個(gè)樣式十分重要，不希望被覆蓋，就可以在那個(gè)的值后面加：!important，這樣就能保證樣式固定，舉例：
p {
color: green !important;
}
<p style="color: gray">AAA</p>
結(jié)果就會(huì)發(fā)現(xiàn)本該是灰色的字因?yàn)間reen的時(shí)候加了!important，最終顯示的還是綠色
注2：
link標(biāo)簽不止可以引入CSS，還可以引入網(wǎng)頁圖標(biāo)等，舉例：
<link rel="stylesheet" type="text/css" >
<!-- 引入CSS -->
<link rel="icon" type="image/x-icon" >
<!-- 引入網(wǎng)頁圖標(biāo)（支持ico和png格式）-->
<!-- 其中type屬性可以省略，但是rel屬性不能省略（用于指定文檔和鏈接資源的關(guān)系），rel設(shè)置了，對(duì)應(yīng)的type默認(rèn)也會(huì)被確定 -->
媒體類型
頁面的在對(duì)應(yīng)媒體類型的展示樣式，主要是screen和print兩種，分別決定了屏幕和打印時(shí)的界面樣式，也可以設(shè)置all（默認(rèn)），代表全部設(shè)備都兼容的樣式，舉例：
<style media="screen">
body {
background: blue;
}
</style>
<style media="print">
body {
background: green;
}
</style>
link標(biāo)簽導(dǎo)入
<link rel="stylesheet" href="xxx.css" media="screen">
css內(nèi)部導(dǎo)入
@import url(xxx.css) print;
媒體流響應(yīng)式設(shè)置常用關(guān)鍵詞
screen
print
all
and
or
not
only 瀏覽器支持的樣式才能正常顯示，否則全部忽略
舉例：
@media not print and (min-width: 100px) or ... {
...
}
響應(yīng)式布局
如果希望界面樣式能夠隨著窗口大小的改變而改變，即實(shí)現(xiàn)響應(yīng)式布局，首先需要設(shè)置如下標(biāo)簽：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
媒體查詢
link標(biāo)簽下的media屬性，可以設(shè)置css文件使用條件，因此常用來判斷是在PC端還是移動(dòng)端，舉例：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 響應(yīng)式布局必須設(shè)置的標(biāo)簽 -->
<link media="(min-width: 500px)" rel="stylesheet" href="pc.css" />
<!-- 當(dāng)窗口寬度大于500時(shí)使用pc.css -->
<link media="(min-width: 400px) and (max-width: 500px)" rel="stylesheet" href="mobile.css" />
<!-- 當(dāng)窗口寬度大于400且小于500時(shí)使用mobile.css -->
更多關(guān)于媒體查詢可以參考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
設(shè)置樣式條件
CSS文件中也可以通過語句來根據(jù)條件來決定是否使用該樣式，舉例：
@media(條件) {
樣式1:xxx;
...
}
例如根據(jù)屏幕寬度改變樣式：
input { /* 默認(rèn)樣式 */
width: 14.893617021276595%;
*width: 14.840425531914894%; /* *表示兼容IE瀏覽器 */
}
@media (min-width: 768px) and (max-width: 979px) { /* 窗口大小在768~979之間 */
input {
width: 14.3646408839779%;
*width: 14.311449394616199%;
}
}
更多參考
https://blog.csdn.net/u010510187/article/details/82790963
選擇器
參考我的另一篇：CSS選擇器
繼承
繼承概念：如果一個(gè)元素沒有設(shè)置某個(gè)屬性，那么其就會(huì)跟隨于父元素的該屬性值
屬性繼承
CSS中一些屬性是可以繼承的，如：color、font-size，而對(duì)于不可繼承的屬性，可以通過對(duì)該屬性設(shè)值為inherit來實(shí)現(xiàn)強(qiáng)制繼承
繼承值
繼承的是計(jì)算值（computed里的），而不是設(shè)置的值，例如父元素中設(shè)置font-size為50%，實(shí)際計(jì)算出來的結(jié)果是10px，那么子元素繼承的就是10px而不是50%
元素區(qū)分
基于顯示類型
主要分為：塊級(jí)元素/行內(nèi)元素
塊級(jí)元素
獨(dú)占一行，即使寬沒有占滿一行，這一行也不讓別的元素使用，并且有寬高可以設(shè)置，如：div/p/ul/...
行內(nèi)元素
多個(gè)行內(nèi)元素能夠在父元素的同一行內(nèi)顯示，沒有寬高（inline-block屬于塊級(jí)和行內(nèi)級(jí)的結(jié)合），如：span/a/img/iframe/canvas/video/audio等
注：：
行內(nèi)元素注意：因?yàn)樾袃?nèi)元素沒有寬高（其寬高就是內(nèi)容本身大?。?，因此無法設(shè)置width/height/margin-top/margin-bottom屬性，但是可以設(shè)置margin-left/margin-right
基于內(nèi)容類型
替換元素
元素本身無內(nèi)容，而是根據(jù)其類型和屬性來決定顯示的內(nèi)容，如：img/input/video/...
注：
可以看到如img雖然是行內(nèi)元素，但其可以設(shè)置寬高（行內(nèi)級(jí)替換元素可以設(shè)置寬高）
非替換元素
元素本身有內(nèi)容，而無需本身的類型和屬性來決定顯示的內(nèi)容，如：div/...
偽類和偽元素
常用樣式
通用屬性
initial 使用默認(rèn)值
inherit 繼承于父類
unset 不設(shè)置（可以理解為如果可繼承的樣式，則繼承，否則使用默認(rèn)值）
固定樣式不被覆蓋
!important /* 在樣式的值后面加這個(gè)就能保證不被覆蓋 */
基本單位
px 絕對(duì)單位，具體的像素大小
em 相對(duì)單位，相對(duì)于當(dāng)前對(duì)象font-size的比例（如果沒設(shè)置font-size會(huì)繼承父類的），可以設(shè)置幾個(gè)字的間距
rem 相對(duì)單位，相對(duì)于html的font-size比例
vh 相對(duì)于視圖窗口的高度比例
vw 相對(duì)于視圖窗口的寬度比例
vmin vw和vh中較小的一個(gè)值
vmax vw和vh中較大的一個(gè)值
fr 按比例分配
如果當(dāng)前標(biāo)簽使用了em單位，但沒有font-size，就找父元素的font-size，所以body是整體的默認(rèn)font-size，其他的應(yīng)該根據(jù)body的用em按比例設(shè)置font-size（而子元素則根據(jù)父元素的比例設(shè)置font-size），否則直接寫死的話，將來維護(hù)將會(huì)特別麻煩
還有如rem/vw/vh等單位，可以參考：https://blog.csdn.net/u013594477/article/details/80232495
顏色相關(guān)
color
設(shè)置標(biāo)簽的前景色（除了背景色以外的，例如文字、邊框、外輪廓等顏色，而不單只是文字顏色），舉例：
color: red;
opacity
透明度，舉例：
opacity:0.4; /* 透明度百分比 */
transparent
完全透明，相當(dāng)于rgba(0,0,0,0)，舉例：
background-color: transparent;
linear-gradient
線性漸變，舉例：
background: linear-gradient(to left, red, green, blue);
/* 從右往左依次紅綠藍(lán)漸變 */
background: linear-gradient(to right top, red, blue); /* 從左下角到右上角，紅色到藍(lán)色漸變 */
background: linear-gradient(60deg, red, blue, green, yellow, pink, white);
/* 旋轉(zhuǎn)60度，從左到右按上面?zhèn)鬟f顏色漸變 */
radial-gradient
徑向漸變，舉例：
background: radial-gradient(100px 100px, red, green, blue);
/* 紅綠藍(lán)分別以半徑50px從圓心向外擴(kuò)散 */
background: radial-gradient(red, blue, green, yellow, pink, white);
/* 從里到外按上面?zhèn)鬟f顏色漸變 */
background: radial-gradient(circle at 10px 10px, red, blue, green 50%, yellow, pink, white);
/* 從(10, 10)開始，以圓形往外按上面?zhèn)鬟f顏色漸變，并且綠色的范圍只占原來的一半 */
background: radial-gradient(300px 100px ellipse, red, green, yellow, white);
/* 橫向300px，縱向100px的橢圓往外按上面?zhèn)鬟f顏色漸變 */
repeating-linear-gradient
重復(fù)線性漸變，我們可以用其實(shí)現(xiàn)一些條紋樣式，舉例：
background: repeating-linear-gradient(45deg, blue 0px, blue 30px, white 30px, white 60px);
/* 傾斜45度，0~30px部分為藍(lán)色，30~60px部分為白色，循環(huán)線性漸變的藍(lán)白條紋 */
repeating-radial-gradient
重復(fù)徑向漸變，舉例：
repeating-radial-gradient(circle, blue 10px, white 20px)
/* 圓形，0~10px部分為藍(lán)色，10~30px部分為白色，循環(huán)徑向漸變的藍(lán)白條紋 */
盒子模型相關(guān)
margin
外邊距，舉例：
margin: 0px 0px 0px 0px; /* 四個(gè)分別表示上右下左的外邊距，也有對(duì)應(yīng)的margin-top等 */
padding
內(nèi)邊距，舉例：
padding: 0px 0px 0px 0px; /* 四個(gè)分別表示上右下左的內(nèi)邊距 */
border
邊框，舉例：
border: 1px solid green; /* 邊框粗細(xì)、邊框類型、邊框顏色 */
通過border實(shí)現(xiàn)三角形
div {
height: 0px;
width: 0px;
border-left: 100px solid yellow;
border-bottom: 100px solid transparent;
transform: rotate(45deg)
}
兩個(gè)border連在一起，中間會(huì)有條斜線隔開，把元素長寬改成0，并且其中一個(gè)border設(shè)成透明，就是三角形了，然后可以通過transform調(diào)整方向
border-collapse
合并邊框，舉例：
table {
border-collapse: collapse;
}
border-radius
邊框角度，舉例：
border-radius: 10px; /* 代表4個(gè)角都變成半徑為10px的圓角，可以傳四個(gè)數(shù)值，一次為左上->右上->右下->坐下 */
border-radius: 50%; /* 直接拿尺寸的一半變成半徑，相當(dāng)于直接變成橢圓/圓了 */
box-shadow
盒子陰影，屬性取值：
水平偏移(px) 垂直偏移(px) 模糊半徑(px) 延伸距離(px) 陰影顏色(color) 內(nèi)框陰影(inset，默認(rèn)外框)
舉例：
box-shadow: 10px 10px 5px 10px green inset;
/* x軸往右偏移10px（負(fù)的就代表向左偏移），y軸往下偏移10px，
模糊范圍寬度為5px，陰影尺寸為10px，顏色為綠色，向內(nèi)展示陰影 */
box-sizing
設(shè)置盒子模型類型，主要分為兩種：
標(biāo)準(zhǔn)盒子模型：實(shí)際寬高width/height為內(nèi)容（content）的寬高，也是默認(rèn)常用的
IE盒子模型：元素實(shí)際寬高width/height中把padding和border也算在內(nèi)（content+padding+border），適合經(jīng)常調(diào)整padding，但不希望寬高發(fā)生變化的時(shí)候（固定width/height，那么調(diào)整padding時(shí)，只會(huì)改變content。但要注意其不會(huì)改變border，因此當(dāng)content縮小到0時(shí)，padding+border還是超出了寬高限制時(shí)，那么寬高以超出的結(jié)果為準(zhǔn)，例如：height為100px，padding為50px，border為10px，那么最終的content為0，height為0+50*2+10*2=120）
取值如下：
content-box 標(biāo)準(zhǔn)盒子模型，默認(rèn)（width/height = content）
border-box IE盒子模型（width/height = content + padding + border）
height/width自適應(yīng)屬性
fill-available 自動(dòng)撐滿可用空間
fit-content 內(nèi)容多大就多大
max-content
min-content
布局相關(guān)
display
設(shè)置元素的顯示類型，常用值如下：
block 塊級(jí)元素
inline 行內(nèi)級(jí)元素
inline-block 同時(shí)具備塊級(jí)、行內(nèi)級(jí)元素特征：跟多個(gè)行內(nèi)級(jí)元素可以同一行顯示，并且可以設(shè)置寬高（默認(rèn)由內(nèi)容決定）
none 不占空間（隱藏）
注：
塊級(jí)元素和inline-block元素一般內(nèi)部可以包含塊級(jí)、inline-block、行內(nèi)級(jí)元素，但是p標(biāo)簽作為塊級(jí)元素，不能包含塊級(jí)元素；行內(nèi)級(jí)元素一般內(nèi)部只能包含行內(nèi)級(jí)元素
display其他屬性
table table標(biāo)簽
inline-table inline的table標(biāo)簽
table-row tr標(biāo)簽，表格中的一行
table-cell td/th標(biāo)簽，一個(gè)單元格
table-row-group tbody標(biāo)簽，表格內(nèi)容
table-header-group thead標(biāo)簽，表格頭
table-footer-group tfoot標(biāo)簽，表格尾部
table-caption caption標(biāo)簽，表格的標(biāo)題
list-item li標(biāo)簽
grid 柵格布局
柵格布局
將元素拆分為xx行和yy列進(jìn)行展示，類似于表格的布局，但對(duì)于各行各列的寬高占比，可以很方便的進(jìn)行分配，舉例：
<head>
<style>
.grid {
background-color: white;
display: grid;
/* 柵格布局 */
grid-template-rows: auto;
/* 多行高度平均分配 */
grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
/* 每行分5列，寬度比為：1:2:3:2:1 */
height: 300px;
width: 600px;
grid-gap: 2px;
}
.grid>div{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
柵格布局相關(guān)屬性
類似柵格系統(tǒng)一樣可以給內(nèi)容分列顯示
- 分列數(shù)：column-count
column-count: 3; /* 分3列 */
- 分列間隔：column-gap
column-gap: 10px; /* 分列間隔為10px */
- 分列邊框樣式：column-rule
column-rule: 2px solid yellow; /* 分列邊框2px，黃色 */
flex
彈性布局，在移動(dòng)端開發(fā)中很常用，其中設(shè)置display: flex;或display: inline-flex;的元素被稱為flex container，而其的直接子元素（子元素的子元素不算）則被稱為flex items
常用屬性
flex-direction
container配置，規(guī)定主軸的方向，常用值如下：
row 主軸從左到右，交叉軸從上到下
row-reverse 主軸從右到左，交叉軸從上到下
column 主軸從上到下，交叉軸從左到右
column-reverse 主軸從下到上，交叉軸從左到右
justify-content
container配置，規(guī)定flex items在主軸上的對(duì)齊方式，常用值如下：
flex-start 與主軸頭對(duì)齊（例如`row`下就是向左對(duì)齊）
flex-end 與主軸尾對(duì)齊
center 居中對(duì)齊
space-between 兩端對(duì)齊，并且`flex items`之間距離相等
space-evenly 在兩端以及`flex items`之間距離相等
space-around 在兩端的距離是`flex items`之間距離的一半
align-items
container配置，規(guī)定flex items在交叉軸的對(duì)齊方式，常用值如下：
flex-start 與交叉軸頭對(duì)齊
flex-end 與交叉軸尾對(duì)齊
center 居中對(duì)齊
baseline 與基線對(duì)齊
strech 如果flex items在交叉軸方向的size為auto時(shí)，將填充占滿交叉軸
flex-wrap
container配置，規(guī)定flex container是單行還是多行（當(dāng)單行的item寬度超過時(shí)才會(huì)換行）
nowrap 單行，默認(rèn)
wrap 多行
wrap-reverse 多行，但是交叉軸是反過來的
flex-flow
container配置，flex-direction和flex-wrap的簡寫，舉例：
flex-flow: cloumn wrap;
align-content
container配置，規(guī)定多行flex items在交叉軸的對(duì)齊方式，常用值如下：
flex-start 與交叉軸頭對(duì)齊
flex-end 與交叉軸尾對(duì)齊
center 居中對(duì)齊
stretch 如果多行flex items在交叉軸方向的size為auto時(shí)，將填充占滿交叉軸
space-between 交叉軸兩端對(duì)齊，并且`flex items`之間距離相等
space-evenly 交叉軸兩端以及`flex items`之間距離相等
space-around 交叉軸兩端的距離是`flex items`之間距離的一半
舉例：
<style>
.row {
display: flex;
background-color: gold;
width: 250px;
height: 300px;
flex-wrap: wrap;
align-content: space-between;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col">1</div>
<div class="col" style="height: 30px">2</div>
<div class="col">3</div>
<div class="col" style="height: 120px">4</div>
</div>
</body>
order
item配置，規(guī)定flex items的排列順序，可以設(shè)置任何整數(shù)（默認(rèn)為0），值越小越靠前
align-self
item配置，通過該屬性可以覆蓋flex container中設(shè)置的align-items屬性，屬性值參考align-items
flex-grow
item配置，規(guī)定flex items的擴(kuò)展系數(shù)，可以設(shè)置任意正數(shù)或者0（默認(rèn)為0），代表在主軸的擴(kuò)展相對(duì)比例，舉例：
<style>
.row {
display: flex;
background-color: gold;
width: 600px;
height: 100px;
flex-wrap: wrap;
align-content: space-between;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-grow: 1;">1</div>
<div class="col" style="height: 30px; flex-grow: 2;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
該屬性只有flex container在主軸方向有剩余空間時(shí)才有效
flex-shrink
item配置，規(guī)定flex items的收縮系數(shù)，可以設(shè)置任意正數(shù)或者0（默認(rèn)為1），其中值大于1則收縮，值大于0小于1則放大（相對(duì)），舉例：
<style>
.row {
display: flex;
background-color: gold;
width: 300px;
height: 100px;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-shrink: 20;">1</div>
<div class="col" style="height: 30px; flex-shrink: 0.1;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
該屬性只有flex items在主軸方向的尺寸超過了flex container的尺寸時(shí)才有效
flex-basis
item配置，規(guī)定flex items在主軸上的基礎(chǔ)尺寸，默認(rèn)是content大小，常用值如下：
auto 默認(rèn)
數(shù)字 代表具體的基礎(chǔ)size
舉例：
<style>
.row {
display: flex;
background-color: gold;
width: 300px;
height: 100px;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-basis: 200px;">1</div>
<div class="col" style="height: 30px;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
在item上設(shè)置flex-basis和width大多情況結(jié)果相同，但flex-basis的優(yōu)先級(jí)高于width，但flex-basis和width一樣都會(huì)受到min-width/max-width的制約，更多參考：https://juejin.cn/post/6844903914148462599
flex
item配置，flex-grow、flex-shrink和flex-basis的簡寫，其支持單值語法、雙值語法和三值語法，舉例：
flex: 0; // flex:0 1 0;
flex: 100px; // flex-basis: 100px;
flex: 1 1; // flex:1 1 0;
flex: 0 0 auto;
定位相關(guān)
position
指定元素的定位方式，常用值如下：
static 靜態(tài)定位，默認(rèn)
relative 相對(duì)定位
absolute 絕對(duì)定位
fixed 固定定位
sticky 粘性定位
靜態(tài)定位
標(biāo)準(zhǔn)流布局下的默認(rèn)定位方式
注：
標(biāo)準(zhǔn)流：元素默認(rèn)從上到下，從左到右的排序方式
相對(duì)定位
在標(biāo)準(zhǔn)流布局下，可以通過left/right/top/bottom屬性，參照原來的位置進(jìn)行定位偏移
絕對(duì)定位
元素脫離標(biāo)準(zhǔn)流，通過left/right/top/bottom屬性，參照父元素中最近的一個(gè)定位元素（非靜態(tài)定位的元素）進(jìn)行定位
注：
絕對(duì)定位和固定定位可能會(huì)修改元素布局，參考：https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
固定定位
元素脫離標(biāo)準(zhǔn)流，通過left/right/top/bottom屬性，一般情況下參照瀏覽器窗口的位置進(jìn)行固定定位，但也有例外，例如下面：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
transform: scale(1);
position: relative;
left: 100px;
top: 100px;
}
.child {
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
可以看到明明fixed定位到頁面左上角，實(shí)際上卻有100px的間隔，這是因?yàn)楫?dāng)元素祖先的 transform, perspective 或 filter 屬性非 none 時(shí)，容器由視口改為該祖先，所以child參照的是parent節(jié)點(diǎn)而不是視口
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
粘性定位
類似于相對(duì)定位+固定定位，當(dāng)內(nèi)容沒到父元素邊界時(shí)，按相對(duì)定位行為正常展示；當(dāng)?shù)竭_(dá)父元素邊界時(shí)，則會(huì)固定在指定位置上，適用于那種閱讀文章時(shí)，固定當(dāng)前章節(jié)的標(biāo)題在頂部的場景，舉例：
<head>
<style>
.main {
width: 200px;
height: 200px;
overflow: auto;
}
.head {
position: sticky;
width: 200px;
height: 30px;
top: 0px;
background-color: red;
}
.content {
height: 200px;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="main">
<div class="head">111</div>
<div class="content">xxxxxxx</div>
<div class="head">222</div>
<div class="content">yyyyyyy</div>
<div class="head">333</div>
<div class="content">zzzzzzz</div>
</div>
</body>
注：
絕對(duì)定位元素（絕對(duì)、固定）都會(huì)脫標(biāo)，并且不再區(qū)分inline和block，寬高默認(rèn)是自己的內(nèi)容大小，但是可以設(shè)置寬高（類似inline-block，但不是，此時(shí)設(shè)置display屬性已經(jīng)對(duì)其沒有效果）
子絕父相
由于絕對(duì)定位的參照是父元素中最近的定位元素（非靜態(tài)定位的元素），如果此時(shí)不希望父元素脫標(biāo)，一般會(huì)講父元素設(shè)置為相對(duì)定位，也就是所謂的"子絕父相"
z-index
用于設(shè)置定位元素（非靜態(tài)定位的元素）的層疊關(guān)系
元素重疊問題
- 非定位元素（static）一般不會(huì)重疊，但可以使用margin之類的屬性實(shí)現(xiàn)重疊，此時(shí)一般后面的元素會(huì)蓋在前面的上面
- 定位元素一定是蓋在非定位元素上
- 定位元素之間可以通過z-index來確定層疊關(guān)系
z-index對(duì)比原則
同一個(gè)祖先元素下對(duì)比（兄弟關(guān)系，直接當(dāng)前元素比較）：
-
z-index大的蓋在上面（沒設(shè)置默認(rèn)是0）； -
z-index相等，那么后面的蓋在上面；
非同祖先元素對(duì)比（各自找出祖先元素中離自己最近的定位元素比較，標(biāo)準(zhǔn)和上面一樣，跟當(dāng)前元素的z-index無關(guān)），例如：
<head>
<style>
.a1, .a2 {
height: 100px;
width: 100px;
position: relative;
}
.a1-1, .a2-1 {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="a1" style="z-index: 10;">
<div class="a1-1" style="background: blue; z-index: 10;">div1</div>
</div>
<div class="a2" style="z-index: 1; top: -30px; left: 10px;">
<div class="a2-1" style="background: green; z-index: 1000;">div2</div>
</div>
</body>
這里因?yàn)?code>div1的祖先元素大于div2的祖先元素，因此無論div2的z-index設(shè)置多大，都不可能蓋住div1，只能通過將其祖先元素.a2的z-index調(diào)大才能實(shí)現(xiàn)
float
浮動(dòng)樣式，常用值如下：
none 不浮動(dòng)，默認(rèn)
left 向左浮動(dòng)
right 向右浮動(dòng)
float層疊關(guān)系
- 對(duì)于非定位元素，float元素一定蓋在其上方
- 對(duì)于定位元素，一定蓋在float元素上方
float規(guī)則
- 一旦設(shè)置了
float屬性不為none，則脫離標(biāo)準(zhǔn)流，直接往左/右邊的父元素邊界或者其他浮動(dòng)元素上靠 - float元素不能和行內(nèi)級(jí)內(nèi)容重疊（如span標(biāo)簽的行內(nèi)元素、inline-block，包括塊級(jí)內(nèi)容里面的文字也是），其會(huì)將這些內(nèi)容擠出去，因此可以用該特性實(shí)現(xiàn)文字環(huán)繞（圖片作為浮動(dòng)元素，將內(nèi)部的文字?jǐn)D開，從而實(shí)現(xiàn)效果）
- float之間也不能重疊，而是緊貼上去。如果水平方向上空間不夠時(shí)，則會(huì)沿垂直方向移動(dòng)一些，直到有充足的空間可以裝下該元素
clear
控制自身元素和浮動(dòng)對(duì)象的位置關(guān)系，常用值如下：
none 無特殊要求，默認(rèn)
left 要求元素頂部低于之前所有左浮動(dòng)元素的底部（左側(cè)不能有浮動(dòng)元素）
right ...右浮動(dòng)...
both ...左/右浮動(dòng)...
背景相關(guān)
background-color
背景顏色，舉例：
background-color: rgba(0, 0, 0, 0.3); /* rgba前三個(gè)參數(shù)是三原色，最后一個(gè)是透明度百分比 */
background-image
背景圖片，其會(huì)蓋在background-color上，并且可以設(shè)置多張圖片，舉例：
background-image: url("xxx.jpg"), url("yyy.jpg"), ...;
設(shè)置多張圖片時(shí)，第一張展示在最上面，其他的依次往下疊（所以是疊在一起展示的）
注1：
使用image-set設(shè)置多個(gè)背景圖片時(shí)，還可以設(shè)置尺寸，此時(shí)瀏覽器會(huì)自動(dòng)識(shí)別當(dāng)前屏幕分辨率，并選擇適配的背景圖，舉例：
background-image: image-set(url("xxx.jpg") 1x, url("yyy.jpg") 2x, ...);
注2：
設(shè)置的背景圖片，需要元素有具體的寬高才能夠展示出來
background-repeat
設(shè)置背景圖片的展示是否平鋪，常用值如下：
no-repeat 不平鋪
repeat 平鋪
repeat-x 水平平鋪
repeat-y 垂直平鋪
background-size
設(shè)置圖片尺寸，舉例：
background-size: 100px 50px;
/* 指定寬100px，高50px */
background-size: auto 50px;
/* 指定寬維持圖片原本寬高比，高50px */
background-size: 100px auto;
/* 指定寬100px，高維持圖片原本寬高比 */
background-size: 100px;
/* 指定寬100px，高維持圖片原本寬高比（第二個(gè)不寫，默認(rèn)auto） */
background-position
背景圖片在水平/垂直方向的具體位置，第一個(gè)是水平方向，第二個(gè)是垂直方向，舉例：
background-position: 10px 20px;
/* 往右移動(dòng)10px，往下移動(dòng)20px */
其他設(shè)值：
水平：left|center|right
垂直：top|center|bottom
如果只設(shè)置一個(gè)，另一個(gè)默認(rèn)是center
注：
該屬性常結(jié)合雪碧圖使用
background-attachment
設(shè)置背景圖片的顯示行為，常用值如下：
scroll 背景圖片隨元素一起滾動(dòng)，默認(rèn)
local 背景圖片跟隨元素及元素內(nèi)容一起滾動(dòng)
fixed 背景圖片相對(duì)于瀏覽器窗口固定
注：
該屬性經(jīng)常用于希望整體頁面背景不隨著頁面一起滾動(dòng)的時(shí)候
background
是前面幾個(gè)屬性的簡寫屬性，舉例：
background: url("xxx.jpg") right bottom no-repeat fixed red;
/* 屬性可省略，順序也可以任意，但background-size必須緊跟在background-position后面 */
background-clip
背景覆蓋到哪，常用值如下：
content-box 只覆蓋內(nèi)容
padding-box 只到padding里
border-box 只到邊框，默認(rèn)
字體相關(guān)
font-size
字體大小，舉例：
font-size: 30px;
font-weight
字體粗細(xì)，舉例：
font-weight: 100;
font-family
設(shè)置字體，可以設(shè)置多個(gè)，用逗號(hào)隔開
注1：當(dāng)設(shè)置多個(gè)字體時(shí)，每個(gè)字（不是整個(gè)標(biāo)簽，而是以字符為單位）都會(huì)從第一個(gè)字體開始匹配，如果該字體能用，就不看后面的:
字體除非是有空格或者中文名，否則可以不加引號(hào)，舉例：
font-family: "微軟雅黑", Consolas, "Microsoft ..."
注2：因?yàn)橹形淖煮w一般兼容英文，這樣英文字體可能就無法應(yīng)用到英文上，所以英文字體應(yīng)該放前面
@font-face
加載自定義字體，舉例：
@font-face {
/* 加載一個(gè)字體 */
src: url("font/xxx.ttf");
font-family: "我的字體";
/* 給字體命名 */
}
.test {
font-family: "我的字體";
/* 使用前面加載的字體 */
}
font-style
字體樣式，常用值如下：
normal 正常
italic 斜體
oblique 傾斜
注：如果字體不支持斜體那么italic則沒有效果，而oblique則是不管支不支持斜體，都會(huì)將內(nèi)容傾斜表示
文本相關(guān)
text-align
文字水平對(duì)齊，常用值如下：
left 左對(duì)齊
right 右對(duì)齊
center 居中
justify 兩端對(duì)齊
vertical-align
設(shè)置行內(nèi)級(jí)元素在垂直方向的位置，常用值如下：
baseline 與基線對(duì)齊，默認(rèn)
sub 將元素基線下降
super 將元素基線上升
middle 元素中心點(diǎn)與父元素基線加上字母x一半高的線對(duì)齊
text-top 元素頂部和父元素內(nèi)容的頂部對(duì)齊
text-bottom 元素底部和父元素內(nèi)容的底部對(duì)齊
top 元素頂部和行頂部對(duì)齊
bottom 元素底邊和行底邊對(duì)齊
百分比 將元素基線上升/下降一定距離（相對(duì)于行高計(jì)算）
具體像素 將元素基線上升/下降一定距離
使用場景：如一些數(shù)學(xué)公式的上標(biāo)和下標(biāo)就 可能用到sub/super
line-height
行高，定義：兩行文字baseline之間的間距
baseline：小寫字母x底部的對(duì)齊線
設(shè)置值：
數(shù)字+px 具體像素值
數(shù)字 相對(duì)于font-size的比例
百分比 相對(duì)于font-size的比例
normal 瀏覽器自動(dòng)調(diào)整
注：
line-height設(shè)置的僅是最小行高，而不是最終行高，具體的行高可能會(huì)因?yàn)槠渌氐挠绊懚淖?，例如下面這個(gè)例子：
div {
line-height: 20px;
}
<div>aaa<img src="xxx.jpg"></div>
如果圖片的高度大于20px，那么最終也會(huì)發(fā)現(xiàn)div的行高不止20px
letter-spacing/word-spacing
設(shè)置字符/單詞的間距
word-break
設(shè)置文本換行，有以下可選值：
normal 默認(rèn)
break-all 可在任意字符間斷行
keep-all CJK 文本(CJK 指中文/日文/韓文) 不斷行。 Non-CJK 文本表現(xiàn)同 normal
break-word 以單詞為換行依據(jù)
參考：https://blog.csdn.net/pan_junbiao/article/details/7418102
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
text-transform
設(shè)置字母大小寫轉(zhuǎn)換，有以下可選值：
capitalize 每個(gè)單詞的首字母大寫
uppercase 每個(gè)單詞全部轉(zhuǎn)大寫
lowercase 每個(gè)單詞全部轉(zhuǎn)小寫
none 不進(jìn)行轉(zhuǎn)換處理，默認(rèn)
white-space
設(shè)置空白處理和換行規(guī)則，常用值如下：
normal 合并所有連續(xù)的空白，水平內(nèi)容超出時(shí)自動(dòng)換行
nowrap 合并所有連續(xù)空白，不允許自動(dòng)換行
pre 不合并所有連續(xù)空白，不允許自動(dòng)給換行
pre-wrap 不合并所有空白，允許自動(dòng)換行
pre-line 合并所有連續(xù)空白（除了換行），允許自動(dòng)換行
注：
可以看出<pre>標(biāo)簽就是通過設(shè)置white-space: pre;實(shí)現(xiàn)的
text-overflow
控制文字溢出時(shí)的行為，常用值如下：
clip 溢出部分剪掉
ellipsis 溢出部分用省略號(hào)表示
注：
使用text-overflow的前提是overflow部分不允許可視，例如：overflow: hidden;，我們可以結(jié)合該屬性實(shí)現(xiàn)多余內(nèi)容用省略號(hào)展示，舉例：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration
文本樣式，舉例：
text-decoration: none; /* 去除下劃線 */
text-shadow
文本陰影，和盒子陰影用法差不多
text-stroke
字體邊框，舉例：
color: transparent;
-webkit-text-stroke: 2px green;
-moz-text-stroke: 2px green;
/* 字體透明，邊框綠色的鏤空文字，該屬性需要設(shè)置兼容性 */
變形相關(guān)
transform
可以設(shè)置各種變形樣式，其中有很多的屬性，可以多個(gè)組合使用，下面會(huì)介紹這些屬性
translateX/translateY/translateZ/translate/translate3d
沿x軸/y軸/z軸/x+y軸/x+y+z軸移動(dòng)一定距離，舉例：
transform: translate(20%, 100px);
rotateX/rotateY/rotateZ/rotate/rotate3d
沿x軸/y軸/z軸/x+y軸/x+y+z軸旋轉(zhuǎn)，舉例：
transform: rotate(45deg);
perspective
透視，一般和旋轉(zhuǎn)組合使用，舉例：
transform: perspective(300px) rotateY(45deg);
scaleX/scaleY/scaleZ/scale/scale3d
沿x軸/y軸/z軸/x+y軸/x+y+z軸縮放，舉例：
transform: scale(2);
skewX/skewY/skewZ/skew/skew3d
沿x軸/y軸/z軸/x+y軸/x+y+z軸傾斜，舉例：
transform: skew(45deg);
transform-origin
設(shè)置變形參考點(diǎn)（以哪個(gè)點(diǎn)為基準(zhǔn)進(jìn)行運(yùn)動(dòng)，默認(rèn)是中心點(diǎn)），舉例：
transform-origin: 0% 100%;
/* 以左下角為參考點(diǎn) */
transform: rotate(45deg);
注：
設(shè)置3d參考點(diǎn)，則直接加第三個(gè)參數(shù)即可，但必須用固定的像素值（因?yàn)閦軸沒有可參考的比例，只有0~∞），舉例：
transform-origin: left top -500px;
transform-style
設(shè)置變形呈現(xiàn)的樣式，常用值如下：
flat 平面展示
preserve-3d 3d展示
backface-visibility
元素背面是否可視，常用值如下：
visible 可視，此時(shí)將以鏡像方式展示元素正面的內(nèi)容
hidden 隱藏，背面直接變成透明
過渡動(dòng)畫相關(guān)
參考：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
transition
從一種樣式到另一種樣式的過渡時(shí)間，最好不要放在hover之類的偽類里，那樣一離開對(duì)應(yīng)狀態(tài)就沒有過渡時(shí)間了，直接放在元素本身里，這樣比較好，舉例：
<head>
<style>
.a1 {
height: 100px;
width: 100px;
position: relative;
background: blue;
transform: perspective(500px) rotatey(45deg);
}
.a1-1 {
height: 100%;
width: 100%;
background: green;
transition: 2s;
/* 不要放在hover里 */
}
.a1-1:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="a1">
<div class="a1-1">div</div>
</div>
</body>
transition-property
指定參與過渡的屬性（默認(rèn)是全部屬性），舉例：
transition-property: width, height;
transition-duration
設(shè)置各個(gè)屬性的過渡時(shí)間：
transition-property: width, height;
transition-duration: 1s, 2s;
/* 寬度變化進(jìn)行1秒，高度變化進(jìn)行2秒 */
注：
當(dāng)設(shè)置的時(shí)間和屬性數(shù)量不匹配時(shí)，會(huì)循環(huán)賦值，例如有4個(gè)參與過渡的屬性，設(shè)置了3個(gè)過渡時(shí)間，那么第四個(gè)屬性的過渡時(shí)間就參照第一個(gè)的
transition-timing-funciton
設(shè)置過渡的運(yùn)動(dòng)軌跡（例如先變很快然后再慢、勻速等），舉例：
transition-timing-funciton: linear;
/* 勻速變化 */
transition-timing-funciton: steps(3, start);
/* 分3步變化，從初始樣式開始，適合時(shí)鐘那樣按幀數(shù)變化的場景 */
transition-delay
延遲觸發(fā)，舉例：
transition-delay: 1s;
適合場景：例如某些樣式不希望鼠標(biāo)一到上面就觸發(fā)，可能只是鼠標(biāo)不小心劃過，如果想要觸發(fā)，就需要鼠標(biāo)停在上面一會(huì)兒
幀動(dòng)畫相關(guān)
使用步驟
- 通過
@keyframes 動(dòng)畫名{}定義動(dòng)畫，可以通過from和to定義初始和結(jié)束狀態(tài)，也可以通過xx%百分比來定義不同時(shí)段的狀態(tài) - 通過
animation屬性來使用動(dòng)畫，傳入的值依次為：動(dòng)畫名 動(dòng)畫時(shí)間 延遲執(zhí)行時(shí)間 執(zhí)行次數(shù) 變化效果 是否循環(huán)
舉例：
@keyframes change-color {
0%, 50% {
background: black;
}
25% {
background: green;
}
100% {
background: white;
}
}
div {
height: 100px;
width: 100px;
animation: change-color 4s 1s infinite linear alternate;
/*使用change-color動(dòng)畫，執(zhí)行4s，延遲1s才開始，無限循環(huán)，線性變換，
動(dòng)畫一次周期結(jié)束后逆向播放（即變換樣式是：1->2->3->4->3->2->1->2->...）*/
}
animation-name
指定定義的幀動(dòng)畫名，可以指定多個(gè)
animation-duration
一次幀動(dòng)畫執(zhí)行的時(shí)間
animation-iteration-count
幀動(dòng)畫循環(huán)執(zhí)行多少次，對(duì)多個(gè)動(dòng)畫可以分別指定次數(shù)，無限循環(huán)則設(shè)置infinite
animation-direction
幀動(dòng)畫執(zhí)行方向
animation-fill-mode
幀動(dòng)畫填充模式
animation-timing-function
分步執(zhí)行幀動(dòng)畫，舉例：
animation-timing-function: steps(3, start);
animation
前面樣式的組合寫法，舉例：
animation: changeColor forwards 2s;
svg樣式
fill
圖標(biāo)的填充顏色，舉例：
svg {
fill: currentColor;
}
其他樣式
cursor
鼠標(biāo)光標(biāo)在元素上的顯示樣式，常用值如下：
auto 瀏覽器根據(jù)上下文自己決定
default 默認(rèn)是一個(gè)小箭頭
pointer 一個(gè)手指
text 編輯樣式
none 沒有鼠標(biāo)光標(biāo)顯示
注：
cursor還可以設(shè)置圖片，以及在圖片上的偏移位置，舉例：
cursor: url("xxx.png") 0 0, pointer;
/* 使用圖片來代替光標(biāo)，其中在圖片上水平和垂直方向向上偏移為0，當(dāng)圖片不存在時(shí)使用pointer代替 */
list-style
li標(biāo)簽樣式，舉例：
list-style: none; /* 不顯示前面的符號(hào) */
outline
設(shè)置元素的外輪廓，主要用于設(shè)置a/input元素focus時(shí)的輪廓效果，其不占用空間，默認(rèn)顯示在border外部，相關(guān)屬性：
outline-width 寬度
outline-style 樣式，如：solid/dotted
outline-color
ouline 上面3個(gè)的簡寫，和border用法差不多
outline-offset outline和border的間距
例如focus效果去除，舉例：
:focus {
outline: none;
}
visibility
控制元素是否可視，常用值如下：
visible 顯示元素
hidden 隱藏元素
注：
visibility: hidden/display: none區(qū)別：前者雖然隱藏了，但元素的寬高位置還是會(huì)占著，可以理解為"透明"了；后者則不但隱藏了，連寬高都沒了，可以理解為"完全消失"了
overflow
控制內(nèi)容溢出時(shí)的行為，常用值如下：
visible 溢出照樣可見
hidden 溢出隱藏
scroll 溢出可通過滾動(dòng)條查看，但不論是否溢出都會(huì)顯示滾動(dòng)條
auto 當(dāng)內(nèi)容溢出時(shí)則顯示滾動(dòng)條
注：
還有overflow-x/overflow-y屬性分別用于設(shè)置水平和垂直方向的溢出行為
filter
設(shè)置元素顯示樣式，舉例：
filter: blur(10px);
/* 圖片模糊展示 */
user-select
控制元素是否可被選中，常用值如下：
text 可以選中，也就是變藍(lán)色（默認(rèn)）
none 文本不可被選中
all 當(dāng)雙擊子元素或者上下文時(shí)，最頂層也同時(shí)被選中
contain 只能在當(dāng)前元素內(nèi)部選擇
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
object-fit
指定替換元素的寬高適配方式，常用值如下：
fill 填充并拉伸
contain 保持寬高比縮放
cover 保持寬高比填充
none 保持原來尺寸
scale-down 選擇none和contain中更小的尺寸
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
object-position
指定替換元素在內(nèi)容框中的位置，舉例：
object-position: 50% 50%;
object-position: left top;
object-position: 50px 100px;
pointer-events
指定元素的鼠標(biāo)事件觸發(fā)機(jī)制，舉例：
// 不觸發(fā)點(diǎn)擊事件
pointer-events: none;
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
函數(shù)
var
可以使用定義的變量，舉例：
:root {
--theme-color: blue; // 定義變量--theme-color
}
body {
background-color: var(--theme-color); // 通過var獲取對(duì)應(yīng)變量
}
參考：
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
calc
可以進(jìn)行不同單位之間的運(yùn)算，舉例：
width: calc(100% - 50px); // 注意運(yùn)算符兩端要有空格
關(guān)鍵字
顏色相關(guān)
currentColor
用于指代當(dāng)前的顏色（color值，可以繼承自父元素），一般情況下可以理解成color: inherit;，但是對(duì)于其他顏色屬性（如：background-color/fill/...）想要保持和color值一致是，可以使用該關(guān)鍵字替代，舉例：
svg {
fill: currentColor;
}
參考：
https://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
https://blog.csdn.net/weixin_30642305/article/details/99194229
https://blog.csdn.net/crper/article/details/52772817
居中方案
水平居中
行內(nèi)元素
對(duì)于塊級(jí)元素中的行內(nèi)元素如果希望居中，可以直接設(shè)置text-align: center;實(shí)現(xiàn)
塊級(jí)元素
如果是沒有脫標(biāo)的塊級(jí)元素，可以使用如下方案：
- 對(duì)塊級(jí)元素本身通過設(shè)置
margin: 0 auto;實(shí)現(xiàn)（如果沒成功，最好看看塊級(jí)元素的寬度是否本身占滿一行） - 對(duì)父元素使用彈性布局設(shè)置：
display: flex;
justify-content: center;
如果是絕對(duì)定位元素，可以定位如下：
position: absolute;
width: 寬度;
left: 50%;
margin-left: -寬度的一半;
即：左邊移動(dòng)到中間，然后再左移寬度的一半，這樣就能實(shí)現(xiàn)居中的效果
在不知道高度的情況下，絕對(duì)定位元素水平居中還可以實(shí)現(xiàn)如下：
position: absolute;
left: 50%;
transform: translateX(-50%);
即：往右移動(dòng)一半，在通過transform往左移動(dòng)當(dāng)前位置的一半
垂直居中
行內(nèi)元素
對(duì)于塊級(jí)元素中的行內(nèi)元素如果希望居中，可以直接設(shè)置line-height: 父元素高度;實(shí)現(xiàn)
塊級(jí)元素
如果是沒有脫標(biāo)的塊級(jí)元素，可以對(duì)父元素使用彈性布局設(shè)置：
display: flex;
flex-direction: column;
justify-content: center;
如果是絕對(duì)定位元素，可以定位如下：
position: absolute;
height: 寬度;
top: 50%;
margin-top: -高度的一半;
即：上邊移動(dòng)到中間，然后再往上移高度的一半，這樣就能實(shí)現(xiàn)居中的效果
在不知道高度的情況下，絕對(duì)定位元素垂直居中還可以實(shí)現(xiàn)如下：
position: absolute;
top: 50%;
transform: translateY(-50%);
注：
絕對(duì)定位元素整體居中可以直接合并成下面這樣：
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
原理：由于元素width = margin-left + left + 內(nèi)容width + right +margin-right，所以將left/right置0以后，再設(shè)置margin: auto使得margin-left/margin-right平分元素width減去內(nèi)容width的部分，就實(shí)現(xiàn)居中了
樣式參考
頁面呈灰白
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
滾動(dòng)條樣式
舉例：
::placeholder {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
參考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder
https://www.cnblogs.com/sherryweb/p/11023311.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
簡單遮罩效果
首先設(shè)計(jì)一個(gè)display樣式將需要遮罩的部分覆蓋，并將其設(shè)為不可見（none），當(dāng)需要遮罩時(shí)，再將其設(shè)置為block塊覆蓋顯示，代碼示例如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.cover {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<button id="coverAll">點(diǎn)擊開啟遮罩</button>
<div class="cover">
<div align="center" style="height: 100%; width: 100%; line-height: 500px; ">遮罩效果</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$("#coverAll").click(function () {
$(".cover").css("display", "block");
setTimeout(function () {
$(".cover").css("display", "none");
}, 5000)
})
</script>
</html>
注意點(diǎn)
元素空格間隔問題
對(duì)于行內(nèi)級(jí)、inline-block的元素，如果代碼間有空格，則會(huì)導(dǎo)致元素間存在空格，因此有以下解決方式：
- 代碼之間不要留空格
- 用注釋來填中間的空格，例如：
<span>aaa</span><span>bbb</span> - 設(shè)置
font-size為0（內(nèi)部的元素可以再設(shè)置自己的font-size），但該方式在safari瀏覽器中無效
注：
img標(biāo)簽底下存在4px空隙問題：也是因?yàn)榭崭褚?，此時(shí)可以設(shè)置display: block;，或者設(shè)置font-size為0來解決問題
margin傳遞問題
margin-top傳遞：如果塊級(jí)元素的頂部線與其塊級(jí)父元素的頂部線重疊，那么這個(gè)塊級(jí)元素的margin-top會(huì)傳遞給父元素
margin-bottom傳遞：如果塊級(jí)元素的底部線與其塊級(jí)父元素的底部線重疊，那么這個(gè)塊級(jí)元素的margin-bottom會(huì)傳遞給父元素
解決方式：
- 給父元素設(shè)置
padding-top/padding-bottom - 給父元素設(shè)置
border - 給父元素或者子元素設(shè)置
display: inline-block
建議： -
margin一般是用來設(shè)置兄弟元素間的間距 -
padding一般是用來設(shè)置父子元素間的間距
margin折疊問題
垂直方向相鄰的兩個(gè)margin（margin-top/margin-bottom）可能會(huì)合并成一個(gè)margin，而水平方向上的margin則沒有這種問題
折疊后的最終結(jié)果：
如果都是正數(shù)或者都是負(fù)數(shù)，都是取絕對(duì)值最大的那個(gè)；如果有正有負(fù)，那么取最大正數(shù)和最小負(fù)數(shù)相加
解決方式：
- 只設(shè)置其中一個(gè)元素的
margin - 使用
padding替代margin
float元素高度坍塌問題
因?yàn)閒loat元素脫離了標(biāo)準(zhǔn)流，所以假如父元素當(dāng)中有float元素，那么會(huì)導(dǎo)致父元素認(rèn)為float元素沒有高度，從而造成高度坍塌問題（父元素當(dāng)中不存在高度）
解決方式：可以通過偽元素after添加高度，舉例：
div::after {
content: "";
display: "block"l
clear: both;
/* height: 0; */
/* visibility: hidden; */
/* 兼容低版本瀏覽器 */
}
邊框重疊變粗問題
參考：https://blog.csdn.net/YWB88888888/article/details/102944435
JS操作偽元素樣式問題
由于偽元素是無法直接通過JS進(jìn)行操作的，但我們可以通過操作偽元素對(duì)應(yīng)的標(biāo)簽樣式，從而實(shí)現(xiàn)偽元素樣式的操作，例如下面的代碼：
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
.test {
position: relative;
width: 100px;
height: 100px;
background: red;
visibility: hidden; /* 設(shè)置標(biāo)簽不可見 */
}
.test::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
background: inherit;
visibility: visible; /* 設(shè)置偽元素可見 */
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<script>
document.querySelector(".test").addEventListener("click", (e) => {
// 偽元素繼承標(biāo)簽元素樣式，通過修改標(biāo)簽元素樣式來修改偽元素樣式
e.target.style.background = "#" + parseInt(Math.random() * (10 ** 6));
});
</script>
</html>
我們通過將原本的標(biāo)簽隱藏，只讓偽元素顯示，而偽元素的樣式則繼承于標(biāo)簽，當(dāng)改變標(biāo)簽樣式時(shí)，偽元素樣式也會(huì)一同改變，從而實(shí)現(xiàn)動(dòng)態(tài)改變偽元素樣式的效果
注：
這里通過visibility: hidden;樣式設(shè)置標(biāo)簽隱藏，但不能用display: none;來設(shè)置，否則該標(biāo)簽實(shí)際上就相當(dāng)于不存在，而對(duì)應(yīng)的偽元素也就無法顯示了
img標(biāo)簽和background-image對(duì)比
- img標(biāo)簽：html元素；占用具體空間；右鍵能查看圖片鏈接；能被搜索引擎收錄；優(yōu)先加載
- background-image：css樣式；不占用空間；支持雪碧圖；等html加載完以后才開始加載
選擇
- 網(wǎng)頁中重要部分使用
img標(biāo)簽 - 影響不大的圖片使用
background-image
瀏覽器兼容
由于在不同的瀏覽器內(nèi)核里規(guī)定的標(biāo)準(zhǔn)不同，所以相同的代碼可能在不同的瀏覽器里顯示也就不同，因此往往需要設(shè)置對(duì)應(yīng)的兼容性，這里介紹幾個(gè)常見的內(nèi)核以及對(duì)應(yīng)添加兼容的前綴：
- Webkit：safari、chrome、搜狗、360等瀏覽器的內(nèi)核，前綴為：
-webkit- - Gecko：firefox的內(nèi)核，前綴為：
-moz- - Trident：ie的內(nèi)核，前綴為：
-ms- - Presto：opera的內(nèi)核，前綴為：
-o-
因此要設(shè)置樣式兼容性的話，一般在該樣式前面加上對(duì)應(yīng)瀏覽器內(nèi)核的前綴即可
其他
瀏覽器私有前綴
-o/-xv- opera
-ms-/mso- IE
-moz- firefox
-webkit- safari/chrome
瀏覽器重置樣式
由于標(biāo)簽往往有默認(rèn)樣式，并且在不同的瀏覽器當(dāng)中可能展示的不同，所以為了避免樣式差異以及去除一些不喜歡的默認(rèn)樣式，可以重置一些標(biāo)簽的初始樣式，例如body去除邊框、a去除下劃線、li去除前面的修飾符
參考：css reset
編碼規(guī)范
- 絕對(duì)值小于1的小數(shù)可以去掉前面的
0，舉例：.5 - 樣式編寫順序建議：定位、盒子模型、...
查看CSS瀏覽器兼容情況
雪碧圖
將各種小圖片合到一張圖里，然后利用background-position來定位到對(duì)應(yīng)的圖片進(jìn)行展示
優(yōu)勢(shì)
- 減少請(qǐng)求數(shù)量（只需請(qǐng)求一張圖，而無需對(duì)每個(gè)小圖都進(jìn)行請(qǐng)求），減輕服務(wù)器壓力
- 減小圖片總的大小
- 無需為每個(gè)圖片單獨(dú)命名
雪碧圖生成網(wǎng)站：https://www.toptal.com/developers/css/sprite-generator/
官方文檔閱讀
文檔字段
name 屬性名
value 屬性可選值
initial 默認(rèn)值
applies to 適用于元素（all elements-所有元素；block-level elements-塊級(jí)元素）
inherited 是否可繼承
percentages 是否可用百分比
media 媒體組
computed value 如何計(jì)算值
animatable 是否可動(dòng)畫
屬性取值參考
- 并列（多個(gè)值用空格隔開）：每個(gè)值都必須按順序?qū)?/li>
-
|：只能有一個(gè) -
||：可以有一個(gè)或多個(gè)，且任意順序 -
&&：每個(gè)都必須出現(xiàn)，且任意順序 -
[]：分組，代表是一個(gè)整體
CSS繪圖參考
簡單圖形：http://www.itdecent.cn/p/1a920aa066ad
實(shí)際案例：https://segmentfault.com/u/lancer07
CSS預(yù)編譯語言
SCSS
是一種兼容CSS3，同時(shí)又有更加高級(jí)語法操作的語言，目前在前端開發(fā)中逐漸被廣泛應(yīng)用
參考：http://www.itdecent.cn/p/a99764ff3c41
