css如何實現凸顯布局

小編給大家分享一下css如何實現凸顯布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

凸顯布局

凸顯布局指容器內節點以同一方向排列且存在一個節點在某個方向上較突出的占位布局。該布局描述起來可能比較拗口，直接看以下效果吧，這是一個橫向列表，節點從左往右排列，最右邊的節點特別突出。這就是凸顯布局的特征，凸顯的節點可在凸顯布局任意位置，上下左右，左上左下右上右下都行。

這里巧妙運用margin-*:auto實現了凸顯布局。相信大家實現水平居中固定寬度的塊元素都會使用margin:0 auto。

在此同樣原理，當節點聲明margin-*:auto時，瀏覽器會自動計算剩余空間并將該值賦值給該節點。在使用該技巧時必須基于flex布局。

<ul class="highlight-layout">
    <li>Alibaba</li>
    <li>Tencent</li>
    <li>Baidu</li>
    <li>Jingdong</li>
    <li>Ant</li>
    <li>Netease</li>
</ul>

.highlight-layout {
    display: flex;
    align-items: center;
    padding: 0 10px;
    width: 600px;
    height: 60px;
    background-color: #3c9;
    li {
        padding: 0 10px;
        height: 40px;
        background-color: #3c9;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }
    &.left li {
        &:not(:first-child) {
            margin-left: 10px;
        }
        &:last-child {
            margin-left: auto;
        }
    }
    &.right li {
        &:not(:last-child) {
            margin-right: 10px;
        }
        &:first-child {
            margin-right: auto;
        }
    }
    &.top {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:first-child) {
                margin-top: 10px;
            }
            &:last-child {
                margin-top: auto;
            }
        }
    }
    &.bottom {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:last-child) {
                margin-bottom: 10px;
            }
            &:first-child {
                margin-bottom: auto;
            }
        }
    }
}

在此還有一個小技巧，那就是:not()與:first-child和:last-child的巧妙運用。這樣組合讓特殊位置的節點直接減少屬性覆蓋的問題，不僅易讀還能裝逼。

• :not(:first-child)：排除首節點，其他節點都使用某些樣式

• :not(:last-child)：排除尾節點，其他節點都使用某些樣式

以上是“css如何實現凸顯布局”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！