在做移动端开发的时候,遇到过这么个问题:要把图片进行放大,但有时候图片比较长,一个手机的版面看不了,于是需要用到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. 温习PYTHON语法

    看WEBPY的源码结构有点晕,原来很多语法结构都忘了,继承之些. 再看A BYTE OF PYTHON.慢慢补.. number = 23 guess = int(raw_input('Enter a ...

  2. Gridview中奇偶数行颜色设置

    在gridview中的RowDataBound事件里面写 switch (e.Row.RowType) {case DataControlRowType.Header: e.Row.BackColor ...

  3. 网络编程中几个地址结构与转换(in_addr,sockaddr,sockaddr_in,pcap_addr)

    man socket可以查看相关信息. socket头文件: #include <sys/types.h> /* See NOTES */ #include <sys/socket. ...

  4. 设计模式(十二): Flyweight享元模式 -- 结构型模式

    说明: 相对于其它模式,Flyweight模式在PHP实现似乎没有太大的意义,因为PHP的生命周期就在一个请求,请求执行完了,php占用的资源都被释放.我们只是为了学习而简单做了介绍. 1. 概述 面 ...

  5. 【转】Java 多线程(四) 多线程访问成员变量与局部变量

    原文网址:http://www.cnblogs.com/mengdd/archive/2013/02/16/2913659.html 先看一个程序例子: public class HelloThrea ...

  6. 运营总监招聘-e袋洗招聘-拉勾网

    运营总监招聘-e袋洗招聘-拉勾网 运营总监

  7. 形形色色的软件生命周期模型(4)——MSF、实用型

    摘要: 读大学时,我们曾经学习过不少软件生命周期模型,当时还不是很懂软件开发,你可能会觉得这些东西很新奇.在实际工作中,你会发现这些模型其实很难应用,与此同时你会接触到RUP.MSF等权威软件公司的生 ...

  8. JS(三)

    1.检查用户名中是否含有特殊字符: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. BootStrap--模态框中 上传图片

    问题:在模态框中添加图片并不会得到你上传图片的名称,无法存到数据 下面介绍两个方法,都是可以得到图片名称的. 第一种   前面如何加载模态框就不写了,上篇有写,这里只是为得到图片写的 //需要添加一个 ...

  10. 遍历Jenkins全部项目的配置

    随着任务的增多.须要一个脚本能够检查全部的jenkins project的配置.比方提取任务计划配置,开发人员信息等. 首先要能够得到全部的project名称. 能够通过REST API实现: htt ...