小技巧處理div內(nèi)容溢出
更新時(shí)間：2014年05月16日 08:50:06 作者：
這篇文章主要介紹了小技巧處理div內(nèi)容溢出的方法,需要的朋友可以參考下
前幾天遇到一個(gè)問(wèn)題，代碼是這樣一個(gè)層次：
復(fù)制代碼 代碼如下:
<div class="province">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
我設(shè)置了div的邊框，
要想ul的內(nèi)容在邊框內(nèi)，
必須設(shè)置div高度。
但是，ul內(nèi)的內(nèi)容是變化的，內(nèi)容少的時(shí)候就不及div的高度。
不設(shè)高度的時(shí)候，ul的內(nèi)容就出現(xiàn)在邊框外了。
原來(lái)需要設(shè)置ul的邊框。想想也是，先設(shè)置與他關(guān)系最近的元素吧。
對(duì)于前端不是很專(zhuān)業(yè)的同僚來(lái)說(shuō)，寫(xiě)css樣式表還是有個(gè)規(guī)則比較好：
指定css樣式要有層次：如上例，定義li的樣式 .province ul li{...}
寫(xiě)樣式有個(gè)大致順序：容器大?。╳idth,height......）,容器位置（left,margin......）,容器文本（color......）,其他
這樣盡可能避免樣式覆蓋之類(lèi)的問(wèn)題。
相關(guān)文章
HTML相關(guān)知識(shí)點(diǎn)總結(jié)
本文詳細(xì)總結(jié)了HTML的相關(guān)知識(shí)點(diǎn)，有助于大家初步的學(xué)習(xí)或之后的復(fù)習(xí)，感興趣的小伙伴一起來(lái)看看吧，可以參考一下2021-08-08
XHTML標(biāo)準(zhǔn)語(yǔ)法...2006-09-09
這篇文章主要介紹了offsetTop用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
不同于傳統(tǒng)的PC Web或者是移動(dòng)WEB，在騰訊視頻客廳盒子端，接大屏顯示器下，許多能流暢運(yùn)行于PC端、移動(dòng)端的Web動(dòng)畫(huà)，受限于硬件水平，在盒子端的表現(xiàn)的往往不盡如人意。想要在盒子端跑出高性能接近60 FPS的流暢動(dòng)畫(huà)，就必須要刨根問(wèn)底，深挖每一處可以提升的方法。2021-05-05
怎么改善現(xiàn)有網(wǎng)站...2006-08-08
空間頁(yè)面CSS說(shuō)明...2006-09-09
li的簡(jiǎn)單應(yīng)用(將前面的點(diǎn)換成圖標(biāo))
li的簡(jiǎn)單應(yīng)用(將前面的點(diǎn)換成圖標(biāo))...2006-08-08
XHTML與HTML之間的區(qū)別...2006-09-09
關(guān)于在HTML網(wǎng)頁(yè)制作中如何添加背景圖片
這篇文章主要介紹了關(guān)于在網(wǎng)頁(yè)制作中如何添加背景圖片,我們通常使用background來(lái)添加網(wǎng)頁(yè)的背景圖,需要的朋友可以參考下2023-04-04
On having layout...2006-09-09