成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS布局

kviccn / 1115人閱讀

摘要：圣杯布局圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應(yīng)的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的和值。

合理的布局是產(chǎn)品的基礎(chǔ)，可以使人感覺整齊大方，提升用戶體驗。掌握幾種常見的布局形式也是前端開發(fā)的基礎(chǔ)，對于快速實現(xiàn)頁面重構(gòu)有很大幫助。

原文鏈接

單列布局

單列布局通常用于網(wǎng)站的首頁，分為頭部的導(dǎo)航、網(wǎng)頁內(nèi)容、頁腳相關(guān)信息。

//html


    

    

    



//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

優(yōu)點：布局實現(xiàn)簡單，界面顯示整體性強(qiáng)，給人感覺簡潔大方。

左右布局

左右布局常見于博客、后臺管理系統(tǒng)，左側(cè)為導(dǎo)航，右側(cè)做內(nèi)容顯示。

//html
float+margin

左側(cè)元素設(shè)置成向左浮動并固定寬度，右側(cè)元素左外邊距預(yù)留出左側(cè)元素的寬度。

//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    width: 200px;
    float: left;
}

.right{
    margin-left: 200px;
}

優(yōu)點：布局簡單，右側(cè)寬帶可自適應(yīng)。

position+margin

左側(cè)元素用絕對定位固定在左邊，右側(cè)元素預(yù)留左外邊距。

.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.right{
    margin-left: 200px;
}

優(yōu)點：左側(cè)內(nèi)容可固定位置，右側(cè)內(nèi)容寬度自適應(yīng)。

圣杯布局

圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應(yīng)的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。

float+負(fù)margin+padding+position

布局步驟：
1、三列內(nèi)容都設(shè)置向左浮動。
2、設(shè)置container寬度為100%，設(shè)置兩側(cè)欄的寬度。
3、設(shè)置left左邊距為負(fù)100%，設(shè)置right左邊距為負(fù)的自身寬度。
4、設(shè)置body的padding值給左右兩塊內(nèi)容留空間。
5、設(shè)置left、right為相對定位，左側(cè)的left屬性值為負(fù)自身寬度，右側(cè)的right屬性值為負(fù)自身寬度。

//html


    

    

    




//css
.body{
    padding: 0 150px;
}

.container{
    float: left;
    width: 100%;
}

.left, .right{
    position: relative;
    float: left;
    width: 150px;
}

.left{
    left: -150px;
    margin-left: -100%;
}

.right{
    right: -150px;
    margin-left: -150px;
}

這種布局中html的順序不能更改，當(dāng)窗口過小時會出現(xiàn)布局錯亂，可以設(shè)置min-widthmin-width解決。

雙飛翼布局

雙飛翼布局始于淘寶UED，與圣杯布局相似，但是做了改進(jìn)，是用html結(jié)構(gòu)的調(diào)整減少了相對屬性設(shè)置

float+負(fù)margin+margin

布局步驟：
1、三列內(nèi)容都設(shè)置向左浮動。
2、設(shè)置container寬度為100%，設(shè)置左右內(nèi)容的寬度。
3、設(shè)置left左邊距為負(fù)100%，設(shè)置right左邊距為負(fù)自身寬度。
4、設(shè)置content的margin值給左右內(nèi)容留空間。

//html


    








//css
.container, .left, .right{
    float: left;
}

.container{
    width: 100%;
}

.left{
    width: 150px;
    margin-left: -100%;
}

.right{
    width: 150px;
    margin-left: -150px;
}

.content{
    margin: 0 150px;
}

優(yōu)點：

圣杯采用的是padding，而雙飛翼采用的margin，解決了圣杯布局main的最小寬度不能小于左側(cè)欄的缺點。

雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的left和right值。

通過引入相對布局，可以實現(xiàn)三欄布局的各種組合，例如對右側(cè)欄設(shè)置position: relative; left: 150px; ,可以實現(xiàn)left+right+content的布局。

flex布局

與傳統(tǒng)布局方式相比，flex提供了一套簡潔、完整、響應(yīng)式的解決方案。
可以看下flex布局學(xué)習(xí)了解一下。

這里只是簡單介紹幾種布局方式，display+position+float屬性可以實現(xiàn)不同特殊效果布局展現(xiàn)形式，選擇最適合的方案才是王道

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115527.html

相關(guān)文章

  • CSS及布局

    摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應(yīng)。主要是對于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看...

    jaysun 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。所以我們先來看看什么是正常的文檔流。 正常文...

    garfileo 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。所以我們先來看看什么是正常的文檔流。 正常文...

    CoderDock 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<