zoukankan      html  css  js  c++  java
  • 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; 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绝对定位

  • 相关阅读:
    1-1圆柱体的表面积
    vue的重定向和404
    新特性
    vue的一些概念
    关于ES6包的导出和导入
    vue-父组件和子组件的交互
    vue-组件
    vue---指令
    angular基础--指令2
    angular基础
  • 原文地址:https://www.cnblogs.com/yimi8426/p/6020212.html
Copyright © 2011-2022 走看看