李老師譯坊萝，要看，要看
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請(qǐng)求
只用一個(gè)link许起，可在其中使用@import - 壓縮和緩存
- 不然瀏覽器渲染阻塞JavaScript
給<script>加async / defer屬性
可見格式化模型
float + clear
使用偽類模擬額外的清除元素
.media-block:after {
content: "";
display: block;
clear: both;
}
格式化上下文
有些規(guī)則允許元素建立自己內(nèi)部塊級(jí)格式化上下文：
- display為inline-block或table-cell
- float屬性值不是none
- 絕對(duì)定位的元素
- overflow不是visible的元素
所以當(dāng)一個(gè)元素具備了以上條件十偶，并挨著一個(gè)float元素時(shí)，就會(huì)忽略自己“必須接觸包含塊邊界”的規(guī)則园细，（想象一下惦积，左邊媒體、右邊大段文本的布局：媒體float:left猛频，文本overflow:auto狮崩，此時(shí)文本并不會(huì)包裹媒體）
網(wǎng)頁排版
字型大小與行高
font-size: .**rem，一般保留三位小數(shù)
文本粗細(xì)：normal對(duì)應(yīng)400鹿寻，bold對(duì)應(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);此時(shí)就會(huì)0-100px漸變坦敌，100px之后都是第二個(gè)色值。
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>- 絕對(duì)定位中招刹，負(fù)margin完全有效
-
position:absolute時(shí)恬试，opacity小于1的元素會(huì)獨(dú)立渲染，就算他的子孫的z-index再大疯暑，也不會(huì)跑到他爹的兄弟們上面（如果他爹的z-index小于兄弟們的z-index） -
將
vertical-align: middle應(yīng)用給display: inline-block的元素時(shí)，其含義是：將這個(gè)行內(nèi)塊的垂直中心點(diǎn)與這行文本x高度的中心店對(duì)齊哑舒。所以說如果“這一行”沒有字母x妇拯，就無法實(shí)現(xiàn)垂直居中，因?yàn)檎也坏较赐摇Ｄ沁@個(gè)時(shí)候越锈，可以用偽元素給外面的wrapper加一個(gè)content，設(shè)置其為inline-block膘滨，并且高度和wrapper一致甘凭，這個(gè)元素（被稱為幽靈元素）會(huì)讓middle認(rèn)為容器的垂直中點(diǎn)是對(duì)齊點(diǎn)，進(jìn)而能讓其余vertical-align: middle的元素實(shí)現(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;是個(gè)好習(xí)慣
響應(yīng)式Web設(shè)計(jì)與CSS
媒體查詢的分辨率、寬高比躲胳、方向
- 豎屏換為橫屏?xí)r：
@media (orientation: portrait) {
/* 豎屏樣式 */
}
- 視口匹配寬高比時(shí)
@media (min-aspect-ratio: 16/9) {
/* 寬高比至少為16比9時(shí)應(yīng)用 */
}
- Respond.js
- 針對(duì)舊IE蜓洪，且不是WP
<!-- [if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="oldIE.css" media="all" >
<![endif]-->
- 不同樣式的分門別類
+影響整個(gè)頁面布局的媒體查詢通常涉及一堆類名，這些類名代表的是網(wǎng)站中的主要組件坯苹，另外會(huì)涵蓋幾種不同的屏幕尺寸隆檀。這類媒體查詢一般建議放在與布局相關(guān)的規(guī)則附近。
+如果有調(diào)整網(wǎng)站組件中某些細(xì)節(jié)的媒體查詢粹湃，可以把它們放在定義該組件樣式的規(guī)則旁邊恐仑。
+最后，如果出現(xiàn)了在相同斷點(diǎn)下對(duì)布局的很多修改为鳄，以及對(duì)個(gè)別組件的小修小補(bǔ)菊霜，那么把它們統(tǒng)一放到樣式表最后可能比較好。這樣做體現(xiàn)了先通用后具體的設(shè)計(jì)模式济赎。 - img的srcset和sizez
由于圖片會(huì)在js之前加載鉴逞，因此不要指望靠腳本實(shí)現(xiàn)圖片本身大小的響應(yīng)式。通過srcset和對(duì)應(yīng)的sizes可以設(shè)置與圖片相關(guān)的不同選項(xiàng)（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;
}
變換、過渡與動(dòng)畫
+“黏著過渡”
不讓過渡反向壳猜，把duration設(shè)置一個(gè)非常大的值：
.hello {
transition: background-position 9999999999s steps(6);
}
.hello:hover {
transition-duration: 0.6s;
}
- 過渡的能與不能
比如height勾徽，只能在數(shù)值之間過渡 - 最好在頁面加載完后，用js去觸發(fā)動(dòng)畫（
animation-play-state: pause / running） - perspective的值一般在600px~1000px之間
-
preserve-3d
旋轉(zhuǎn)部件時(shí)统扳，如希望子元素隨父元素一起旋轉(zhuǎn)喘帚，我們需要?jiǎng)?chuàng)建一個(gè)3D上下文，讓子元素和父元素在同一三維空間中變換：
.csstransforms3d .flip-wrapper {
position: relative;
transition: all .25s ease-in-out;
transform-style: preserve-3d;
}
高級(jí)特效
CSS Shapes
shape-outsideclip-pathmask-imagebackground-blend-modemix-blend-modefilter
