CSS布局

kviccn 發布于2019-08-30 13:46 / 1102人閱讀

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

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

原文鏈接

單列布局

單列布局通常用于網站的首頁，分為頭部的導航、網頁內容、頁腳相關信息。

//html

    
    
    


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

優點：布局實現簡單，界面顯示整體性強，給人感覺簡潔大方。

左右布局

左右布局常見于博客、后臺管理系統，左側為導航，右側做內容顯示。

//html

float+margin

左側元素設置成向左浮動并固定寬度，右側元素左外邊距預留出左側元素的寬度。

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

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

.right{
    margin-left: 200px;
}

優點：布局簡單，右側寬帶可自適應。

position+margin

左側元素用絕對定位固定在左邊，右側元素預留左外邊距。

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

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

.right{
    margin-left: 200px;
}

優點：左側內容可固定位置，右側內容寬度自適應。

圣杯布局

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

float+負margin+padding+position

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

//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的順序不能更改，當窗口過小時會出現布局錯亂，可以設置min-widthmin-width解決。

雙飛翼布局

雙飛翼布局始于淘寶UED，與圣杯布局相似，但是做了改進，是用html結構的調整減少了相對屬性設置

float+負margin+margin

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

//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;
}

優點：

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

雙飛翼布局不用設置相對布局，以及對應的left和right值。

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

flex布局

與傳統布局方式相比，flex提供了一套簡潔、完整、響應式的解決方案。
可以看下flex布局學習了解一下。

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

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

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

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

CSS及布局

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

jaysun 2019-08-29 14:04 評論0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS 常用布局在小程序中的應用

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

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

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

CoderDock 2019-08-30 15:44 評論0 收藏0
HTML-CSS

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

xiaokai 2019-08-01 18:21 評論0 收藏0