CSS 布局方式

LancerComet 發(fā)布于2019-08-29 15:27 / 1817人閱讀

摘要：中間左欄右欄清除浮動如下圖缺點結構不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章

W3C標準

由萬維網(wǎng)聯(lián)盟制定的一系列標準，包括：

結構化標準語言（HTML和XML）

表現(xiàn)標準語言（CSS）

行為標準語言（DOM和ECMAScript）

CSS中的定位機制

在CSS中存在三種定位機制：

標準文檔流（Normal flow）

浮動（Floats）

絕對定位（Absolute positioning）

標準文檔流特點

從上到下，從左到右，輸出文檔內容

由塊級元素和行級元素組成

塊級元素特點

從左到右撐滿頁面，獨占一行

觸碰到頁面邊緣時，會自動換行

行級元素特點

能在同一行內顯示

不會改變HTML文檔結構

注意： 塊級元素和行級元素都是盒子模型

盒子模型

盒子模型—網(wǎng)頁布局的基石,由4部分組成

邊框（border）

外邊距（margin）

內邊距（padding）

盒子中的內容（content）

前三者是盒子模型的特性，最后一點可以理解為盒子模型的功能，可用于盛放網(wǎng)頁內容，包括文本、圖片、音頻、視頻等

盒子模型的三維立體結構

第一層：border 第二層：內容+padding 第三層：背景圖片第四層：背景顏色第五層：外邊距

盒子模型尺寸

盒子模型尺寸=邊框+外邊距+內邊距+盒子中的內容尺寸

注意：

標準盒子模型：寬度= 內容的寬度（content）+ border+ padding+ margin

低版本IE盒子模型：寬度= 內容的寬度（content+ border+ padding）+ margin

區(qū)別在于內容的寬度是否包含border和padding，可通過設置box-sizing:border-box(內容寬度包含border和padding值)來實現(xiàn)統(tǒng)一

table 實現(xiàn)布局

最初網(wǎng)頁出現(xiàn)時使用，DIV布局出現(xiàn)后廢棄

兩欄布局

兩欄布局：一欄定寬，一欄自適應。這樣子做的好處是定寬的那一欄可以做廣告，自適應的可以作為內容主體。

實現(xiàn)方式

float+margin

  
    定寬
    自適應
  

  .left{
    width: 200px;
    height: 600px;
    background: red;
    float: left;
    display: table;
    text-align: center;
    line-height: 600px;
    color: #fff;
  }

  .right{
    margin-left: 210px;
    height: 600px;
    background: yellow;
    text-align: center;
    line-height: 600px;
  }

如下圖：

其他的方法：還可以使用position的absolute，可以使用同樣的效果

三欄布局

特點：兩邊定寬，然后中間的width是auto的，可以自適應內容，再加上margin邊距，來進行設定。

float 實現(xiàn)三欄布局

使用左右兩欄使用float屬性，中間欄使用margin屬性進行撐開，注意的是html的結構

左欄
右欄
中間欄

.left{
  width: 200px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 150px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}

如下圖：

缺點：

當寬度小于左右兩邊寬度之和時，右側欄會被擠下去

html的結構不正確

position 定位實現(xiàn)

左右兩欄使用position進行定位，中間欄使用margin進行定位

左欄
中間欄
右欄

.left{
    background: yellow;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: red;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

如下圖：

缺點：當父元素有內外邊距時，會導致中間欄的位置出現(xiàn)偏差

float和BFC配合圣杯布局

將middle的寬度設置為100%，然后將其float設置為left，其中的main塊設置margin屬性，然后左邊欄設置float為left，之后設置margin為-100%，右欄也設置為float：left，之后margin-left為自身大小。


    
        中間
    
    
        左欄
    
    
        右欄
    


.wrapper{
    overflow: hidden;  //清除浮動
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: red;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: yellow;
    margin-left: -200px;
}

如下圖：

缺點：

結構不正確

多了一層標簽

flex 布局


    左欄
    中間
    右欄


.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 3000px;
    background: yellow;
}

如下圖：

缺點： 兼容性問題

參考文章： https://segmentfault.com/a/11...

GPU云服務器云服務器 css布局 css布局教程學習css布局 android布局方式

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

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

CSS及布局

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

jaysun 2019-08-29 14:04 評論0 收藏0
翻譯 | CSS網(wǎng)格（CSS Grid）布局入門

摘要：瀏覽器兼容性網(wǎng)格布局從開始收到支持，微軟在會更新對網(wǎng)格布局的支持。微軟的瀏覽器和有一種比較舊的實現(xiàn)，所以有不少限制，我們會簡單介紹新的實現(xiàn)方式和老的實現(xiàn)方式之間的區(qū)別，這樣你能知道如何規(guī)避他們。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔校對者：珂珂、干干翻譯 | CSS網(wǎng)格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 評論0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
HTML-CSS

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

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

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

CHENGKANG 2019-08-29 14:11 評論0 收藏0