一、單列布局單列布局，通常定寬（可以使用%，可以實(shí)現(xiàn)自適應(yīng)，也可以直接確定寬度大?。┎⒗胢argin: auto進(jìn)行水平居中

<div class=&#34;main&#34;></div>" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > CSS實(shí)現(xiàn)常見布局

CSS實(shí)現(xiàn)常見布局

時(shí)間：2023-09-19 08:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-19 08:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

CSS實(shí)現(xiàn)常見布局：從我看到的，知道的，全面的總結(jié)一下。CSS常見布局。

一、單列布局

單列布局，通常定寬（可以使用%，可以實(shí)現(xiàn)自適應(yīng)，也可以直接確定寬度大?。┎⒗?code>margin: auto進(jìn)行水平居中

<div class="main"></div>? .main { width: 90%; height: 2000px; background-color: aqua; margin: 0 auto; }


二、雙列布局

1. 定寬雙列布局

常見利用float 進(jìn)行布局

  1. 左邊左浮動(dòng)，右邊右浮動(dòng)。(或均為左浮動(dòng))
  2. 需要清除浮動(dòng)。
  3. 可以修改盒子模型為border-box
<div class="main"> <div class="left"></div> <div class="right"></div> </div>??? .main { width: 90%; margin: 0 auto; overflow: hidden;/*觸發(fā)BFC，清除浮動(dòng)*/ } .left { width: 1000px;/*也可以使用百分比*/ height: 1500px; float: left; background-color: aqua; }? .right { width: 1000px;/*也可以使用百分比*/ height: 1500px; float: right; background-color: aqua; }


2. 左側(cè)固定，右側(cè)自適應(yīng)

創(chuàng)建基本的html布局,要求：兩個(gè)div之間相距20px，左側(cè)div寬120px

<div class="main"> <div class="left"></div> <div class="right"></div> </div>?雙inline-block

.main { padding: 15px 20px; border: 1px dashed #ff6c60; font-size: 0; } .left { margin-right: 20px; display: inline-block; width: 120px; height: 500px; font-size: 14px; border: 1px solid #ddd; vertical-align: top;/*上端對(duì)齊*/ box-sizing: border-box; } .right { display: inline-block; width: calc(100% - 140px);/*注意：當(dāng)父容器存在padding時(shí)100% 不算padding*/ height: 1000px; font-size: 14px; border: 1px solid #ddd; vertical-align: top;/*上端對(duì)齊*/ box-sizing: border-box; }
  1. 需要準(zhǔn)確確定子容器的寬度，需要border-box模型
  2. 需要消除空格的影響，需要父容器font-size : 0
  3. 使頂端對(duì)齊，`vertical-align: top



雙float

.main { overflow: hidden;/*清除浮動(dòng)帶來(lái)的影響*/ padding: 15px 20px; border: 1px dashed #ff6c60; } .left { width: 120px; height: 500px; box-sizing: border-box; border: 1px solid #ddd; float: left; margin-right: 20px; } .right { width: calc(100% - 140px); height: 1000px; box-sizing: border-box; border: 1px solid #ddd; float: left; }


float+ margin-left

  1. 左邊左浮動(dòng)
  2. 右邊計(jì)算margin-left
  3. 清除浮動(dòng)。
.main { overflow: hidden;/*清除浮動(dòng)帶來(lái)的影響*/ padding: 15px 20px; border: 1px dashed #ff6c60; } .left { width: 120px; height: 500px; box-sizing: border-box; border: 1px solid #ddd; float: left; } .right { width: calc(100% - 140px); height: 1000px; box-sizing: border-box; border: 1px solid #ddd; margin-left: 140px; }absolute+margin-left

  1. 左邊絕對(duì)定位（父元素設(shè)置position)
  2. 右邊計(jì)算margin-left。
.main { padding: 15px 20px; border: 1px dashed #ff6c60; position: relative; } .left { width: 120px; height: 500px; box-sizing: border-box; border: 1px solid #ddd; position: absolute; } .right { width: calc(100% - 140px);/*不設(shè)置寬度也可以,由里面自由撐開*/ height: 1000px; box-sizing: border-box; border: 1px solid #ddd; margin-left: 140px; }注意：沒(méi)有清除絕對(duì)定位的方法，若左側(cè)盒子高于右側(cè)盒子，就會(huì)超出父容器的高度。因此只能通過(guò)設(shè)置父容器的min-height來(lái)防止這種情況。

使用float+BFC

上面的方法都是需要通過(guò)左邊盒子的寬度來(lái)計(jì)算某一個(gè)值，下面的三個(gè)方法不需要計(jì)算。

將右邊盒子BFC。

flex方案

.main { padding: 15px 20px; border: 1px dashed #ff6c60; display: flex; align-items: flex-start; } .left { width: 120px; height: 500px; border: 1px solid #ddd; flex: 0 0 auto; margin-right: 20px; } .right { height: 1000px; border: 1px solid #ddd; flex: 1 1 auto; }flex容器的一個(gè)默認(rèn)屬性值:align-items: stretch;。這個(gè)屬性導(dǎo)致了列等高的效果。 為了讓兩個(gè)盒子高度自動(dòng)，需要設(shè)置: align-items: flex-start;

grid方案

暫時(shí)沒(méi)有進(jìn)行學(xué)習(xí)，今日不適合學(xué)習(xí)，待續(xù)。。。




三、三列布局

1. 兩側(cè)定寬，中間自適應(yīng)

使用float浮動(dòng)

  1. 設(shè)置父元素寬度，
  2. 設(shè)置左左右浮動(dòng)。
  3. 中間元素用到calc()來(lái)計(jì)算所需寬度，達(dá)到自適應(yīng)。
  4. 使用margin調(diào)整間距，也可以全部左浮動(dòng)。
  5. 需要清除浮動(dòng)帶來(lái)的影響。
<div class="main"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> .main { width: 90%; margin: 0 auto; overflow: hidden;/*觸發(fā)BFC，清除浮動(dòng)*/ } .left { width: 200px;/*也可以使用百分比*/ height: 1500px; float: left; background-color: aqua; margin: 0 10px; }? .right { width: 200px;/*也可以使用百分比*/ height: 1500px; float: right; background-color: aqua; margin: 0 10px; } .middle { width: calc(100% - 460px); height: 1500px; float: left; background-color: aqua; margin: 0 10px; }


使用定位

  1. 為父元素設(shè)置relative定位。
  2. 分別定位各個(gè)子元素
  3. 確定間距。
(不建議使用，因?yàn)槭褂媒^對(duì)定位，后面加入內(nèi)容的時(shí)候會(huì)被覆蓋)

<div class="main"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> .main { width: 90%; margin: 0 auto; position: relative; } .left { width: 200px;/*也可以使用百分比*/ height: 1500px; position: absolute; left: 10px; background-color: aqua; }? .right { width: 200px;/*也可以使用百分比*/ height: 1500px; position: absolute; right: 10px; background-color: aqua; } .middle { width: calc(100% - 460px); height: 1500px; position: absolute; left: 230px; background-color: aqua; }?





padding+負(fù)margin(圣杯布局)

此原理來(lái)自這篇文章。

圣杯布局In Searh of the Holy Graid

這篇文章給出了一個(gè)不一樣的解決方案，在此我有一些修改，清除浮動(dòng)的方式改為了overflow: hidden;

要求：左邊寬度為 200px，右邊150px，中間自適應(yīng)。

基本的結(jié)構(gòu)如下：

<div id = "container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div>基本的css樣式如下(為了更好的顯示，所以設(shè)置了邊框，將box-sizing設(shè)置為border-box模型)：

#container { padding-left: 200px; padding-right: 150px; overflow: hidden; border: 1px dashed #ff6c60; } #container .column { border: 1px solid #ff6c60; box-sizing: border-box; } #center { width: 100%; height: 1000px; }? #left { width: 200px; height: 100px;? }? #right { width: 150px; height: 100px; } 將左側(cè)弄到上面去

#left { position: relative; margin-left: -100%; right: 200px; }#right { margin-right: -150px;}?就OK了！

【注】

  1. 為了使其更加完美，可以在body上加入,防止因?yàn)g覽器窗口過(guò)小，而導(dǎo)致布局失效。
    body {
    min-width:..;
    }
  2. 需要添加一些padding讓布局更加的完美。只需要將left和right 的寬度保持住就可以。

    雙飛翼實(shí)現(xiàn)三列布局
    雙飛翼和圣杯是一樣的道理，只是實(shí)現(xiàn)的原理不一樣，所以起了不同的名字。
對(duì)于圣杯，我們沒(méi)有添加額外的標(biāo)簽，而雙飛翼需要為center加一個(gè)額外的div，首先我們先將頁(yè)面的基本結(jié)構(gòu)搭建起來(lái)。

<div id="header"></div> <div id = "container"> <div id="center" class="column"> <div id="inner-center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div><div id="footer"></div>和圣杯布局一樣，只不過(guò)需要將，padding 用 margin來(lái)進(jìn)行實(shí)現(xiàn)。

css代碼如下：

#header { width: 100%; height: 50px; background-color: aliceblue; }? #container { overflow: hidden;/*觸發(fā)BFC，清除浮動(dòng)影響*/ border: 1px dashed #ff6c60; } #footer { width: 100%; height: 50px; background-color: aliceblue; }? .column { float: left; } #center { width: 100%; } #inner-center { height: 1000px; margin-left: 200px; margin-right: 150px; background-color: aqua; }? #left { width: 200px; height: 100px; margin-left: -100%; background-color: aqua; }? #right { width: 150px; height: 100px; margin-left: -150px; background-color: aqua; }?

四、等分布局

1. 常規(guī)實(shí)現(xiàn)

我們用四個(gè)子元素來(lái)進(jìn)行等分。父元素默認(rèn)100%寬度， 子元素要平均分為四份。間距為10px;

基本的html結(jié)構(gòu)如下：

<div class="father"> <div class="son"></div> <div class="son"></div> <div class="son"></div> <div class="son"></div></div>


  1. 子元素設(shè)置浮動(dòng)。
  2. 設(shè)置margin-right: 10px,寬度則為calc(25% - 10px)
  3. 父元素清除浮動(dòng)。使用負(fù)邊距，將最后一個(gè)margin-left清除。
.father { overflow: hidden; margin-right: -10px; } .son { width: calc(25% - 10px); height: 500px; float: left; margin-right: 10px; background-color: aqua; }


關(guān)于負(fù)邊距更多的探討，計(jì)劃下篇文章總結(jié)一下。

2. flex 實(shí)現(xiàn)

同樣需要父容器使用負(fù)邊距來(lái)進(jìn)行清除帶來(lái)的影響。

html基本代碼同上

.father { display: flex; margin-right: -10px; } .son { flex: 1 1 auto; align-items: flex-start; height: 500px; border: 1px solid #ff6c60; margin-right: 10px; }





（完）

關(guān)鍵詞：布局,實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉