李老師譯，要看，要看
CSS選擇符
屬性選擇符
- abbr[title]:hover {}
input[type="submit"] {}
a[href^="http"] {}
img[src$=".jpg"] {}
a[href*="/about/"] {}
a[ref~="next"] {}
- 偽元素::first-letter / ::first-line
- 目標(biāo)偽類:target
- 表單偽類
input:required {}
input:optional {}
input[type="email"]:valid {}
input[type="email"]:invalid {}
性能
- 減少HTTP請求
只用一個link，可在其中使用@import - 壓縮和緩存
- 不然瀏覽器渲染阻塞JavaScript
給<script>加async / defer屬性
可見格式化模型
float + clear
使用偽類模擬額外的清除元素
.media-block:after {
content: "";
display: block;
clear: both;
}
格式化上下文
有些規(guī)則允許元素建立自己內(nèi)部塊級格式化上下文：
- display為inline-block或table-cell
- float屬性值不是none
- 絕對定位的元素
- overflow不是visible的元素
所以當(dāng)一個元素具備了以上條件，并挨著一個float元素時，就會忽略自己“必須接觸包含塊邊界”的規(guī)則，（想象一下，左邊媒體、右邊大段文本的布局：媒體float:left，文本overflow:auto，此時文本并不會包裹媒體）
網(wǎng)頁排版
字型大小與行高
font-size: .**rem，一般保留三位小數(shù)
文本粗細(xì)：normal對應(yīng)400，bold對應(yīng)700
word-spacing、letter-spacing
文本
- 縮進(jìn)：text-indent
- 連字符：
+1. 軟連字符：­
+2. 設(shè)置<html lang="en"> 和 hyphens: auto(支持程度不普遍) - css3 multiple column layout
column-count / column-width / colomn-gap
使用JS加載字體
Web Font Loader
漂亮的盒子
背景附著
background-attachment: fixed
多重背景
最先聲明的在最上面，最后聲明的在最下面
陰影
box-shadow可以設(shè)置inset
漸變
默認(rèn)自上而下（to bottom）；
可以寫成background-image: linear-gradient(#cfdfee, #8da9cf 100px);此時就會0-100px漸變，100px之后都是第二個色值。
object-fit（默認(rèn)fill）
img.fill {
object-fit: fill;
}
img.contain {
object-fit: contain;
}
img.cover {
object-fit: cover;
}
img.none {
object-fit: none;
}
img.scaledown {
object-fit: scaledown;
}
可保持寬高比的容器
<div class="object-wrapper">
<iframe src="" ></iframe>
</div>
.object-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
}
.object-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
內(nèi)容布局
html <aside>- 絕對定位中，負(fù)margin完全有效
-
position:absolute時，opacity小于1的元素會獨立渲染，就算他的子孫的z-index再大，也不會跑到他爹的兄弟們上面（如果他爹的z-index小于兄弟們的z-index） -
將
vertical-align: middle應(yīng)用給display: inline-block的元素時，其含義是：將這個行內(nèi)塊的垂直中心點與這行文本x高度的中心店對齊。所以說如果“這一行”沒有字母x，就無法實現(xiàn)垂直居中，因為找不到。那這個時候，可以用偽元素給外面的wrapper加一個content，設(shè)置其為inline-block，并且高度和wrapper一致，這個元素（被稱為幽靈元素）會讓middle認(rèn)為容器的垂直中點是對齊點，進(jìn)而能讓其余vertical-align: middle的元素實現(xiàn)垂直居中。 - 簡寫的
flex: 1;代表flex-grow: 1; flex-shrink: 1; flex-basis: 0;
頁面布局與網(wǎng)格
- 行容器，用設(shè)置清楚的偽元素：
.row: after {
content: "";
display: block;
clear: both;
height: 0;
}
- 創(chuàng)建列，
box-sizing: border-box;是個好習(xí)慣
響應(yīng)式Web設(shè)計與CSS
媒體查詢的分辨率、寬高比、方向
- 豎屏換為橫屏?xí)r：
@media (orientation: portrait) {
/* 豎屏樣式 */
}
- 視口匹配寬高比時
@media (min-aspect-ratio: 16/9) {
/* 寬高比至少為16比9時應(yīng)用 */
}
- Respond.js
- 針對舊IE，且不是WP
<!-- [if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="oldIE.css" media="all" >
<![endif]-->
- 不同樣式的分門別類
+影響整個頁面布局的媒體查詢通常涉及一堆類名，這些類名代表的是網(wǎng)站中的主要組件，另外會涵蓋幾種不同的屏幕尺寸。這類媒體查詢一般建議放在與布局相關(guān)的規(guī)則附近。
+如果有調(diào)整網(wǎng)站組件中某些細(xì)節(jié)的媒體查詢，可以把它們放在定義該組件樣式的規(guī)則旁邊。
+最后，如果出現(xiàn)了在相同斷點下對布局的很多修改，以及對個別組件的小修小補，那么把它們統(tǒng)一放到樣式表最后可能比較好。這樣做體現(xiàn)了先通用后具體的設(shè)計模式。 - img的srcset和sizez
由于圖片會在js之前加載，因此不要指望靠腳本實現(xiàn)圖片本身大小的響應(yīng)式。通過srcset和對應(yīng)的sizes可以設(shè)置與圖片相關(guān)的不同選項（IE不支持）
/* 檢測像素 */
<img src="img/600x300.png" srcset="img/1200x600.png 1.5x" alt="Dummy image">
/* 增加sizes，聲明顯示寬度 */
<img src="img/xsmall.png"
srcset="img/xsmall.png 300vw,
img/small.png 400vw,
img/medium.png 600vw"
sizes="(min-width: 70em) 12.6875em
(min-width: 50em) calc(25vw * 0.95 - 2.75em),
(min-width: 35em) calc(95vw / 2 - 4.125em)"
alt="Dummy image"
>
-
picture元素
表單與數(shù)據(jù)表
-
fieldset和legend - 修改
input:focus的樣式
.field-text input {
-webkit-appearance: none;
/* ... */
}
.field-text input:focus {
box-shadow: 0, 0, 0.5em rgba(93, 162, 248, 0.5);
border-color: #5da2f8;
outline: 0;
/* ... */
}
-
textarea的縮放，resize: vertical / horizontal / none / both
textarea {
height: 10em;
resize: vertical;
}
- placeholder樣式
::-webkit-input-placeholder {
font-style: italic;
}
:-ms-input-placeholder {
font-style: italic;
}
::-moz-placeholder {
font-style: italic;
}
變換、過渡與動畫
+“黏著過渡”
不讓過渡反向，把duration設(shè)置一個非常大的值：
.hello {
transition: background-position 9999999999s steps(6);
}
.hello:hover {
transition-duration: 0.6s;
}
- 過渡的能與不能
比如height，只能在數(shù)值之間過渡 - 最好在頁面加載完后，用js去觸發(fā)動畫（
animation-play-state: pause / running） - perspective的值一般在600px~1000px之間
-
preserve-3d
旋轉(zhuǎn)部件時，如希望子元素隨父元素一起旋轉(zhuǎn)，我們需要創(chuàng)建一個3D上下文，讓子元素和父元素在同一三維空間中變換：
.csstransforms3d .flip-wrapper {
position: relative;
transition: all .25s ease-in-out;
transform-style: preserve-3d;
}
高級特效
CSS Shapes
shape-outsideclip-pathmask-imagebackground-blend-modemix-blend-modefilter
