在做移动端开发的时候,遇到过这么个问题:要把图片进行放大,但有时候图片比较长,一个手机的版面看不了,于是需要用到overflow的属性,刚开始用了overflow-y:scroll,

于是问题来了,如果图片没有过长,也会出现滚动条,这样就没有达到预期的效果,于是换了一个属性overflow-y:auto;这样的话,当图片过长的时候才会出现滚动条,这样就可以达到预期的效果;

下面是一个总结:

参数是scroll时候,不管需不需要滚动条,都必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏,此属性在浮动属性中是屡试不爽呀。

关于css中overflow的一些理解的更多相关文章

  1. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

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

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

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

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

  4. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  5. CSS中overflow:hidden

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

  6. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  7. 对css中clear元素的理解

    clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...

  8. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  9. 转: CSS中overflow的用法

    Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...

随机推荐

  1. uva 10020 Minimal coverage

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  2. ALTIUM DESIGNER怎么定义差分对布线

    方法一:第一步是在原理图中声明,这样做的目的是为了让差分对布线器清楚哪两个网络是属于同一组差分对,设计编译器将查找格式为NETNAME_N和NETNAME_P(即以_N和_P为后缀)的两个同名网络.这 ...

  3. Boost 和 STL 相比有哪些优势和劣势?

    1. 在设计原则上,STL和Boost大体统一因为STL和Boost基本上都是标准委员会那批人在策划.审核和维护,所以口味上是相对接近的.但是因为Boost并不在标准中,或者说是下一代标准的试验场,所 ...

  4. Shell脚本常用命令简介

    格式化日期yyyy-mm-dd hh:mm:ss显示 date "+%Y-%m-%d %H:%M:%S" 将内容写入到新文件 echo "hello">a ...

  5. Xcode开启gcc/g++

    Apple announced Xcode 4.3 for OSX Lion and 4.4 for OSX Mountain Lion last week. The major difference ...

  6. lesson1:压测普通网页

    本文展示了利用jmeter来压力测试普通网页,具体步骤如下: 1.添加[线程组]“lesson1压测普通网页”,“线程数”设置为10:“循环测试“设置为50,如图所示: 2.添加一个"htt ...

  7. -bash: mysql: command not found 解决办法 (转)

    root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下 ...

  8. Android文字的复制和粘贴

    Android中提供了简单的额复制粘贴功能.代码很简单 复制文字的代码: ClipboardManager cbm= (ClipboardManager) MainActivity.this .get ...

  9. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Python购物车的实现课程

    需求: 1.用户输入工资收入 2.打印商品列表 3.用户选择商品,不断的加入购物车 4.检测用户余额,直接捐款,不足提示余额不足 5.允许主动退出,退出时,打印已购商品列表 重点方法: 打印列表下标的 ...