【轉】css中width:100%是相對於誰

轉，原文： https://www.cnblogs.com/acaciasun/articles/3331710.html

 

 

 

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .parent {
    width: 200px;
    height: 200px;
    background-color: aquamarine;

    margin: 30px;
    padding: 30px;
    border: 20px solid red;
    position: relative;
  }

  .child {
    width: 100%;
    height: 20px;
    background-color: green;
    float: left;
    position: absolute;
  }
</style>
<div class="parent">

  <div class="child"></div>
</div>

　　

 

---------------------------------

從剛開始接觸CSS到現在，一般用的單位都是像素這種絕對的單位。簡單方便，而且還不容易出現一些莫名其妙的問題。優點聽起來不錯，缺點也還是很多 的，比如說：頁面缺乏靈活性，自適應性不強······ 那么有什么好的解決方法嗎？有，不過咱還是把范圍縮小，就放在width:100%個這相對單位上來看看。

理論篇

width:100%的相對於誰

想必學過CSS，了解了相對單位的童鞋們都應該知道：相對單位於都有一個基准。那么width:100%是基於誰呢？

我把可能出現的幾種情況列在下面，並以DEMO說明，在最后進行總結。

 一般層級元素

1. <styletype="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-child {width:100%;height:30px;background:pink;}
4. </style>
5. <divclass="demo-parent">
6. <divclass='demo-child'></div>
7. </div>

下面我們把上面的demo-aprent中加入padding,margin,border值

1. <styletype="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-parent-margin {margin:10px;}
4. .demo-parent-padding {padding:10px;}
5. .demo-parent-border {border:5px solid #FF486B;}
6. .demo-child {width:100%;height:30px;background:pink;}
7. </style>
8. <divclass="demo-parent demo-parent-padding">
9. <divclass='demo-child'></div>
10. </div>

對於以上的加入過程之后的圖如下，你可以從中得到什么結論呢？

width:100% DEMO效果

通過以上，我們就可以得知：對於不存在其它關系的嵌套，width:100%是直接基於父級DIV的寬度（寬度要指定）。

存在浮動元素的層級關系

1. <styletype="text/css">
2. .demo-child-float{float:left;}
3. </style>
4. <divclass="demo-parent demo-parent-border">
5. <divclass='demo-child demo-child-float'></div>
6. </div>

得出的結論同上。

存在定位元素

1. <styletype="text/css">
2. .pos-relative { position:relative;}
3. .pos-absolute { position:absolute;}
4. </style>
5. <divclass="demo-parent demo-parent-border">
6. <divclass='demo-child pos-relative'></div>
7. </div>

對於以上結構中，外層div是使用的默認的，而內層div使用相對定位，而width:100%也只基於基父級。請繼續看如下代碼：

1. <divclass="demo-parent demo-parent-border">
2. <divclass='demo-child pos-absolute'></div>
3. </div>

外層div使用默認的定位方式，而里層div使用的是絕對定位，而些時你會發現絕對定位的div寬度為body元素同寬，也就是說其基於body,或html元素（其實這個也很容易理解：因為position:absolute是基於body元素來進行定位的）。

1. <divclass="demo-parent demo-parent-border pos-relative">
2. <divclass='demo-child pos-absolute'></div>
3. </div>

由上一個例子，我們知道了position:absolute是基於body元素，而當給上層div一個position:relative時，它就成了width:100%的基准點了。

小結論：

1. 對於使用position:relative的子類元素而言，width:100%也始終是基於基父級元素而並不會基於其上層元素中的relative。
2. 對於絕對定位的子無素，要是其外層的所有元素中都沒有用position:relative，則width:100%是基於body，否則就是離基最近的一個position:relative的元素。
3. 而對於position:fixed的元素，其一直是基於body,所以其寬度100%就是基於body。

width:100%好像是多余

如果你對CSS繼承關系比較了解的話，你可能就知道上面的“width:100%”可能就是不句多余的話，並且不使用時，效果可能更好。比如最上面 的那張圖片上“只設置padding”時，要不使用width:100%就不會出現難看的溢出。那么width:100%合適在什么時候使用呢？

width:100%在什么情況下使用不多余

我們要弄清楚什么時候合適使用，那我們就要弄清楚它在什么時候多余。說白了就是width什么時候會自動繼承。以下是我的總結：

1.  內層子元素必須為塊級元素，才有可能出現寬度繼承
2. 當父元素寬度確定，子元素不存在浮動，絕對定位，固定定位時，其寬度也能夠很好的繼承；相反，寬度會零（只有通過里面的內容把其撐開）。
3. 當父元素寬度不確定時（寬度是繼承而來，或是用的相對單位），不會對繼承造成什么影響。其仍然滿足上面的1、2兩條。

實踐篇

既然上面說了，到底知道了這些又有什么用呢！不知道你有沒有注意到有些網站在水平方向上，永遠都是滿屏幕，不會出現水平滾動條。那么這些靈活的布局是怎么實現的呢？

靈活的兩列式布局

很多時候，你可能有種需求：整個網頁為整個網頁寬度，在主體部分分為兩列，其中左邊部分寬度自動擴展，而右邊部分寬度固定。那么，這一類的布局方式如何實現呢？你完全可以這樣。。。

1. <styletype="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
3. #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float{float:left;}
6. .clear{clear:both: height :0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"class="float">
10. 這個是左邊部分，寬度確定
11. </div>
12. <divid="main-right">
13. 這個是右邊部分，寬度自動擴展
14. </div>
15. <divclass="clear"></div>
16. </div>

那么，要是我們想在右邊寬度固定，而左邊寬度自適應，又如何呢？

1. <styletype="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-right:300px;}
3. #main-left {margin-right:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float{float:right;}
6. .clear{clear:both: height :0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"class="float">
10. 這個是右邊部分，寬度確定
11. </div>
12. <divid="main-right">
13. 這個是左邊部分，寬度自動擴展
14. </div>
15. <divclass="clear"></div>
16. </div>

請注意看上面CSS有變動的地方。

或許你還可以這樣來。。。

1. <styletype="text/css">
2. #main {width:100%;min-height:600px;background:#FEFF0A;}
3. #main-con {width:100%;min-height:500px; background:#8E8DCC;}
4. #main-con-left {margin-right:300px;min-height:400px;background:#98FF1A;}
5. #main-con-right {width:300px;margin-left:-300px;min-height:400px;background:#7CC0FF;}
6. .float{float:left;}
7. .clear {clear:both; font-size:0; height:0; line-height:0;}
8. </style>
9. <divid="main">
10. <divid="main-con"class="float">
11. <divid="main-con-left"></div>
12. </div>
13. <divid="main-con-right"class="float"></div>
14. <divclass="clear"></div>
15. </div>

對於以上的幾種方式，都有優缺點。可能在實際使用時還要是對其進行相應的處理，以保證布局不亂。

自適應的三列式布局

現在，我們在以上基礎上進行擴展。要求是：網頁鋪滿屏幕，主體部分分為3列，左右兩列寬度固定，中間一列寬度自適應。實現代碼如下：

1. <styletype="text/css">
2. #main {min-height:600px;background:#FEFF0A;padding:0 300px;}
3. #main-left { width:300px;min-height:400px; margin-left:-300px;float:left;background:#98FF1A;}
4. #main-center {min-height:400px;background:#8E8DCC;}
5. #main-right {min-height:400px; width:300px; margin-right:-300px; float:right;background:#7CC0FF;}
6. .clear {clear:both; height:0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"></div>
10. <divid="main-right"></div>
11. <divid="main-center"></div>
12. <divclass="clear"></div>
13. </div>

當然對於以上三列式布局，我們也可以通過內嵌div的方式來進行擴展，在這里我就不給出源碼了。

小結

• 光看不練是沒有多大意義的。你可以按照以上的思路來寫一下，試一下，或許還有意外驚喜。
• 對於以上代碼，在標准瀏覽器上面肯定是不存大的問題。但是你有沒有想過，自適應部分里面的內容可能會把div撐大，導致布局變亂。其實，你在css加添加: #main-center img {max-width:80%;}
• 如果你的用戶群中使用IE6的比例很高的話，你可能就要注意IE6浮動引起的雙邊距問題。
• 對於以上結構，還可以進行擴展。比如說到了手機等小分辨率屏幕上也能夠有良好的用戶體驗。