CSS結構與布局

figofuture 發布于2019-08-30 13:13 / 3314人閱讀

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了，

title: 結構與布局
date: 2016-12-11
tags: CSS Secrets

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 結構

CSS 樣式:

footer{
    background: #333;
}

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

使用 calc() 方法以后，就不必如此麻煩了，我們只需三行代碼即可實現:

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 結構


    
        Am i center?
        Center me ,please!

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 之后添加一個 div#_footer。

此時的 DOM 結構如下：

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

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

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

GPU云服務器云服務器 css布局 css布局教程學習css布局 css與html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115392.html

CSS Grid布局：什么是網格布局

摘要：網格單元格網格單元格是指四條網格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網格區域是行線和列線之間的區域，其主要包括了四個網格單元格。 CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網格或者柵格，也就是早期的960gs。不管是網格還是柵格或者現在的CSS Gr...

xiaoqibTn 2019-08-28 18:03 評論0 收藏0
瀏覽器渲染頁面過程與頁面優化

摘要：由一道面試題引發的思考從用戶輸入瀏覽器輸入到頁面最后呈現有哪些過程一道很常規的題目，考的是基本網絡原理，和瀏覽器加載，過程。所以抽出時間研究下瀏覽器渲染頁面的過程。由一道面試題引發的思考：從用戶輸入瀏覽器輸入url到頁面最后呈現有哪些過程？一道很常規的題目，考的是基本網絡原理，和瀏覽器加載css，js過程。答案大致如下：用戶輸入URL地址瀏覽器解析URL解析出主機名瀏覽...

djfml 2019-08-29 12:58 評論0 收藏0
CSS結構與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

BearyChat 2019-08-22 10:49 評論0 收藏0
CSS結構與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

renweihub 2019-08-01 16:04 評論0 收藏0
如何使用Flexbox和CSS Grid，實現高效布局

摘要：代碼如下頁面內容樣式接下來，將側邊欄和主內容區域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結束值位于同一行上，并用斜杠分隔。設計方法總結以上的布局設計中，使用了來進行整體布局以及設計中的非線性部分。 CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現復雜布局時，這種方法不總是那么理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS...

eternalshallow 2019-08-29 13:29 評論0 收藏0