在編寫HTML網(wǎng)頁的時候,布局是非常重要的一部分。而很多初學(xué)者往往會在布局的時候設(shè)置一個固定的高度值,這是一種非常不良的習(xí)慣。
首先,固定高度值會使得網(wǎng)頁無法適應(yīng)不同的設(shè)備分辨率。比如手機(jī)屏幕的尺寸和分辨率與電腦屏幕是不同的,而設(shè)置一個固定高度值會導(dǎo)致在手機(jī)上看到的網(wǎng)頁非常不協(xié)調(diào),甚至?xí)霈F(xiàn)滾動條。這無疑會影響用戶體驗。
其次,固定高度值會使得網(wǎng)頁難以維護(hù)和修改。一旦要想改變布局,便需將網(wǎng)頁中所有的高度值都進(jìn)行修改,這不僅繁瑣而且容易出錯。
那么,不設(shè)置高度值應(yīng)該怎么做呢?
答案很簡單:使用CSS的浮動和盒子模型。利用浮動屬性可以使得元素排列在一行或一列,而盒子模型則可以對元素進(jìn)行自適應(yīng)的定位。
假設(shè)我們有兩個塊級元素,希望它們排列在網(wǎng)頁左右兩側(cè)。我們可以設(shè)置兩個div元素,并使用CSS中的float屬性使它們靠左和靠右:
<div style="float:left;width:50%"></div> <div style="float:right;width:50%"></div>
這樣我們就可以實現(xiàn)左右排列的效果。而且,使用浮動屬性的好處在于可以讓其他元素繞過它們而不影響網(wǎng)頁的整體布局。
總而言之,不設(shè)置高度值可以讓網(wǎng)頁更加靈活、易于維護(hù)和升級。希望大家在編寫網(wǎng)頁的時候能夠盡量避免使用固定高度的布局方法。