CSS「width 100 」和寬度繼承的淺薄認識

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

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

一般層級元素

複製


class
="demo-parent"
>
class
='demo-child'
>

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

複製


class
="demo-parent demo-parent-padding"
>
class
='demo-child'
>

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

width:100% demo效果通過以上，我們就可以得知：對於不存在其它關係的巢狀，width:100%是直接基於父級div的寬度（寬度要指定）。

存在浮動元素的層級關係

複製


class
="demo-parent demo-parent-border"
>
class
='demo-child demo-child-float'
>

得出的結論同上。

存在定位元素

複製


class
="demo-parent demo-parent-border"
>
class
='demo-child pos-relative'
>

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

複製


class
="demo-parent demo-parent-border"
>
class
='demo-child pos-absolute'
>

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

複製


class
="demo-parent demo-parent-border pos-relative"
>
class
='demo-child pos-absolute'
>

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

對於使用position:relative的子類元素而言，width:100%也始終是基於基父級元素而並不會基於其上層元素中的relative。

對於絕對定位的子無素，要是其外層的所有元素中都沒有用position:relative，則width:100%是基於body，否則就是離基最近的乙個position:relative的元素。

而對於position:fixed的元素，其一直是基於body,所以其寬度100%就是基於body。

如果你對css繼承關係比較了解的話，你可能就知道上面的「width:100%」可能就是不句多餘的話，並且不使用時，效果可能更好。比如最上面的那張上「只設定padding」時，要不使用width:100%就不會出現難看的溢位。那麼width:100%合適在什麼時候使用呢？

width:100%在什麼情況下使用不多餘

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

內層子元素必須為塊級元素，才有可能出現寬度繼承

當父元素寬度確定，子元素不存在浮動，絕對定位，固定定位時，其寬度也能夠很好的繼承；相反，寬度會零（只有通過裡面的內容把其撐開）。

當父元素寬度不確定時（寬度是繼承而來，或是用的相對單位），不會對繼承造成什麼影響。其仍然滿足上面的1、2兩條。

既然上面說了，到底知道了這些又有什麼用呢！不知道你有沒有注意到有些**在水平方向上，永遠都是滿螢幕，不會出現水平滾動條。那麼這些靈活的布局是怎麼實現的呢？很多時候，你可能有種需求：整個網頁為整個網頁寬度，在主體部分分為兩列，其中左邊部分寬度自動擴充套件，而右邊部分寬度固定。那麼，這一類的布局方式如何實現呢？你完全可以這樣。。。

複製

id=
"main"
>id=
"main-left"
class
="float"
>
這個是左邊部分，寬度確定id=
"main-right"
>
這個是右邊部分，寬度自動擴充套件
class
="clear"
>

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

複製

id=
"main"
>id=
"main-left"
class
="float"
>
這個是右邊部分，寬度確定id=
"main-right"
>
這個是左邊部分，寬度自動擴充套件
class
="clear"
>

請注意看上面css有變動的地方。或許你還可以這樣來。。。

複製

id=
"main"
>id=
"main-con"
class
="float"
>id=
"main-con-left"
>id=
"main-con-right"
class
="float"
>
class
="clear"
>

對於以上的幾種方式，都有優缺點。可能在實際使用時還要是對其進行相應的處理，以保證布局不亂。現在，我們在以上基礎上進行擴充套件。要求是：網頁鋪滿螢幕，主體部分分為3列，左右兩列寬度固定，中間一列寬度自適應。實現**如下：

複製

id=
"main"
>id=
"main-left"
>id=
"main-right"
>id=
"main-center"
>
class
="clear"
>

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

CSS「width 100 」和寬度繼承的淺薄認識

關於div高度寬度 100

關於div寬度和高度的100 設定的問題

關於Div的寬度與高度的100 設定

CSS「width 100 」和寬度繼承的淺薄認識

關於div高度 寬度 100

關於div寬度和高度的100 設定的問題

關於Div的寬度與高度的100 設定

相關推薦

關於div高度寬度 100