摘要：回退方案根據(jù)兄弟元素的數(shù)量來(lái)設(shè)置樣式知識(shí)點(diǎn)偽類選擇器只有一個(gè)列表項(xiàng)等效于一個(gè)正好有四個(gè)列表項(xiàng)的列表中的第一個(gè)列表項(xiàng)它之后的所有兄弟元素因此，有且只有四個(gè)列表項(xiàng)的情況就可以表示為如果列表項(xiàng)不是四個(gè)，則沒(méi)有被選中。

我們希望 width 可以像 height 一樣， 可以自動(dòng)適應(yīng)內(nèi)容的寬度。假如有如下結(jié)構(gòu)：

Lorem ipsum dolor ...

    
    

Lorem ipsum dolor sit...

我們希望 figure 元素跟它所包含的圖片一樣寬（圖片尺寸不固定），而且水平居中。而我們能想到的解決方案，如讓 figure 元素浮動(dòng)，或者使 figure 的父元素 text-aligin:center、再對(duì)所有子元素都設(shè)置 text-align:left。這些方法都不是特別理想。

css3中為 width 和 height 又增加了一些新的關(guān)鍵字，如min-content，它能使容器的寬度為內(nèi)部最大的不可斷行元素的寬度。

figure{
    max-width: 300px; /*回退方案*/
    max-width: min-content; 
    margin： auto;
}
figure>img{
    max-width: inherit;
}

知識(shí)點(diǎn)：偽類選擇器

只有一個(gè)列表項(xiàng)：:only-child 等效于 :first-child:last-child
一個(gè)正好有四個(gè)列表項(xiàng)的列表中的第一個(gè)列表項(xiàng)： :first-child:nth-last-child(4)

ul>li{
    display: inline-block;
    padding: .5em 1em;
    border-radius: .5em;
    background: pink;
    color: white;
}
li:first-child:nth-last-child(4){
    background: deeppink;
}

它之后的所有兄弟元素： :first-child:nth-last-child(4)~li

li:first-child:nth-last-child(4) ~ li{
    background: deeppink;
}

因此，有且只有四個(gè)列表項(xiàng)的情況就可以表示為：

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li{
    background: deeppink;
}

如果列表項(xiàng)不是四個(gè)，則沒(méi)有被選中。

:nth-child()中的參數(shù)不僅可以是具體數(shù)字，也可以是an+b這樣的表達(dá)式，其中 n 的范圍是0到正無(wú)窮。
例如：n+4表示選中從第 4 個(gè)開(kāi)始的所有子元素。（注意： 寫成 4+n是不對(duì)的）

選中總數(shù)是4或是更多時(shí)選中所有列表項(xiàng)：

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li{
    background: deeppink;
}  

參數(shù)是-n+4可以選中開(kāi)頭的4個(gè)元素

li:nth-child(-n+4){
    background: deeppink;
}

僅當(dāng)列表中有4個(gè)或更少的列表項(xiàng)時(shí)，選中所有的列表項(xiàng)：

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li{
    background: deeppink;
}

兩種技巧混合，可以表示當(dāng)列表項(xiàng)有2~6個(gè)時(shí)，選中所有列表項(xiàng)。

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{
    background: deeppink;
}

要實(shí)現(xiàn)一個(gè)背景占據(jù)整個(gè)視口，而內(nèi)容固定寬度，居中布局。如：

一般的解決方案是為每個(gè)區(qū)塊準(zhǔn)備兩層元素，分別為其設(shè)置樣式：

footer{
    background: #333;
    color: white;
    border: 1px solid #333;/*這一行是為了不讓父元素和子元素的margin重疊（父元素margin為0，子元素為1em，重疊以長(zhǎng)的為準(zhǔn)，即為1em，背景默認(rèn)background-clip為border-box，margin下面就會(huì)沒(méi)有背景顏色。）*/
}
.wrapper{
    max-width: 900px;
    margin: 1em auto;
}

CSS3中增加了一個(gè)calc()函數(shù)，上面代碼中的 margin 的 auto 可以替換為 calc(50%-450px)，這是一個(gè)長(zhǎng)度值，因此可以作為父元素的 padding 值，代碼可以改為：

 footer{
        background: #333;
        color: white;
        /*border: 1px solid #333;*//*沒(méi)有margin重疊問(wèn)題，也就不需要這一行*/
        padding: 1em calc(50% - 450px);
    }
    .wrapper{
        /*max-width: 900px;*/
        /*margin: 1em auto;*/
    }

因此，最終我們不再需要一個(gè)額外的元素：

footer{
    background: #333;
    color: white;
    padding: 1em; /*回退方案*/
    padding: 1em calc(50% - 450px); /*注意：calc中減號(hào)兩邊須有空格*/
}

僅水平居中很簡(jiǎn)單：

/*針對(duì)行內(nèi)元素*/
text-align: center; 
/*針對(duì)塊級(jí)元素*/
margin： auto;

如下結(jié)構(gòu)：

    
Am I centered yet?
    
Center me, please!

這個(gè)方案的前提是元素必須有固定的寬度和高度：

main{

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5em;
    margin-left: -10em;
    width: 20em;
    height: 10em;
} 

如果一般的塊級(jí)元素，且父元素不是 ， 還需要對(duì)父元素進(jìn)行相對(duì)定位。

借助calc()函數(shù)，就可以省掉兩行

main{
    position: absolute;
    top: calc(50% - 5em);
    left: calc(50% - 10em);
    width: 20em;
    height: 10em;
}

由于translate()函數(shù)中的百分比值是相對(duì)于自身的寬高計(jì)算的，所以可以解決固定寬高的問(wèn)題：

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

如果使用 margin 的百分比值和 auto 關(guān)鍵字設(shè)置垂直水平居中，得到的效果可能并不是我們想要的：

main{
    width: 20em;
    margin: 50% auto 0;
    transform: translateY(-50%);
}

那是因?yàn)?margin 的百分比值是以父元素的寬作為基準(zhǔn)的，即使對(duì) margin-top 和 margin-bottom 也是這樣。
如果只是想針對(duì)視口居中，可以使用視口單位解決。
1vw 表示視口寬度的 1%
1vh 表示視口高度的 1%
1vmin 表示視口寬高較小的那個(gè)（1vw 或 1vh）
1vmax 表示視口寬高較大的那個(gè)（1vw 或 1vh）

main{
    width: 20em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

body{
    display: flex;
}

main{
    margin: auto;
}

當(dāng)我們使用 Flexbox 時(shí)，margin：auto 不僅在水平方向上將元素居中，垂直方向上也是如此。
也可以這么寫：

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

使用這種方法，還可以將匿名容器垂直居中，如沒(méi)有被標(biāo)簽包裹的文本節(jié)點(diǎn)：

Center me, please!

mian{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20em;
    height: 15em;
}      

我們會(huì)遇到這樣的問(wèn)題，當(dāng)頁(yè)面內(nèi)容不夠長(zhǎng)時(shí)，會(huì)出現(xiàn)頁(yè)腳不能緊貼在最底部，而是緊跟在內(nèi)容的下方。如下圖：

如果頁(yè)腳和頁(yè)頭的高度固定，首先我們計(jì)算出頁(yè)腳和頁(yè)頭的高度，分別是7em和2.5em。

mian{
    min-height: calc(100vh - 7em - 2.5em);
    box-sizing: border-box; /*避免內(nèi)邊距或邊框搞亂高度的計(jì)算*/
}

就OK了。
或者用一個(gè)額外的元素包裹住

#wrapper {
    min-height: calc(100vh - 7em);
} 

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main{
    flex: 1;
}