也说css之overflow:细探之下有意想不到的结果
2016-11-5
滴滴出行·DDFE

作者:dolymood

overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究之后就会发现他还有很多小特性或者说意想不到的结果;

下面就介绍下(在浏览器环境下)关于 overflow 的小总结。

哪些元素上有效?

首先 overflow 是应用到哪些元素上有效的,任意元素?

当然不是,它只能应用于块容器上。

那什么是块容器呢?

简单来说:除了 table 和可替换(置换)元素之外的块级元素都是块容器元素;

但是反过来说块容器元素一定是块级元素的吗?

当然也是 NO ,这是因为对于非替换的 inline-block 元素和 table-cell 元素而言,他们是块容器元素但是却不是块级元素。

作用

overflow 属性指定了一个块容器元素在其内容溢出这个元素的时候,内容是否裁掉

overflow的值

可以取的值有:

visible(初始值) hiddenscrollautoinherit

下面分别介绍下他们的含义:

  • visible

    这个属性表明内容不会被裁剪,所以说他可能超出渲染,也是初始值。

  • hidden

    这个属性表明内容超出的部分需要裁剪掉

  • scroll

    这个属性表明超出内容不会裁剪掉,浏览器提供滚动机制来让用户看到超出内容,还有就是不管超出不超出他都是要显示的(也就是浏览器的滚动条背景的那个东东)。

  • auto

    如果超出的话,应该有滚动条

  • inherit

    继承自他的父级元素(或者祖先元素)。

其他“作用”

  • overflow 的值为非 visible 的时候可以生成新的 BFC (块级格式化上下文),常见的结果就是:消除浮动影响、左侧固定右侧自适应(不需要指定 margin-left )、margin 不再折叠等。

  • overflow:hidden 搭配 white-space:nowraptext-overflow:ellipsis实现...效果。

  • overflow:hidden 可以让 1pxscale(0.5) 这种)显示的更加精细。

  • overflow:hidden 可以解决移动端页面内容(一般文字内容相对多一点的时候效果更明显)会出现“进来左右方向缩小到一块”然后再变为正常布局的 bug ,这个 bug 会引起很明显的闪动效果。

疑问

在某些场景下就会遇到和上边所说的情况不一致的时候,下边来介绍下:

一个页面,什么样式都不设置,但是里边很多内容,此时应该是什么样呢?

首先,初始值是 visible 没错,也就是说所有元素的 overflow 的值都是 visible 的,也就是说没有元素设置 overflow:auto ,但是结果确是浏览器会出现滚动条;这是因为规范规定了在这种情况下浏览器需要表现的像是类似于给 viewport 的根元素设置了 overflow:auto 类似的效果。

magin折叠?考虑下边的页面:

overflow test

 

先来说理论上的效果应该是:我给 body 设置了 overflow:hidden ,也就意味着 body 元素会生成新的 BFC ,也就意味着此时 .content 的元素的 margin 上边界应该是在 body 元素的顶部开始计算的;但是实际的效果确是:

和设想的很大差异,这里就涉及到了一种特殊情况,那就是如果说 viewport 的根元素 html 的 overflow 的值是 visible 且有 body 元素的情况下,就需要将 body 元素的 overflow 设置的值应用到 viewport 上,而这个 body 元素的 overflow 属性的使用值就是 visible ;正式因为如此,才会出现上图的情况,看起来就像是 body 元素和 .content 元素的 margin 发生了折叠一样的效果。

小结

上边就是关于 overflow 的基础以及一些小特性细节,当然可能还有其他好多未知的“情况”有待发掘,欢迎广大同行来“喷-喷”更多的 overflow

转自http://gold.xitu.io/post/581dcefbda2f60005df93b54

css之overflow的更多相关文章

  1. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

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

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

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

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

  4. css 溢出overflow

    css 溢出overflow 当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象. 通常情况下我们可以通过overflow来控制这个属性. overflow语法定义 ...

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

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

  6. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  7. CSS 布局 - Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...

  8. 眼见为实 — CSS的overflow属性

    1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...

  9. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

随机推荐

  1. 【opencv】图片标注文字

    IplImage* pstImg; HI_CHAR as8Title[25];CvFont stTimeFont;//字体信息cvInitFont(&stTimeFont,CV_FONT_HE ...

  2. ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)

    在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 //  HBNavigationController.m // #import "HBNavigationCon ...

  3. MongoDB csv文件导入导出

    1.导出到csv文件: 2.从csv导入: 数据经过csv导出导入,有一个非常隐蔽的问题,编写代码时需要注意: 先导入一条数据: 其中Price是double类型: 然后我把该条记录导出到Demo.c ...

  4. iOS 十六进制和字符串转换

    NSString *dictString = [dict JSONFragment];//组合成的. dictString==={"content":"Sadgfdfg& ...

  5. REORG TABLESPACE on z/os

    这个困扰了我两天的问题终于解决了,在运行这个job时:总是提示 A REQUIRED DD CARD OR TEMPLATE IS MISSING NAME=SYSDISC A REQUIRED DD ...

  6. CLR via C#(16)--泛型

    泛型就像是一个模板,常常定义一些通用的算法,具体调用时再替换成实际的数据类型,提高了代码的可重用性. 一.初识泛型 1. 简单实例 以最常用的FCL中的泛型List<T >为例: stat ...

  7. Mongo DB Study: first face with mongo DB

    Mongo DB Study: first face with mongo DB 1.  study methods: 1.  Translate: I am the mongo DB organiz ...

  8. gdo图形引擎中的旋转角

    横滚角(Roll) bank.roll  绕y轴 z轴正向为起点逆时针方向:往左为正,往右为负,水平时为0:有效范围:-180度-180度 注:下图是从飞机的尾部-->头部方向观察所得 俯仰角( ...

  9. Oracle 【IT实验室】数据库备份与恢复之一:exp/imp(导出与导入&装库与卸库)

    1.1  基本命令 1.  获取帮助 $ exp help=y $ imp help=y     2.  三种工作方式 (1)交互式方式 $ exp        //  然后按提示输入所需要的参数 ...

  10. 3-1创建Sql Sever数据库登录名

    登录名:连接Sql Sever 服务器 数据库用户名: Sql Sever 的使用者 每个用来登录Sql Sever 的账户都是一个用户. 同一个数据库可以拥有多个用户,每一个用户也同时可以访问多个数 ...