[CSS]《CSS揭祕》第七章——結構與佈局

自適應內部元素

figure{
    max-width: 300px;
    max-width: min-content;//這個關鍵字將解析爲這個容器內部最大的不可斷行元素的寬度（ 即最寬的單詞、 圖片或具備固定寬度的盒元素。
    margin: auto;
}
figure > img{
    max-width: inherit;
}

<p>Some text [...]</p>
<figure>
    <img src="./2.jpg" alt="">
    <figcaption>
        The great Sir Adam Catlace was named after Countess Ada Lovelace,the first programmer.
    </figcaption>
</figure>
<p>More Text[...]</p>

精確控制表格列寬

table{
    table-layout:fixed;
    width:100%;

*:

請注意， 爲了確保這個技巧奏效， 須要爲這 些表格元素指定一個寬度（ 哪怕是 100%）。 一樣， 爲了讓 text-overflow: ellipsis 發揮做用，咱們還須要爲那一列指定寬度。

**:

若是不指定任何寬度，則各列的寬度將是平均分配的；後續的表格行並不會影響列寬；給單元格指定很大的寬度也會直接生效，並不會自動縮小；overflow 和 text-overflow屬性都是能夠正常生效的；若是overflow 的值是 visible，則單元格的內容有可能會溢出.

根據兄弟元素數量來設置樣式

只有一個元素時

li:only-child{
    /* ...*/
}

或者

li:first-child:nth-last-child(1){ //括號中的1爲參數
    /* */
 }

多於一個元素時

li:first-child:nth-last-child(4) //選中的是剛好有四個元素的第一個

li:first-child:nth-last-child(4) ~ li //能夠用兄弟選擇符選中剛好有四個元素時的所有四個

根據兄弟元素的數量範圍時來匹配元素

li:nth-child(n+4) //選中從第4個開始的全部元素

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4)~li {
    /* ...*/
}//選中元素總數是4或更多時的全部元素

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4)~li{
    /* ..*/
}//僅元素少於等於4時選中全部元素

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{
    /* ...*/
}//元素數量處於2-6時選中全部元素

滿幅的背景，定寬的內容

.hello {
    max-width: 900px;
    padding: 1em calc(50% - 450px);//取代內層元素的margin: auto;
    background: #333;
}

<div class="hello">
    <div class="wrapper">
        66
    </div>
</div>

垂直居中

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

基於絕對定位的解決方案（要求元素具備固定的寬度和高度）

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

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);//transform是根據自身尺寸爲基準進行換算和移動的
}

基於視口單位的解決方案

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

基於Flexbox的解決方案

詳情看：關於Flexbox

緊貼底部的頁腳

可參考：關於Flexbox