在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%的區別。
談一談UVM中的p sequencer
我們先來看乙個簡單的例子 bird是乙個基類 class bird bit 3 0 src 0 bit 3 0 drc 1 virtual task exec task display in bird endtask endclass parr是乙個bird的擴充套件類 class parr ext...
談一談getchar EOF和Ctrl D
1 include int main printf end d n a return 0 下面是幾種不同情況下的輸出 1 直接按ctrl d後,getchar 返回 1,退出 2 輸入一串字元後,再按ctrl d 所有字元被從緩衝區讀出,與按回車不同的是,回車也會被送入緩衝,但ctrl d沒有在緩衝...
談一談C 的事件
c 中事件基於委託,要理解事件要先理解委託,如果覺得自己關於委託不是很了解可以看看我前面寫委託的文章 使用委託時,一般會出現兩種角色 廣播者 發布者 和訂閱者,這是乙個非常常見的模型 using system class program 定義 發布 委託 public delegate void p...