幾個常見的佈局的多種實現方式及margin負值總結

時間 2019-12-14

原文原文鏈接

第一部分：幾個常見的佈局實現方式

1、左右兩邊固定, center中間自適應未知

html代碼中 center 部分首先要放在box的最前部分。而後是left,righthtml

聖盃佈局：

<div class="box">

    <div class="center"></div>

    <div class="left"></div>

    <div class="right"></div>

</div>

將三者都 float:left
三者設width：center 部分：width:100%，left和right分別設width
此時center 佔滿了，因此要把left拉到最左邊，使用margin-left:-100%，right設margin-left:-220px;把right拉上去
外圍box加上 padding:0 220px 0 200px
對left和right分別使用相對定位position:relative; left:-200px; 同理right:-220px;
到這裏大概就自適應好了。若是想box高度保持一致能夠給left center right都加上min-height:130px

中間列若是是100%的寬度,各個元素只浮動,後面的元素是會被擠在第二行的。當該元素使用margin-left並超過自身的寬度時，這個元素在第一行就有位置了。而margin的負值達到-100%時，恰能達到窗口最左側web

代碼實現以下：

.box{ position:relative; padding:0 300px 0 200px;}
.box div{ height:500px; float:left; position:relative;}
.center{ width:100%; background:yellow;}
.left{ width:200px; background:red; margin-left:-100%; left:-200px;}
.right{ width:300px; background:blue; margin-left:-300px; right:-300px;}

雙飛翼佈局：

<div class="box">

    <div class="center"><div></div></div>

    <div class="left"></div>

    <div class="right"></div>

</div>

float:left
設width
設margin-left負值
給center 增長一個內層div，而後給內層div設置margin:0 220px 0 200px
main正確展現

代碼以下：

.box{ position:relative;}
.box div{ height:500px; float:left; position:relative;}
.center{ width:100%; background:yellow;}
.center div{ margin:0 300px 0 200px;}
.left{ width:200px; background:red; margin-left:-100%;}
.right{ width:300px; background:blue; margin-left:-300px;}


兩種方法前三步相同，區別在於後面顯示center的部分！

CSS3新功能實現：

<div class="box">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

</div>

.box{ display:-webkit-box; height:500px; width:800px;}
.left{ width:200px; background:red;}
.center{ -webkit-box-flex: 1; background:yellow;}
.right{ width:300px; background:blue;}

給三個div的父級添加：display:-webkit-box;
給中間的center添加-webkit-box-flex:1;

2、center中間寬度固定, left和right自適應

CSS3新功能實現：面試

.box{ display:-webkit-box; height:500px; width:900px;}
.left{ -webkit-box-flex: 1; background:red;}
.center{ width:500px; background:yellow;}
.right{ -webkit-box-flex: 2; background:blue;}

<div class="box">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

</div>

給三個div的父級添加：display:-webkit-box;
給中間的center設width
給兩邊的left和right分別設-webkit-box-flex:1和-webkit-box-flex:2

3、等高佈局：

方法一：利用margin負值

<style>
    *{padding:0; margin:0;}
    .container{ width:500px; border:5px solid pink; overflow: hidden;}
    .left{ width:200px; background:red; padding-bottom: 2000px; margin-bottom:-2000px; float:left;}
    .right{ width:300px; background:yellow; padding-bottom: 2000px; margin-bottom:-2000px; float:left;}
</style>

<body>
<div class="container">
    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>如今個人高度比left高，但left用它的padding-bottom補償了這部分高度</div>
</div>
</body>

方法二：利用CSS3中的display:box

給父元素加display:box;瀏覽器

第二部分：Margin負值基礎知識

1.margin負值對普通文檔流的做用以下：

當一個static元素在top/left使用負邊距時，它把元素向這個特定的方向拉佈局

可是當你將負邊距設置爲bottom/right時，它會把它後面的元素往裏面拉，從而覆蓋本身flex

流動方向始終是向上、向左！spa

2.左右margin負值對元素寬度的影響：

若是元素沒有設置width，左右負邊距會把元素向兩個方向拉以增長寬度。code

實現的前提是：該元素沒有設定width屬性（固然width:auto是能夠的）。htm

想要建立下圖中黑框內的幾個元素按順序排下來且中間帶些間隔的佈局要怎麼作？固然最簡單省事的方法就是利用浮動了。把子元素左浮動，而後設一個合適的margin-right。可是如今設置黑框這個div的寬度爲：四個子元素的寬度加上三列間隔的寬度。因此靠近右邊邊界的子元素就不該該有正向的margin-right了，不然這一行就只能容納三個子元素了。blog

這個問題可利用margin負值解決。按照以下代碼便可實現上圖的效果

<style>
        body,ul,li{ padding:0; margin:0;}
        ul,li{ list-style:none;}
        .container{ height:210px; width:460px; border:5px solid #000;}
        ul{ height:210px; overflow:hidden; margin-right:-20px;} /*一個負的margin-right,至關於把ul的寬度增長了20px*/
        li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
</style>

<div class="container">
    <ul>
        <li>子元素1</li>
        <li>子元素2</li>
        <li>子元素3</li>
        <li>子元素4</li>
        <li>子元素5</li>
        <li>子元素6</li>
        <li>子元素7</li>
        <li>子元素8</li>
    </ul>
</div>

3. margin負值對浮動元素的影響：

好比，下圖是三個向左浮動的元素，寬高都是100px：

如今把它們都設一個margin-right:-50px; 而後會變成這樣子（2和3都向左移動了50px，覆蓋了前一個）：

把瀏覽器縮小，由於寬度不夠元素3會折到下一行，以下圖：

如今給元素3設一個margin-left:-80px;這時咱們看到元素3上去了，並且還覆蓋了元素2的一部分，以下圖：

繼續給元素3設爲margin-left:-100px;這時元素3徹底覆蓋住了元素2，以下圖：

當元素3設爲：margin-left:-200px時，能夠看到元素3繼續向左移動並覆蓋住了元素1，以下圖：

聖盃佈局、雙飛翼佈局都是利用這個原理實現的。就是某個元素雖然是寫在了後面，但能夠經過負邊距讓它在瀏覽器顯示的時候在前面

4. margin負值對絕對定位元素的影響：

絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就是margin定義的邊界

若是margin爲正的時候，那它的邊界是向外擴的，若是margin爲負的時候，則它的邊界是向裏收的。利用這點，就有了經典的利用絕對定位來居中的方法：

看下效果：

但該方法的缺點是必需要知道要居中元素的高度和寬度。

bug：在float中使用負邊距可能會在舊的瀏覽器形成一些問題

解決方法：只要添加position:relative就能夠啦~~

之前總結過這部份內容，最近在作大複習~因此發個博~不知道什麼緣由昨天電腦忽然發神經，正在作頁面的考題電腦一下就死機了，而後重啓以後竟然HTML的頁面整個都空白了。。。。而後電腦忽然就超級卡，要麼PS打不開要麼打一個單詞幾乎須要1分鐘。。。分分鐘想把實驗室的破電腦砸掉！！而後着着急急把寫好的代碼發過去，而後。。今天。。面試官很是不客氣。。的把我打擊了。。。

面試題的總結還有一點點~明天發~