CSS是網頁設計中最為常用的樣式表語言,其主要功能是美化網頁的顯示效果,其中設置寬高是其最基本的樣式屬性之一。
/*設置寬高的語法格式*/ selector{ width: value; height: value; }
在上述的語法格式中,selector表示的是元素選擇器,可以是html元素、class或id,在{}內分別設置寬和高的值,value可以是具體的像素px值,也可以是百分比。
寬度可以使用百分比來設置,如:
div{ width: 50%; }
上述代碼將會使div元素的寬度設置為其父元素寬度的50%。而高度只有在父元素的高度也已知的情況下,才能使用百分比設置,否則只能使用像素值。如下所示:
.parent{ height: 200px; } .child{ height: 50px; }
在上述的代碼中,child元素的高度可以使用像素值進行設置,如:
.child{ height: 30px; }
但是如果將其高度設置為父元素高度的50%:
.child{ height: 50%; }
由于.parent元素的高度已經被設置為200px,所以.child元素的高度就會等于100px。
需要注意的是,有時候在只設置寬度或高度時會出現一些問題。如果只設置寬度而不設置高度,那么元素的高度將會自適應其內容的高度;如果只設置高度而不設置寬度,那么元素的寬度將會自適應其父元素的寬度。
/*只設置寬度*/ div{ width: 200px; } /*只設置高度*/ div{ height: 100px; }
上述代碼中,div元素在只設置寬度時,其高度會根據其內容自適應。在只設置高度時,其寬度會根據其父元素的寬度自適應。
簡而言之,設置寬高是非常重要的樣式屬性,熟練掌握其語法格式以及使用場景將會使得設計工作更加便捷和快速。
下一篇php ide 下載