HTML中overflow-hidden的基础用法

2025-11-18 00:12:20

1、打开DW软件，新建html文件，然后建立代码如下：

<div>

<久汽改img src="img/picture_01.jpg" alt="">

</div>

即在div框中插入一张图塑之片

HTML中overflow-hidden的基础用法

2、对div进行修饰，对川耻div设置的大小范围远远小于图片大小

div{width:100px;height:100px;border:solid 1px red;margin:0 auto;}

保存文件后，在浏览器预览效果，如图所示

HTML中overflow-hidden的基础用法

3、然后对div添加overflow:hidden;再预览效果.可以看到只显示限定的范围。

HTML中overflow-hidden的基础用法

1、如图在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>

</ul>

</body>

HTML中overflow-hidden的基础用法

2、然后在父集

ul添加overflow:hidden;对其子集添加浮动清除效果后，就不会影响到后面的内容了。

HTML中overflow-hidden的基础用法

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。