談一談css中的100 和auto

在web前端的程式設計過程中，利用%數值和auto來進行設定元素的寬度和高度等是很常見的，但是他們的值是怎樣計算的呢？

一、100%

百分比設定畫素是很常見的，也比較簡單。一般在兩個地方用的比較多——設定子元素寬高和設定（內|外）邊距。

1.首先看設定寬高，先看例子

html

class="content">div>

div>

css.content

在這個例子中，子元素正常布局，父元素設定了內外邊距以及border（方便觀察計算），結果如下

左邊是父元素的整體樣式，外面是margin，然後是border，然後是padding，然後是content。右邊是子元素樣式（黃色部分）,可以看出，子元素中的寬高計算是以父元素的content為基數的，即設定的父元素的寬高，不包含邊距和邊框。

接下來我們改一下，子元素新增屬性float: left，使元素脫離文件流。

css.content

然後我們發現，結果並沒有什麼改變（圖和上面一樣），可以得出結論，百分比計算寬高時與子元素是否在文件流無關。

2.然後來看計算內外邊距

這個在w3c裡面明確給出過，在計算內外邊距時，使用百分比計算，基數是父元素的寬度（檢視w3c）,不論是上下邊距還是左右邊距。之所以這樣設定是很好理解的，因為在寫css的過程中，我們一般不會給父元素新增設定高度，而是由子元素撐開。用css權威指南裡的話來說

我們認為，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），如果乙個元素的上下外邊距時父元素的height的百分數，就可能導致乙個無限迴圈，父元素的height會增加，以適應後代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加。

看例子：

改一下父元素的高度，令height: 100px

ok，子元素的位置並沒有改變。如果給子元素加浮動呢，效果還是一樣的，所以說百分值的計算與是否脫離文件流無關。邊距的百分比值計算都是基於父元素width的。

二、auto

1.寬高設定

auto也是比較常用的值，而且是寬高的預設值。

當寬度設為auto時，寬度設定為父元素的100%，但是子元素必須與父元素在同乙個層面上，即子元素不能脫離父元素所在的文件流。

如果高度設為auto，沒有效果。子元素的高度並不會變為父元素的100%

看例子：

沒問題，如果把height設定成auto

子元素沒有高度，所以並沒有顯示

2.在margin中的應用

auto咋margin中應用還是比較常見的。比如說常見的水平居中對齊就是把子元素的左右margin設定為auto來實現的。

看例子：

auto的值會把父元素剩餘空間均分，設定為左右margin

當然，上下margin設定為auto還是沒有效果的

auto無論是在寬度設定還是在左右margin設定上，子元素都要處於父元素所在的文件流的，否則沒有效果。這也是在設定寬度時auto與100%的區別。