HTML overflow: hidden 属性详解

原文地址：https://www.cnblogs.com/socool-hu/p/5633110.html

本文是在原文讲解基础上附上新的测试示例解释：

首先看下布局。第一个div里面嵌套第二个div.并且外部div 宽高小于内部 div宽高。代码如下：

 <style>#wai{background: #000000;width:500px;height: 500px;}#nei{float: left;width: 600px;height: 600px;background-color:#F2dddddd ;line-height: 600px;text-align: center;}</style>
</head>
<body ><div id="wai" style="overflow: hidden" ><div  id="nei" >正中间位置</div></div></body>

效果如图：

我们发现外部 div被覆盖。内部div比外部大。重叠部分就是外部div的宽高。

第二步：代码上外部增加了

  style="overflow: hidden"  其它 不变 效果 如下：

我们发现内部div超过外部 div 的部分隐藏了。

第三步：

 <style>#wai{background: #000000;width:500px;}#nei{float: left;width: 600px;height: 600px;background-color:#F2dddddd ;line-height: 600px;text-align: center;}</style></head><body ><div id="wai"  style="overflow: hidden"><div  id="nei" >正中间位置</div></div></body>

在第二步基础上。。删除了外部 div 的高度。。效果如下：

我们发现外部的高度被内部 div的高度撑起来了

结论：

外部 div 如果没有设置高度。。那么添加了

style="overflow: hidden"

那么外部div会被内部div 撑起

2.如果外部div 如果有高度。。那么就会隐藏内部 div 超出部分

HTML overflow: hidden 属性详解相关推荐

overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
[转] http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c4224604142db ...
jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法各种选择器的 ...
HTML embed标签使用方法和属性详解
HTML embed标签使用方法和属性详解一.基本语法代码如下: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,Ne ...
【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...

HTML overflow: hidden 属性详解

HTML overflow: hidden 属性详解相关推荐

最新文章

热门文章