CSS結構與佈局

0x00 min-content 寬度自適應

CSS3 新增寬度屬性值width:min-content 可以將容器的寬度值設定為容器內最大的不可斷行的寬度(最寬的單字，圖片，或具有寬固定寬度的盒子元素)

figure{
    width:min-content;
    margin: auto;    
}

0x01 根據兄弟元素的數量來設定樣式

我們知道偽元素選擇器:only-child,其實，它可以等效於:first-child:last-child，即是第一項的同時也是最後一項，所以從邏輯上來講它是唯一的。而:last-child 也是:nth-last-child(1)的快捷寫法。

那麼接下來思考一個問題，li:first-chidl:nth-last-child(4) 代表什麼?結果是_一個正好有四個列表項的列表中的第一項_,ok,再結合兄弟選擇符~來命中它之後的每一項，就可以達到這樣一個目標在正好包含四個列表項的時候，命中它的每一項

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

結合SASS，將其簡化復用

/*定义混合器*/
@mixin n-items($n){
    &:first-child:nth-last-child(#{$n}),
    &:first-child:nth-last-child(#{$n}) ~ &{
        @content;
    }
}

/*调用*/
li {
    @include n-items(4){
        /*属性与值写在这里*/
        background: red;
    }
}

:nth -child()

nth-child()的強大之處在於以接受an+b形式的表達式，那麼自然便可以使用其變種nth-child(n+4) 這種形式，它將會選擇除了第1,2,3個子元素之外的所有子元素。

ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
    /*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}

當然，不止於此，:nth-child()的玩法完全取決於你的腦洞。

0x02 calc

有時，若需要去實現一個背景寬度滿屏，內容寬度固定的佈局，也許我們會去這樣設計DOM 結構

<footer>
    <p>        
    </p>
</footer>

CSS 樣式:

footer{
    background: #333;
}

.wrapper{
    max-width: 900px;
    margin: 1em auto;
    height: 200px;
}

如此麻煩了，我們只需三行程式碼即可實現:

footer{
  background:#333;
  padding:1em calc(50% - 50px);
 }

使用了clac() 便可以在CSS 中進行簡單的算術運行，這使得DOM 結構變得非常簡潔，沒有任何的冗餘，當然，缺點也是顯而易見的，這裡的程式碼只會在footer 元素的父級超過900 px 才會看出效果。

calc() 中的百分比是基於其父級進行解析的

但，我們初次了解到了CSS3 中cacl() 這個魔法技巧。

0x03 垂直居中

基於絕對定位的解決方案

CSS 中有一個很常見的現象，真正的解決方法往往來自於我們最意想不到的地方。例如，可以結合positon:absolute 和transform:translate() 屬性來實現垂直居中

因為translate() 變形函數中的百分比是根據這個元素自身的寬度和高度為基準進行換算的，如此一來，便可以徹底解除對固定尺寸的依賴。

範例:DOM 結構

    <p>
        </p><h1 id="Am-i-center">Am i center?</h1>
        <p>Center me ,please!</p>
    

CSS程式碼:

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

不過，該方法也是存在不足的:
1.在某些瀏覽器中，可能會導致模糊顯示，因為元素有可能被放置在半個像素上。
2.在不適合使用絕對定位的情況下。而且絕對定位對整個佈局的影響也太強烈。

基於 FlexBox 的解決方案

毫無疑問，這算是目前最佳的解決方案了。而且，現代瀏覽器對 FlexBox 的支援已經相當高了。

對基於FlexBox 容器的items 使用margin:auto 不僅可以在水平方向方居中，垂直方向上也是如此，即使不指定任何寬度，因為這個元素分配到的寬度等於max-content.

FlexBox 的另一個好處是可以文字也進行垂直居中， 只需在使用display:flex 的元素中加入align-items:center 和justify-content:center。

.main{
    background: deeppink;
    width: 50%;
    height: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

0x04 緊貼底部的頁腳

有時，我們期望頁頭和頁腳的高度由其內部因素來決定，而內容區塊的高度可以自動收縮並佔滿所有可用的空間。同樣，利用 FlexBox 這很容易。

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

    header{
        /*heaer style*/
    }
    
    .main{
        flex:1;
    }

    footer{
        /*footer style*/
    }
}

我們給了 body 一個 min-height:100vh 的高度這樣它至少會佔據整個視口的高度，然後賦予 main 一個大於 0 的 flex 值就可以了。

問題:如果頁腳是固定在螢幕的底部的呢?如何解決當頁面滾動到最後的時候保證頁腳不會覆蓋內容區？

對於這個問題，純屬個人想法，可以在 footer 之後加上一個 p#_footer。

此時的DOM 結構如下：

    <header><header>
    <p></p>
    <footer></footer>
    <p></p>
</header></header>

而對於p#_footer 而言，不需要為其中添加任何的內容和样式，只需要它的高度等於footer 的高度就可以了，而對於這一點，使用jQuery 就可以輕鬆搞定。

$('#_footer').height($('footer').height())

如此，對於響應佈局也可以不用擔心了，雖然有點點hack，但也算完美的解決了，Bingo!

更多CSS結構與佈局 相關文章請關注PHP中文網！