CSS 的overflow:hidden 属性详细解释
2016-01-13 19:45
573 查看
这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验
#box{
width:500px;
background:#000;
height:500px;
}
#content {
float:left;
width:600px;
height:600px;
background:red;
}
给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出,给box加上这个属性后,我们的content 的宽高自动的被隐藏掉了。另外,我们再做一个试验,将box这个div的高度值删除后,我们发现,box的高度自动的被content 这个div的高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当content
这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了box这个div,也就是说,此时的content 的宽高是多少,对于已经脱离了的box来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候,content
这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content 这个div的高度是多少,box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!
这样的主要功能是使外面的宽高自适应里面的宽高!
相关文章推荐
- css3 背景图片 background-size
- css3溢出文本属性------text-overflow
- 让IE6支持兼容min-width、max-width CSS样式属性的方法
- div+css的绝对定位
- 如何获取内联样式的width值
- css中div高度自适应
- CSS学习笔记
- CSS中的三种基础选择器,
- Css中控制当鼠标滑过<li>元素时,显示它里面的<ul>元素
- 彻底弄懂css中单位px和em,rem的区别
- CSS中margin和padding的区别
- CSS3新增样式大解析:[8]animation之元素动画
- CSS绘制三角形
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
- 表单标签动画(CSS)
- CSS+DIV之强化background属性
- CSS中强大的EM
- CSS值得关注的那些事?
- CSS值得关注的那些事?
- css3 中的filter使用