網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

HTML中overflow-hidden的基礎用法

欄目: 互聯網 / 發佈於: / 人氣:3.14W

overflow:hidden的字面意思就是隱藏溢出,就是如果超出設定範圍的內容將被隱藏,這是其一種用法。
overflow:hidden的另一種是清除浮動。

方法1:隱藏溢出

(01)打開DW軟件,新建html文件,然後建立代碼如下:<div><img src="img/picture_01.jpg" alt=""></div>即在div框中插入一張圖片

HTML中overflow-hidden的基礎用法

(02)對div進行修飾,對div設置的大小範圍遠遠小於圖片大小div{width:100px;height:100px;border:solid 1px red;margin:0 auto;}保存文件後,在瀏覽器預覽效果,如圖所示

HTML中overflow-hidden的基礎用法 第2張
HTML中overflow-hidden的基礎用法 第3張

(03)然後對div添加overflow:hidden;再預覽效果.可以看到只顯示限定的範圍。

HTML中overflow-hidden的基礎用法 第4張
HTML中overflow-hidden的基礎用法 第5張

方法2:清除浮動

(01)如圖在DW中建立屬性,ul裏面包含三張圖片,然後在ul下面再建立一張圖片,對li進行浮動後,就會對緊挨在後面的div圖片產生影響<style>ul{margin:0;padding:0;list-style:none;overflow:hidden;}li{float:left;margin:10px;}</style></head><body><ul><li><img src="img/picture_09.jpg" alt=""></li><li><img src="img/picture_10.jpg" alt=""></li><li><img src="img/picture_11.jpg" alt=""></li></ul><div><img src="img/picture_12.jpg" alt=""></div></body>

HTML中overflow-hidden的基礎用法 第6張
HTML中overflow-hidden的基礎用法 第7張

(02)然後在父集ul添加overflow:hidden;對其子集添加浮動清除效果後,就不會影響到後面的內容了。

HTML中overflow-hidden的基礎用法 第8張
HTML中overflow-hidden的基礎用法 第9張