左側固定，右側自適應的佈局方式理解margin負值理論

風雨後見彩虹發表於2018-11-16

一.浮動佈局

1.先讓固定寬度的div浮動！使其脫離文件流。
2.margin-left的值等於固定div的寬度相等。

   .aside{
        float: left;
        width: 200px;
        background-color: red;
    }
    .content{
        margin-left: 200px;
        background-color: blue;
    }
    
<div class="aside">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>

二.margin的負值(3個div)

是固定寬度的div脫離文件流。
利用marin負值可以使得，後面的div可以與前面的div 保持同行顯示。
給包裹內容的div加margin-left 可以使得與左邊的文字不重疊

解釋：margin負值理論
a.當給一個元素設定margin 負值（top/left）,該元素將在該方向上產生位移。
b.當給一個元素設定margin負值（bottom/right）,這個元素並不會像你所預想的產生位移，而是將任何緊隨其後的元素“拉”過來，覆蓋在自己的上邊。
c.負邊距在普通文件流中的作用和效果(margin-bottom負值，減少高度)。
d.左和右的負邊距對元素寬度的影響（margin-right 負值 沒有設定寬度的情況，增加寬度）。
e.負邊距對浮動元素的影響（margin-left負值：覆蓋）。

.aside{
    float: left;
    margin-right: -200px;
    width: 200px;
    background-color: red;
}
.content{
    float: right;
}
.content .inner{
    margin-left: 200px;
    background-color: blue;
}

<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class="content">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia labore facere delectus quaerat expedita, tenetur recusandae tempora eos natus suscipit voluptatum                 necessitatibus soluta voluptates modi ullam. Ab minima similique, illum!
    </div>
</div>

再看一個負值的例項：ul下一排緊密排放多個li

 <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>

三.calc()計算屬性

  • 注意：使用calc計算屬性的時候 運算子(- +等等)兩邊必須有空格
  • 注意兩個div必須一左一右浮動。
  • calc的寬度必須要減去的寬度要與固定寬度保持一致。
.aside{
  float: left;
  width: 200px;
}
.content{
  float: right;
  width:calc(100% - 200px);
}
<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>

四.flex佈局

  • 需要給父級div設定display: flex屬性。
  • 固定寬度的div設定flex: 0 0 200px即可。
  • 內容區域的div直接寫出flex: 1即可。
body{
    display: flex;
}
.aside{
    flex: 0 0 200px;
    background-color: red;
}
.content{
    flex: 1;
    background-color:blue;
}

<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora sequi minima, placeat esse nulla dolor dolores praesentium illo, distinctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto.
</div>

簡單解釋下flex: 0 0 200px的用處，flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

.item {
  flex: none | [ <`flex-grow`> <`flex-shrink`>? || <`flex-basis`> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

flex-grow屬性

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

flex-shrink屬性

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

flex-basis屬性

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。

那麼現在應該明白flex: 0 0 200px的用處了吧。

參考：阮一峰老師:Flex 佈局教程：語法篇

相關文章