overflow应用场景
overflow属性可以设置的值有5种:
(1)visible 默认值,内容不会裁剪,呈现在元素框之外;
(2)hidden 内容会被裁剪,并且子元素内容是不可见的;
(3)scroll 内容会被裁剪,但溢出的内容可以拖动浏览器自带的滚动条,查看内容;
(4)auto 如果内容被裁剪,那么溢出的内容也是拖动移动浏览器自带的滚动条,查看内容;
(5)inherit 继承父元素的overflow属性的值。
在实际运用中,除了hidden的应用比较多而灵活,其他几个还是很好理解和运用的。所以,这里着重归纳了hidden的用法。
(1)清除浮动
<div class="wrap">
<p>test of css</p>
</div>
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
(2)阻止边距外折叠
<div class="wrap">
<p>test of css</p>
</div>
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
(3)在IE-6,解决定义1px高的块元素
<div class="line"></div>
.line {height: 1px;overflow: hidden;}
(4)创建两栏布局
<div class="left"></div>
<div class="right"></div>
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
以上这4种还是比较常用的。但是在做项目的时候,发现了一个问题:父元素是必须overflow:hidden的,大多数情况下,其子元素是内容超出会被截掉,如图:
显然,这是一个bug。其解决方案:
将需要overflow:hidden和父元素的高度保持一致,不可以出现padding/margin边距值。
此外,有2种情况设置overflow:hidden时,内容是不会被裁剪:
1.有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;
2.内部溢出的元素是通过position:absolute绝对定位
overflow应用场景的更多相关文章
- overflow遭遇场景
没有设置高度而由内容撑高的子div在遇到固定高度的父div,想做一个离上边缘有间距的效果,给padding-top会同时撑大父div,给margin-top会把父div拉下来,这时候的子div像是紧紧 ...
- 前端之CSS(二)
一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...
- Python之路【第十一篇续】前端之CSS补充
CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...
- 初识CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
- 前端 css续
CSS选择器 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,找到所有的标签应用以下样式 ...
- 【转载】C# 中的委托和事件(详解)
<div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...
- overflow:hiddden与绝对定位的应用场景的事例
做一个点击查看显示详细信息的效果. 说一下问题描述,最外面的父元素overflow-parent设置了overflow:hidden, 然后子元素overflow-child没有设置overflow, ...
- tcp_tw_reuse、tcp_tw_recycle 使用场景及注意事项
linux TIME_WAIT 相关参数: net.ipv4.tcp_tw_reuse = 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.i ...
- -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)
本章主要做了下面的工作 1 生成一个简单的场景,该场景的物体只有平面和坐标轴 2 在第一个demo的基础上添加光源和方块物体,并生成阴影 3 在第二个demo的基础上,增加动画,使得方块进行旋转 4 ...
随机推荐
- XML转换成数组方法
<?php function xmlToArray2($xml) { // 将XML转为array $array_data = json_decode(json_encode(simplexml ...
- wpf的MVVM框架
http://www.cnblogs.com/KnightsWarrior/archive/2010/11/01/1866641.html 框架名字的介绍在 文章的后面
- python3----模块(序列化(json&pickle)+XML+requests)
一.序列化模块 Python中用于序列化的两个模块: json 跨平台跨语言的数据传输格式,用于[字符串]和 [python基本数据类型] 间进行转换 pickle python内置的数据 ...
- Django admin 的 9 个技巧
Tip 1:Django admin 后台不限于用 Django 开发的网站 虽然 Django admin 管理界面可以非常友好的用在 Django 项目的其它部分,它同样可以很容易用于其它像传统的 ...
- iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码
开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...
- iOS开源库–最全的整理
本文转载至 http://www.code4blog.com/archives/505 youtube下载神器:https://github.com/rg3/youtube-dl我擦咧vim插件:ht ...
- Android实例-退出程序
Android实例-退出程序 http://www.cnblogs.com/FKdelphi unit Unit1; interface uses System.SysUtils, System.Ty ...
- 通用且常用的Java正则匹配工具,用以检查邮箱名、电话号码、用户密码、邮政编码等合法性
一个通用且常用的Java正则匹配工具,用以检查邮箱名.电话号码.用户密码.邮政编码等合法性. import java.util.regex.Matcher; import java.util.rege ...
- 延迟任务和循环任务ScheduledExecutorService
public class ScheduledThreadPool { public static ScheduledExecutorService scheduledThreadPool = Exec ...
- reg_action
function check_email($win) { $win = trim($win); $reg = '/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ...