HTML中overflow-hidden的基础用法

overflow:hidden的字面意思就是隐藏溢出，就是如果超出设定范围的内容将被隐藏，这是其一种用法。
overflow:hidden的另一种是清除浮动。

方法1:隐藏溢出

  • 01

    打开DW软件，新建html文件，然后建立代码如下： <div> <img src="img/picture_01.jpg" alt=""> </div> 即在div框中插入一张图片

  • 02

    对div进行修饰，对div设置的大小范围远远小于图片大小 div{width:100px;height:100px;border:solid 1px red;margin:0 auto;} 保存文件后，在浏览器预览效果，如图所示

  • 03

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

方法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>

  • 02

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

赞 (0)

相关推荐

  • java中的 if与if......else的基础用法

    java中的 if......else的基础用法 操作方法 01 方法1(if.....eise用法): if(条件语句){ //  条件为true时,才会执行该行语句 }else{ //  条件为f ...

  • CSS 的overflow:hidden 属性详细解释

    在开发网页时,我们经常要用到css样式,下面我们来讲一下overflow这个样式的用法. 操作方法 01 首先我们写一个div,div里就是一段文字. 02 然后写一些css样式,关键部分是指定div ...

  • excel中函数lookup查询函数用法详细步骤实例

    excel中lookup查找函数用法详细步骤实例，函数的工作原理是在第二个参数(区域，一般是一列)中查找第一个参数(一般为单元格值)，找到首个大于第一个参数时，函数返回找到的上方位置，对应的第三个参数 ...

  • 手机微信如何对朋友圈中动态在原基础上进行修改

    手机微信如何对朋友圈中动态在原基础上进行修改

    以前的朋友圈是不可以修改的,如果要修改需要将之前的删除并重新发布一条新的,今天小编跟大家分享下手机微信如何对朋友圈中动态在原基础上进行修改.具体如下:1. 首先我们在手机中打开微信.2. 进入主界面之 ...

  • excel中vlookup查找函数基本用法详细步骤实例

    excel中vlookup查找函数基本用法详细步骤实例 操作方法 01 如图所示在左边红框中是代码列 在右侧红框中  右侧框是火车站名和对应代码 我想通过查找中间框中的火车站名 在右侧的框中查找 然后 ...

  • excel中vba里cells的用法经验

    小编致力于为大家奉献最有效的,让大家能够解决掉问题,但是大家也都知道,每个人遇到的情况都是不一样的,大家在看小编的同时,除了跟随操作,也需要自己的思考,举一反三的解决问题,这样才会变得更加有内涵,成为 ...

  • excel中index嵌套match函数用法详细步骤实例

    excel中index嵌套match函数用法详细步骤实例,index函数的作用是在第一个参数(指定的区域引用),根据相对行号(第二个参数),相对列号(第三个参数),返回行列所确定的单元格内的值. ma ...

  • C/C++中switch选择语句的用法

    C/C++中switch选择语句的用法 操作方法 01 C/C++编程中switch用于多分支的选择语句,根据变量的不同值来进行相应的处理,形式如下: switch(变量){ case 值1: 语句; ...

  • Illustrator(AI)制图软件矢量绘图中的渐变网格基础及使用方法介绍

    本文介绍Illustrator渐变网格的一些基础概念、基本用法以及技巧。 Illustrator渐变网格的基础概念 看下图，Illustrator渐变网格物体中的这几条线叫网格线，网格线间相交的点叫网 ...