持續(xù)更新...

這里將展示本人有關(guān)于CSS類的開發(fā)經(jīng)驗(yàn)诚亚，并沒有有循序漸進(jìn)赖草，關(guān)聯(lián)性不強(qiáng)杆逗，都是想到哪寫到哪乡翅，望海涵。
更多前端 H5 干貨請點(diǎn)擊 - 《H5 - 前端開發(fā)干貨》

1. 常見的css私有前綴

在不同瀏覽器出現(xiàn)渲染不同時(shí)罪郊，往往是各內(nèi)核的解析不同蠕蚜，加上私有前綴可保證兼容性：

但一般來說，推薦使用 Sass 或者 Less 進(jìn)行預(yù)編譯悔橄，保證不會遺漏：

SCSS:
@mixin css3($property, $value) {
    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
        #{$prefix}#{$property}: $value;
    }
}

使用：
.border_radius {
  @include css3(transition, 0.5s);
}

CSS:
.border_radius {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

2. 浮動(dòng)清除

當(dāng)div需要左浮動(dòng)右浮動(dòng)時(shí)會脫離文檔流靶累，導(dǎo)致了高度塌陷。
這時(shí)候需要給它們的父級清除浮動(dòng)癣疟，重新回到文檔中保證整體結(jié)構(gòu)中挣柬。

.clearfix:before,
.clearfix:after {
    content: ""; 
    display: table;
}

.clearfix:after {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

原理為在父級前后用偽類插入塊級元素，并清除其兩邊的浮動(dòng)睛挚，達(dá)到撐開父級高度的目的邪蛔。

3. 媒體查詢

結(jié)構(gòu)：@media screen and (code)
下面為字體根據(jù)分辨率實(shí)現(xiàn)不同字體大小：

@media screen and (min-width: 375px) {
    body {
      font-size: 13px; } }
  @media screen and (min-width: 414px) {
    body {
      font-size: 14px; } }
  @media screen and (min-width: 768px) {
    body {
      font-size: 16px; } }
  @media screen and (min-width: 1024px) {
    body {
      font-size: 24px; } }

4. 通用的樣式重置文件

因內(nèi)核的不同扎狱，一些渲染的解析也是不同的侧到，為了統(tǒng)一樣式使得在各種瀏覽器中顯示效果一直勃教，我們一般會重置樣式后再進(jìn)行開發(fā)，下面提供一份css重置樣式的文件及三份Sass文件匠抗。

gitHub 地址
1.樣式重置css文件 —— common.css
2.Sass函數(shù)文件 —— function.scss
3.Sass常量文件 —— global.scss
4.Sass樣式重置文件 —— common.scss

5. 超出隱藏并顯示省略號

//單行省略
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//多行行省略
{
  display: -webkit-box;
  -webkit-line-clamp: [2,3,4];   //填寫數(shù)字代表第幾行省略
  -webkit-box-orient: vertical;
  overflow: hidden;
}   

6. 偽類使用

• 錨偽類

a:link {color: #FF0000}     /* 未訪問的鏈接 */
a:visited {color: #00FF00}  /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}   /* 選定的鏈接 */

• 其他偽類

• 點(diǎn)擊按鈕 - 最好用偽類實(shí)現(xiàn)

//比如這個(gè)點(diǎn)擊更多的按鈕绳军，采用偽類可以更靈活的調(diào)整按鈕父級的大小與其他 div 的位置關(guān)系
.more:after {
  content: "";
  position: relative;
  top: 2px;
  right: -4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../img/more.png') no-repeat center;
  background-size: 100%;
}

7. flex盒子布局

對于實(shí)現(xiàn)元素之間的自適應(yīng)排列，傳統(tǒng)解決方案著蛙，基于盒狀模型删铃，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便踏堡，比如猎唁，垂直居中就不容易實(shí)現(xiàn)，雖然能利用 table 實(shí)現(xiàn)顷蟆，但是依舊缺乏靈活性诫隅。

布局方式

推薦使用 flex 布局方式，可靈活實(shí)現(xiàn)各種布局需求：

其中一種布局方式

閱讀阮一峰的這篇文章了解更多 —— 《Flex 布局教程：語法篇》
這里就不在累述了帐偎，提醒一點(diǎn)適用范圍為：

pc端

• 安卓 4.4以上
• ios 9以上

8. 瀏覽器支持測試

Can I Use...?
該網(wǎng)站可以查詢出某 css 屬性在各個(gè)瀏覽器版本的實(shí)現(xiàn)情況逐纬，非常好用

各瀏覽器對 flex 的支持情況

9. 瀏覽器回退機(jī)制

提供回退機(jī)制通常是一種很好的做法，這樣可以確保你的網(wǎng)站不會在低版本瀏覽器中掛掉削樊，而只是看起來沒有那么炫而已豁生，利用樣式聲明的層疊機(jī)制來實(shí)現(xiàn)。

background: rgb(255, 128, 0);
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);

還可以采用 Modernizr JS插件來動(dòng)態(tài)改變漫贞，或者使用 @supports 的 CSS 判斷機(jī)制

@supports (條件) {
  /*具體的條件樣式*/
}

@supports not (條件) { //排除
  /*具體的條件樣式*/
}

@supports (條件) and (條件) { //并集
  /*具體的條件樣式*/
}

@supports (條件) or (條件) { //或集
  /*具體的條件樣式*/
}

當(dāng)然 @supports 的支持情況要上 Can I Use...? 查詢一下

10. 動(dòng)態(tài)計(jì)算長度值

因預(yù)處理器 Sass Less 等技術(shù)出現(xiàn)甸箱，w3c 也借鑒了其中的一些性質(zhì)，比如：

calc() = calc(四則運(yùn)算)

用于動(dòng)態(tài)計(jì)算長度值迅脐。
需要注意的是芍殖，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)谴蔑；
任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算豌骏；
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則隐锭；

很明顯在預(yù)處理時(shí)窃躲，沒有辦法識別 100% 到底是多少，沒法完成計(jì)算钦睡。而在瀏覽器中則是既是渲染框舔，當(dāng)然能夠計(jì)算出準(zhǔn)確的值。

11. css3中的變量用法

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

跟上條一樣，明顯借鑒了預(yù)處理的變量模式刘绣，雖然能通過后代選擇來完成這樣的操作，但是變量的用法還是非常靈活的挣输。

12. rgba() 和 hsla()

RGB是通過紅綠藍(lán)三原色來描述顏色的顏色空間纬凤，R=Red、G=Green撩嚼、B=Blue停士。
原理就是三原色的亮度值疊加，并加上灰度值完丽，在我看來更類似于平面的顏色空間的取值函數(shù)恋技。

rgba顏色空間

但問題也是顯而易見的，比如你已經(jīng)選定一種顏色逻族，想要調(diào)節(jié)它的飽和度蜻底，亮度，這里的計(jì)算就變得異常困難聘鳞。這時(shí)候就需要 hsla() 來描述你想要的顏色薄辅。

H：
Hue(色調(diào))。0(或360)表示紅色抠璃，120表示綠色站楚，240表示藍(lán)色，也可取其他數(shù)值來指定顏色搏嗡。取值為：0 - 360
S：
Saturation(飽和度)窿春。取值為：0.0% - 100.0%
L：
Lightness(亮度)。取值為：0.0% - 100.0%
A：
Alpha透明度采盒。取值0~1之間旧乞。

在我看來它則是立體的顏色空間的取值函數(shù)，類似于一個(gè)圓柱體纽甘。色調(diào)為 0 - 360 的圓良蛮，從圓心到圓邊，飽和度越來越高悍赢，最后則是其高度决瞳，決定其亮度。

HSL原理圖

兩者都是描述顏色的方式左权，跟 canvas與svg皮胡，位圖與矢量圖，來描述圖像的方式是一樣赏迟，以不同角度描述同一件東西而已屡贺。

13. 半透明邊框?qū)崿F(xiàn)

一開始你一定會這么寫吧

border: 10px solid hsla(0,0%,100%,.5);
background: white;

最后的結(jié)果，并沒有看到透明邊框呀！

嘗試下這樣的寫法：

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

看透明邊框出來了甩栈，原理是在沒有設(shè)置 background-clip 時(shí)泻仙，背景會被裁減到內(nèi)容框，即成為了邊框的背景量没，所以看不到了玉转。設(shè)置為 padding-box 時(shí)背景被裁剪到內(nèi)邊距框，保留了內(nèi)邊距的背景殴蹄，這時(shí)候就能顯示出來啦究抓。

14. 雙邊框?qū)崿F(xiàn)

這里有一個(gè)我們一直忽略的屬性 outline 別再用雙 div 實(shí)現(xiàn)雙邊框了，使用 outline 吧袭灯！

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

15. 條紋填充

用法自行百度
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);

16. svg在css中的寫法

background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;

17. 四邊形

想要做到這種四邊形的按鈕大家的第一反應(yīng)一定是通過skew() 的變形屬性來對這個(gè)矩形進(jìn)行斜向拉伸：

transform: skewX(-45deg);

但顯而易見的是刺下，這樣子做字體也會跟著形變

那要如何在不添加多一個(gè) div 結(jié)構(gòu)的前提下完成預(yù)期的效果呢？答案就是偽元素了稽荧，思路是把所有樣式（背景橘茉、邊框等）應(yīng)用到偽元素上，然后再對偽元素進(jìn)行變形蛤克。因?yàn)槲覀兊膬?nèi)容并不是包含在偽元素里的捺癞，所以內(nèi)容并不會受到變形的影響，代碼如下：

.button {
    position: relative;
    /* 其他的文字顏色构挤、內(nèi)邊距等樣式…… */
}
.button::before {
    content: ''; /* 用偽元素來生成一個(gè)矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;/* 將堆疊層次推到宿主元素之后 */
    background: #58a;
    transform: skew(45deg);
}

不僅僅 skew() 變形可以采用這種方法髓介，還適用于其他任何變形樣式，當(dāng)我們想變形一個(gè)元素而不想變形它的內(nèi)容時(shí)就可以用到它筋现。舉個(gè)例子唐础，我們把這個(gè)技巧針對rotate() 變形樣式稍稍調(diào)整一下，再用到一個(gè)正方形元
素上矾飞，就可以很容易地得到一個(gè)菱形一膨。

18. 菱形圖片

.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}

19. 梯形標(biāo)簽

nav > a {
   position: relative;
   display: inline-block; 
   padding: .3em 1em 0;
}
nav > a::before { 
   content: '';
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
   background: #ccc;
   background-image: linear-gradient(hsla(0,0%,100%,.6),
   hsla(0,0%,100%,0)); 
   border: 1px solid rgba(0,0,0,.4);
   border-bottom: none;
   border-radius: .5em .5em 0 0;
   box-shadow: 0 .15em white inset;
   transform: perspective(.5em) rotateX(5deg); 
   transform-origin: bottom;
}

20. 餅圖

思路：通過兩個(gè)半圓與偽元素遮蓋的方式形成餅圖扇形

html：
<div class="pie"></div>

css：
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image:linear-gradient(to right, transparent 50%, #655 0); //通過漸變制作另外的半圓
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%; //這里是將遮蓋的偽元素矩形變成半圓；難以理解的話洒沦，就.pie 設(shè)置overflow: hidden 的樣式豹绪；
  background-color: inherit;  //跟隨父級背景色，減少重復(fù)代碼
  transform-origin: left;  //這是將旋轉(zhuǎn)中心定位在左邊長中點(diǎn)
  transform: rotate(.2turn); //旋轉(zhuǎn)百分之二十
}

20%扇形

tips：
1申眼、
  border-radius: 2em 1em 4em / 0.5em 3em;
等價(jià)于
  border-top-left-radius: 2em 0.5em;
  border-top-right-radius: 1em 3em;
  border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius: 1em 3em;

2瞒津、
.2turn
一個(gè)圓為 1turn
這里表示百分之二十的圓

到這里 0 ~ 50% 的扇形是十分方便的就能夠做出來了，那百分五十以上的呢括尸？大家很輕易地就會想到只要把偽元素遮擋的背景顏色變成一樣的不就可以了嗎巷蚪！

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655; //這個(gè)就是關(guān)鍵
  transform-origin: left;
  transform: rotate(.1turn); //減去半圓后的占比面積
}

60%扇形

看到這里你可能會想到一個(gè)問題，這些都是寫死的比例濒翻，而且偽元素是沒辦法寫行內(nèi)樣式的屁柏，那要如何動(dòng)態(tài)形成餅圖呢啦膜？要想通過行內(nèi)樣式控制扇形大小，首先我們可以先看看這個(gè)動(dòng)畫形成的過程：

@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #655; }
}
.pie::before {
  content: '';
  display: block;  
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite,
  bg 6s step-end infinite;
}

替換一下代碼淌喻，你將會看到一個(gè)餅圖從0 變化到100% 的動(dòng)畫僧家，從而得到一個(gè)炫酷的進(jìn)度指示器。這時(shí)候我們就想到了裸删，只要我能控制它在哪一幀停下來就可以得到任意的餅圖啦啸臀，同時(shí)這個(gè)可以在內(nèi)聯(lián)樣式中實(shí)現(xiàn)。

@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #655; }
}
.pie::before {
  /* [其余的樣式代碼保持原樣] */
  animation: spin 50s linear infinite,
  bg 100s step-end infinite; //用整體動(dòng)畫時(shí)間為100s烁落，方便計(jì)算
  animation-play-state: paused;  //這里為動(dòng)畫停止
  animation-delay: inherit; //定義動(dòng)畫何時(shí)開始
}

而HTML變?yōu)椋?<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>

這里是負(fù)值的意思是直接到 20s 的動(dòng)畫進(jìn)度所形成的餅圖

到這里我們就可以通過 js 來動(dòng)態(tài)形成餅圖了。那多個(gè)扇形呢豌注？這時(shí)候就需要 svg 的登場了伤塌，這里不屬于css我就不在這里累述了，下次會補(bǔ)充上 svg 篇的轧铁。

21. 單側(cè)投影

投影 box-shadow 其實(shí)是有6個(gè)參數(shù)的每聪，雖然我們不怎么用到，先來看看這6個(gè)參數(shù)是什么吧：

box-shadow: h-shadow v-shadow blur spread color inset;

單側(cè)投影：
box-shadow: 0 5px 4px -4px black;

雙側(cè)投影:
box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black;

核心：

h-shadow | v-shadow 其中一個(gè)為零烈掠；
blur = - spread羞秤；

22. 不規(guī)則投影 | 濾鏡

單純的 box-shadow 效果

實(shí)際需要效果

很明顯的可以看出對于不規(guī)則的邊框 box-shadow 是實(shí)現(xiàn)的不夠好的。而 濾鏡效果規(guī)范 為這個(gè)問題提供了一個(gè)解決方案向叉。它引入了一個(gè)叫作filter 的新屬性锥腻，這個(gè)屬性也是從SVG 那里借鑒過來的。盡管CSS 濾鏡基本上就是SVG 濾鏡母谎，但我們并不需要掌握任何SVG 知識瘦黑。相反，只需要一些函數(shù)就可以很方便地指定濾鏡效果了，比如blur()幸斥、grayscale() 以及我們需要的drop-shadow()匹摇。

實(shí)現(xiàn)就這么簡單:
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

同樣的濾鏡還能完成下面這種效果

filter: sepia(1) saturate(4) hue-rotate(295deg);

好比如實(shí)現(xiàn)頭像致灰鼠標(biāo)懸浮時(shí)還原彩色的效果也是可以通過 filter 實(shí)現(xiàn)：

img {
  transition: .5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
  filter: none;
}

當(dāng)然還有一種混合模式的濾鏡效果：

<a href="#something">
  <img src="tiger.jpg" alt="Rawrrr!" />
</a>

a {
  background: hsl(335, 100%, 50%);
}
img {
  mix-blend-mode: luminosity;
}

mix-blend-modet 用法

接下來詳細(xì)的看看 filter 的各種屬性：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

23. 文本行的斑馬紋

實(shí)現(xiàn)上圖的效果，立馬反應(yīng)出來的是 :nth-child() / :nth-of-type() 偽類歹苦，一般的情況是可以應(yīng)對啦青伤，但是這個(gè)有以下兩個(gè)缺點(diǎn):

1. 明顯的每一行都需要用標(biāo)簽包裹；
2. 當(dāng)一個(gè)標(biāo)簽內(nèi)一行顯示不完的時(shí)候就會導(dǎo)致大條紋的產(chǎn)生殴瘦；
3. 過多的 DOM 元素還會拖累整個(gè)頁面的性能狠角；

解決方法對整個(gè)元素設(shè)置統(tǒng)一背景，聽起來好像很糟糕蚪腋，但是利用以下幾個(gè)屬性的特性就能夠完美的實(shí)現(xiàn)斑馬條紋：

1. 利用css的漸變生成背景圖丰歌；
2. 利用em單位設(shè)定背景尺寸姨蟋；
3. background-size 需要設(shè)置為line-height 的兩倍；

padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);

24. tab縮進(jìn)

pre {
 tab-size: 2;
}

25. 空心字效果

多重 text-shadow 實(shí)現(xiàn)

background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
1px -1px black, -1px 1px black;

26. 鼠標(biāo)光標(biāo)樣式

先補(bǔ)充一下 css 2.1 提供的內(nèi)置樣式（cursor屬性）：

接下來是CSS3新增的樣式

27. 自定義復(fù)選框

<input type="checkbox" />

如我們所知復(fù)選框的樣式是非常難以修改的立帖，想要自定義樣式眼溶，我們一般是通過 <div> 來模擬，那還有什么更好的辦法呢晓勇？這時(shí)候只要結(jié)合表單中的 <lable> 與偽類配合就可以實(shí)現(xiàn)自定義復(fù)選框值依。

<style>
input[type="checkbox"] + label::before { /* + 相鄰選擇器 */
  content: '\a0'; /* 不換行空格 */
  display: inline-block;
  vertical-align: .2em;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: .2em;
  background: silver;
  text-indent: .15em;
  line-height: .65;
}

input[type="checkbox"]:checked + label::before {
  content: '\2713'; /* 對勾符號 */
  background: yellowgreen;
}

/* 使用display: none隱藏的話役首，因?yàn)槟菢訒阉鼜逆I盤 tab 鍵切換焦點(diǎn)的隊(duì)列中完全刪除 */
input[type="checkbox"] { /* clip 裁減為空 */
  position: absolute;
  clip: rect(0,0,0,0);
}

input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
  background: gray;
  box-shadow: none;
  color: #555;
}
</style>

<form>
  <input type="checkbox" id="Max" />
  <label for="awesome">Max!</label>
</form>

還能模擬開關(guān)按鈕的功能

<style>
input[type="checkbox"] {
  position: absolute;
  clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {
  display: inline-block;
  padding: .3em .5em;
  background: #ccc;
  background-image: linear-gradient(#ddd, #bbb);
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px white;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
  box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
  border-color: rgba(0,0,0,.3);
  background: #bbb;
}
</style>

28. 根據(jù)兄弟元素的數(shù)量來設(shè)置樣式

為了解決當(dāng)需要根據(jù)不同的兄弟元素?cái)?shù)量來決定樣式實(shí)現(xiàn)周蹭，比如當(dāng)元素只有4個(gè)時(shí)慢睡，跟元素有8個(gè)時(shí)用不同的樣式。那要如何選中呢描融？ 用兄弟元素選擇器 ‘~’ 明顯是不行的铝噩，因?yàn)樗粫x中在其后面的兄弟元素。

li:first-child:nth-last-child(4),   /* 是列表中的第一個(gè)元素同時(shí)又是從后往前數(shù)第四個(gè)元素 */
li:first-child:nth-last-child(4) ~ li {    /* 再利用兄弟元素選擇器 */
  /* 當(dāng)列表正好包含四項(xiàng)時(shí)窿克，命中所有列表項(xiàng) */
}

//同時(shí)提供sass的混合宏骏庸，方便實(shí)現(xiàn)
@mixin n-items($n) {  /* 定義mixin */
  &:first-child:nth-last-child(#{$n}),
  &:first-child:nth-last-child(#{$n}) ~ & {
    @content;
  }
}

/* 調(diào)用時(shí)是這樣的： */
li {
  @include n-items(4) {
    /* 屬性與值寫在這里 */
  }
}

29. 垂直居中

“44 年前我們就把人類送上月球了，但現(xiàn)在我們?nèi)匀粺o法在CSS 中
實(shí)現(xiàn)垂直居中年叮〕担” ????????????????—— James Anderson（這個(gè)挺有意思的~）

在CSS 中對元素進(jìn)行水平居中是非常簡單的：如果它是一個(gè)行內(nèi)元素，就對它的父元素應(yīng)用text-align: center谋右；如果它是一個(gè)塊級元素，就對它自身應(yīng)用margin: auto补箍。然而如果要對一個(gè)元素進(jìn)行垂直居中改执，可能光是想想就令人頭皮發(fā)麻了。

我們以下面的例子來做說明

<main>
  <h1>Am I centered yet?</h1>
  <p>Center me, please!</p>
</main>

讓其垂直居中.png

我們先從最簡單的情況開始實(shí)現(xiàn)坑雅，當(dāng)對象是存在固定的寬高時(shí)辈挂，先把這個(gè)元素的左上角放置在視口（或最近的、具有定位屬性的祖先元素）的正中心裹粤，然后再利用負(fù)外邊距把它向左终蒂、向上移動(dòng)（移動(dòng)距離相當(dāng)于它自身寬高的一半），從而把元素的正中心放置在視口的正中心遥诉。

main {
  position: absolute;
  top: 50%;
  left: 50%; 
  margin-top: -3em; /* 6/2 = 3 */
  margin-left: -9em; /* 18/2 = 9 */
  width: 18em;
  height: 6em;
}

當(dāng)然根據(jù)我們上面提到過的 calc() 函數(shù)拇泣，還可以簡化為：

main {
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}

但通常情況下我們是不會固定對象的寬高的，這時(shí)候我們可以利用 translate 來代替負(fù)外邊距的效果矮锈，對于絕大多數(shù)CSS 屬性（包括margin）來說霉翔，百分比都是以其父元素的尺寸為基準(zhǔn)進(jìn)行解析的，而獨(dú)獨(dú) translate 是以這個(gè)元素自身的寬度和高度為基準(zhǔn)進(jìn)行換算和移動(dòng)的

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這個(gè)方法還是存在一些缺陷的：

1. 我們有時(shí)不能選用絕對定位苞笨，因?yàn)樗鼘φ麄€(gè)布局的影響太過強(qiáng)烈债朵。
2. 如果需要居中的元素已經(jīng)在高度上超過了視口子眶，那它的頂部會被視口裁切掉（參見圖7-19）。有一些辦法可以繞過這個(gè)問題序芦，但hack味道過濃臭杰。
3. 在某些瀏覽器中，這個(gè)方法可能會導(dǎo)致元素的顯示有一些模糊谚中，因?yàn)樵乜赡鼙环胖迷诎雮€(gè)像素上渴杆。這個(gè)問題可以用transformstyle:preserve-3d 來修復(fù)，不過這個(gè)修復(fù)手段也可以認(rèn)為是一個(gè)hack藏杖，而且很難保證它在未來不會出問題将塑。

也存在著不依靠絕對定位而用視口來實(shí)現(xiàn)的方法

main {
  width: 18em;
  padding: 1em 1.5em;
  margin: 50vh auto 0;
  transform: translateY(-50%);
}

但是最推薦的還是 Flexbox 伸縮盒模型是最佳的解決方法

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}
main {
  margin: auto;
}

30. 頭部尾部固定 - 中間內(nèi)容自適應(yīng)區(qū)域滾動(dòng)

<style>
  body {
    display: flex; // 利用flex布局
    flex-flow: column;
    min-height: 100vh;
    overflow: hidden;
  }

  main {
    flex: 1; //撐開中間內(nèi)部部分
    overflow: auto;
    max-height: 60vh; //固定好中間內(nèi)容的最大高度即可以區(qū)域滾動(dòng)
  }
</style>

31. 緩動(dòng)效果

tips: 為什么采用變形屬性來制作動(dòng)畫，而不是類似top 或margin-top 這樣的屬性蝌麸？因?yàn)樽冃螌傩缘膭?dòng)畫過程更加流暢点寥；而其他CSS 屬性由于需要對齊到像素，往往略顯生硬来吩。

@keyframes bounce {
60%, 80%, to {
  transform: translateY(400px);
  animation-timing-function: ease;
}
  70% { transform: translateY(300px); }
  90% { transform: translateY(360px); }
}
.ball {
/* 外觀樣式 */
  animation: bounce 3s cubic-bezier(.1,.25,1,.25);
    //  animation: bounce 3s ease-in; 或者使用本來就存在的函數(shù)
}

//CSS 提供了一個(gè) cubic-bezier(x1, y1, x2, y2) 函數(shù)敢辩，允許我們指定自定義的調(diào)速函數(shù)，實(shí)際上就是規(guī)定一條二次貝塞爾曲線來決定動(dòng)畫的加速度

//調(diào)速函數(shù)推薦：cubic-bezier(.215,.61,.355,1) 和 cubicbezier(.755,.05,.855,.06)

32. CSS強(qiáng)制英文弟疆、中文換行與不換行 強(qiáng)制英文換行

33. CSS箭頭寫法

//左箭頭
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: rotate(-135deg);

//右箭頭
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: rotate(45deg);