overflow:hidden

列出我在项目中,运用到此属性的例子:

(1)暴力清除浮动

<style type="text/css">
.wrap {overflow: hidden;zoom:;background-color: #ccc;}
.wrap p {float: left;}
</style>
<div class="wrap">
<p>test of css</p>
</div>

(2)阻止边距外折叠

<style type="text/css">
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:;background-color: #ccc;}
.wrap p {margin-top: 20px;}
</style> <div class="wrap">
<p>test of css</p>
</div>

(3)在IE-6,解决定义1px高的块元素

<style type="text/css">
.line {height: 1px;background-color: #ccc;overflow: hidden;}
</style>

<div class="line"></div>

(4)创建两栏布局

<style type="text/css">
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:;background-color: #ccc;}
</style> <div class="left"></div>
<div class="right"></div>

对CSS了解-overflow:hidden的更多相关文章

  1. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  2. 转:css中overflow:hidden 不起作用了吗?

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  3. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  4. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  5. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  6. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

  7. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

  8. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  9. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

随机推荐

  1. lua53编译

    #下载lua包lua-5.3.5 #vs2017新建个空工程,删除lua.c,luac,c,设置配置类型 动态库.dll #编译完成

  2. 面试常见的selenium问题

    1.如何切换iframe 问题:如果你在一个default content中查找一个在iframe中的元素,那肯定是找不到的.反之你在一个iframe中查找另一个iframe元素或default co ...

  3. python collection 和 heapq 模块使用说明

    一 :集合库collection python 拥有一些内置的数据类型,collections模块提供啦几个额外的数据类型: 1,namedtuple   生成可以使用名字来访问元素内容的tuple子 ...

  4. 前端基础-css(1)

    一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面 ...

  5. Nothing is impossible

    题记: <你凭什么上北大>--贺舒婷.依稀记得这篇文章是我高二的时候在<青年文摘>读到的,从此她就成了我为之奋斗的动力.北大,也是我梦中的学府,虽然自己也曾刻苦过,但是还是没有 ...

  6. 转:用unix socket加速php-fpm、mysql、redis的连接

    图虫的服务器长期是单机运行.估计除了mysql之外,php-fpm和redis还可以在单机上共存很长时间.(多说服务器早就达成了单机每日2000万+动态请求,所以我对单机搞定图虫的大流量非常乐观) 如 ...

  7. python全栈开发从入门到放弃之字符编码

    一 了解字符编码的知识储备   1. 计算机基础知识(三幅图)       2. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中 ...

  8. Django基础一

    Django基础一 Web框架本质 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演 ...

  9. Linux Shell编程第5章——文件的排序、合并和分割

    目录 sort命令 sort命令的基本用法 uniq命令 join命令 cut命令 paste命令 split命令 tr命令 tar命令 sort命令 sort命令是Linux系统一种排序工具,它将输 ...

  10. POJ - 3662 Telephone Lines (Dijkstra+二分)

    题意:一张带权无向图中,有K条边可以免费修建.现在要修建一条从点1到点N的路,费用是除掉免费的K条边外,权值最大的那条边的值,求最小花费. 分析:假设存在一个临界值X,小于X的边全部免费,那么此时由大 ...