• overflow


    overflow

    一、总结

    一句话总结:

    overflow是用来操作box中溢出的内容的,overflow常用属性值有四个:visible(默认值)、hidden、scroll、auto(最常用);除默认值visible之外,其它都触发bfa

    二、overflow

    转自或参考:overflow
    https://www.cnblogs.com/Simple-and-complex/p/10755701.html

    overflow的用法还是比较灵活, 也是使用比较频繁的css属性, 在多次使用之后有了心得, 记录一下。

    overflow的属性

    visible    默认值。内容不会被修剪,会呈现在元素框之外。
    hidden   内容会被修剪,并且其余内容是不可见的。
    scroll   内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto       如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit    规定应该从父元素继承 overflow 属性的值。

    visible:一般用于当某元素被设置overflow的其他属性, 需要动态去掉的时候使用

    hidden:需要隐藏、裁剪一个元素的时候使用。 也可用于清除边距重叠,比如:

    <div style="margin: 100px 0;background: #ff0;">
    	<div style="margin: 100px 0;background: #f0f">
    		div二
    	</div>
        div一
    </div>

      上面的两个div设置了上下边距各100px,我们期望的是div一上边距100px,div二距里div一的上边距100px。

      实际上只有div一和div二的上边距重叠100px

    上下元素的margin会发生重叠,重叠后取最大的margin,很多时候这不是我们想要的,overflow:hidden就派上用场了, 使用这个属性就可以清除重叠。

     如下图,这是一个简单的用法。

    我们常使用的  一段文字超出显示省略号, 也是通过hidden这个属性来实现的, 比如:

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
    

      

    scroll:元素显示滚动条, 以查看元素的全貌

    auto:元素自适应显示

    auto和scroll在内容超出元素的时候都可以通过滚动条来查看内容的全貌,不过auto比scroll更美观。

    scroll无论是否超出元素, 元素都将显示滚动条

    auto在内容没有超出元素的时候是不存在滚动条的,只有在超出的时候才显示

    inherit:元素继承父级属性

    父级的overflow是什么属性,该元素就是什么属性。

    overflow样式属性比较常用, 在某些地方灵活使用可以少些代码,提高项目的性能

     
  • 相关阅读:
    windows10 中 svn 代码统计工具 StatSVN 使用详解
    Windows 10 安装 JDK14 Java 环境,没有 jre 包
    GET和POST两种基本请求方法的区别
    图解HTTP学习笔记(一)WEB基础
    【LinuxShell】cp 用法详解
    博客陆续迁移中...
    显示git忽略文件
    字符串遍历
    SDWebImage源码分析(二)
    其他
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12216277.html
Copyright © 2020-2023  润新知