CSS之overflow

原创 2018年04月17日 09:13:14

overflow属性规定当内容溢出元素框时发生的事情.
所有的主流浏览器都支持overflow属性

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

实例演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{

            width: 200px;
            height: 200px;
            background: darkorange;

            /* 隐藏溢出内容 属性内容会被修剪,其余内容不可见*/
              overflow: hidden;
            /* 滚动条显示溢出内容:内容会被修剪,但是浏览器会显示右边和下边滚动条来查看其余的内容*/
            overflow: scroll; 
         /* 自动处理溢出:如果内容被修改,但是浏览器会显示右边的滚动条来显示其余的内容*/
           overflow: auto;
        }
    </style>


</head>
<body>
<div class="div">
    测试overflow效果测试overflow效果测试overflow效果测试overflow效果测试overflow效果测试overflow效果
    测试overflow效果测试overflow效果测试overflow效果测试overflow效果测试overflow效果
    测试overflow效果测试overflow效果测试overflow效果测试overflow效果
    测试overflow效果测试overflow效果测试overflow效果测试overflow效果
    测试overflow效果测试overflow效果测试overflow效果

</div>
</body>
</html>

css overflow:hidden为什么会失效

现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?我们知道,overflow属性值有这几种: visible:声明内容不会被剪裁。比如...
  • qq_15253407
  • qq_15253407
  • 2016-02-17 21:41:58
  • 1366

css中overflow的那些坑

元素的overflow属性是用来规定当内容溢出元素框时发生的事情,设置单个方向的overflow-x和overflow-y同理,它有五个值,visible(默认),hidden,scroll,auto...
  • Letasian
  • Letasian
  • 2017-07-31 16:57:41
  • 1792

论css中如何挣脱overflow:hidden;的限制

前言 这个问题是在处理苏宁平台的官方旗舰店模板遇到的。苏宁限定的页面显示区域宽度为990px。模板可以自定义,但是嵌入的代码被包含在一个div里面。这个div被奇葩的设置了内嵌样式overflow...
  • dong123dddd
  • dong123dddd
  • 2015-05-04 16:48:00
  • 4589

css中overflow和position的搭配

背景 大数据控制平台查询结果的表格的表头需要做过滤功能,我的想法是在每一列的表头上加个过滤小图标,当点击它时弹出个相对右对齐的小框,框里有个输入框,一个过滤按钮,一个清空按钮。类似下图: ...
  • cangkukuaimanle
  • cangkukuaimanle
  • 2015-11-12 16:40:40
  • 2659

CSS布局--overflow:hidden的清除效果

CSS布局–overflow:hidden的清除效果来自《精通CSS》阅读的思考:原文使用两列的浮动布局,首先设置两列内容为float,并设置display:inline-block,以此防止IE中双...
  • sinat_31231955
  • sinat_31231955
  • 2017-04-12 11:30:52
  • 404

CSS-overflow特性及总结

1.      overflow-x与overflow-y 如果两值不同,其中一值为visible,另一值为 hidden、scroll、auto,则visible被重置为auto,自动重置。所以给一...
  • qiqingjin
  • qiqingjin
  • 2015-12-27 19:41:24
  • 839

css使用overflow属性控制滚动条的样式

overflow: auto; 在需要时内容会自动添加滚动条  overflow: scroll; 显示横、纵向滚动条  overflow-x: hidden; 不显示横向的滚动条  overf...
  • u012145816
  • u012145816
  • 2017-05-23 13:24:12
  • 4577

探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动

1、首先说一下overflow的定义:overflow属性规定当内容溢出元素框时发生的事情。2、overflow属性可能的值: 3、overflow:hidden的作用:1)、对超出尺寸进行裁切,也...
  • javaloveiphone
  • javaloveiphone
  • 2016-03-16 18:17:01
  • 2074

关于css的float,overflow及z-index属性

I.关于float 代码示例一如下: ========================================               float属性,overflow,z-...
  • u010661782
  • u010661782
  • 2015-10-10 10:58:45
  • 1337

CSS中"overflow:scroll"可不可以只上下滚动,左右不滚动

CSS中"overflow:scroll"默认是左右,上下都滚动 如何设置成:当长度超出DIV长度的时候,只有上下滚动,左右无论超出多长都不滚动,也不会出现下面的滚动杆? 如果左右没有超出...
  • shaobingj126
  • shaobingj126
  • 2013-10-12 11:10:56
  • 7554
收藏助手
不良信息举报
您举报文章:CSS之overflow
举报原因:
原因补充:

(最多只允许输入30个字)