关闭→
当前位置:趣知常识网>游戏数码>互联网>HTML中overflow-hidden的基础用法

HTML中overflow-hidden的基础用法

趣知常识网 人气:3W

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张
TAG标签:#HTML #overflow #hidden #