盒子模型之元素寬高屬性

[align=center]盒子模型之元素寬高屬性[/align]

[b]1.1概述[/b]

每個元素都有乙個繼承的height和width屬性。根據元素的不同目的，可以修改元素的height和width值以覆蓋其預設值。

乙個元素預設的height屬性由其內容決定。在垂直方向上所有元素都會盡可能的伸縮來適應內容。

乙個元素的width取決於它的顯示型別。塊級元素的width預設100%，它會鋪滿可用的整個橫向空間。行內元素則是在橫向方向盡可能的伸縮來適應內容

[b]1.2設定盒子高度[/b]

[b]1.2.1 css height屬性[/b]

語法:1、設定高度自動

height:auto;

通常預設高度是auto（自動），自適用內容而增高。如果想高度自適應不用設定高度屬性。

2、設定高度為固定數值

height:50px; 設定物件高度為50px

height:50em; 設定物件高度為50相對長度em

[color=red]注意：通常單獨對乙個div高度為百分比沒有效果。[/color]

[b]1.2.2 css min-height屬性[/b]

設定乙個物件盒子時，在不能確定內容多少，即不能設定固定高度的情況下，為了避免物件沒有內容時不能撐開，則需要設定css min-height最小高度撐高物件盒子。內容少時，最小高度能將內容顯示出；內容多餘最小高度時，能裝下且物件盒子也會隨內容增多而增高。

語法：div

[b]1.2.3 css max-height屬性[/b]

此屬性很少使用，可能是為了避免內容太多將高度撐太高影響布局美化統一，這時設定最大高度限制。比如，乙個table tr td**物件裡裝乙個，而高度不確定，如果太高了不想撐破tr td**，這時通過css max-height限制最大高度是有必要的。

語法：div

[b]1.2.4總結[/b]

物件盒子裡內容增加超出高度限制時，設定屬性為min-height的物件盒子會隨內容的增加而自動增高；設定屬性為max-height的物件盒子高度不變，內容溢位。

小技巧：為設定屬性為max-height的物件盒子新增css overflow:hidden屬性即可隱藏最大高度顯示溢位內容。

[color=red]注意：css max-height/ min-height 屬性ie6不支援，ie7及以上瀏覽器和其它瀏覽器均支援。[/color]

[b]1.3設定盒子寬度——css width屬性[/b]

[b]1.3.1語法[/b]

div

divdiv

[b]1.3.2 div盒子自適應寬度的實現[/b]

自適應寬度，即乙個網頁的寬度隨瀏覽器寬度改變而自動改變。要實現自適應寬度只要運用百分比即可。前提是最外層沒有寬度限制。

[b]1.3.3 css min-width/max-width屬性[/b]

[b]1、語法[/b]

divdiv

[b]2、實際應用[/b]

min-width屬性與max-width屬性多用於設定最小最大寬度限制。

設定乙個盒子的最小寬度限制大於實際寬度時，會被拉伸到最小寬度；小於實際寬度時，盒子寬度為的實際寬度。

設定乙個盒子的最大寬度限制小於實際寬度時，會被縮小到最大寬度，而盒子的寬度始終不會變。

[b]3 、總結[/b]

max-width屬性與min-width屬性可同時在乙個css選擇器使用，設定乙個物件最大最小寬度樣式。一般對物件設定此兩項樣式比較多，但在ie6中不支援此兩個屬性，ie7及以上瀏覽器均支援。