一、overflow的定义

　　overflow,音【əʊvəˈfləʊ】，义【溢出】，就像2.2米的人躺在1.8米的床上，腿得耷拉到床外一样。overflow 属性用于控制内容溢出容器时显示的方式

二、overflow的属性值

【1】visible，默认值（确切地说是绝大数元素的默认值，html、textarea的overflow默认值是auto），overflow:visible表示溢出的内容在容器之外可见

<style>

    div{width:300px;height:100px;border:3px solid red;overflow:visible;}

</style>

<div>

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：visible表示溢出部分可见。

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：visible表示溢出部分可见。

</div>

　　效果如下图：


    　　尽管容器外面的内容是可见的，但它不会把周围其它元素挤下去，但溢出的内容可能与周围其它元素重叠

【2】hidden，表示溢出的内容在容器之外被隐藏

<style>

    div{width:300px;height:100px;border:3px solid red;overflow:hidden;}

</style>

<body>

<div>

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。

</div>

hidden与visible相反，它会把超出容器部分隐藏掉，被隐藏的部分彻底看不到（除非查看源代码），overflow:hidden用的比较多，主要应用在清除浮动（下面要讲）等方面
  【3】scroll，表示容器出现滚动条（包括水平滚动条和垂直滚动条），溢出的内容可以通过滚动条查看

<style>

    div{width:300px;height:100px;border:3px solid red;overflow:scroll;}

</style>

<body>

<div>

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：scroll表示溢出部分通过滚动条查看，滚动条有点傻，不管是否需要，它都存在。

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：scroll表示溢出部分通过滚动条查看，滚动条有点傻，不管是否需要，它都存在。

</div>

scroll有点傻乎乎的，（水平方向、垂直方向）不管是否溢出，滚动条都会出现。正因为如此，overflow:scroll有点影响美观，所以用的不是很多。

【4】auto，表示容器出现滚动条（包括水平滚动条和垂直滚动条），溢出的内容可以通过滚动条查看

<style>

    div{width:300px;height:100px;border:3px solid red;overflow:auto;}

</style>

<body>

<div>

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：auto表示溢出部分通过滚动条查看，滚动条的出现更智能，按需出现。

    如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：auto表示溢出部分通过滚动条查看，滚动条的出现更智能，按需出现。

</div>


    auto，更智能，根据需要出现滚动条，水平方向或垂直方向哪个有溢出哪个方向才出现滚动条。正因为如此，overflow:auto相比scroll更美观，所以用的较多。

三、应用

　　当overflow设置为auto或scroll或hidden时可以触发BFC（只要不是overflow:visible，overflow的其它属性都能触发BFC），使得overflow可以实现一些相关应用。（关于BFC，简单地说就是自成系统，与系统外彼此互不干扰，详细内容读者可以搜索相关资料，此处不赘述）

【1】清除浮动

<style>

    img{float:left;}

    .box{background:lightblue;overflow:hidden;}

</style>

<body>

    <div class="box">

        <img src="img/guanggao.jpg">

    </div>

</body>

　　

【2】避免margin穿透

<style>

    img{display:block;}

    .box{background:lightblue;overflow:hidden;}

</style>

<body>

    <div class="box">

        <img src="img/guanggao.jpg">

    </div>

</body>


 【3】两栏自适应布局

<style>

    .left{float:left;margin-right:30px;}

    .right{background-color:lightgreen;overflow:hidden;}

    p{background-color:olive;}

</style>

<body>

        <div class="left">

            <img src="img/guanggao.jpg">

        </div>

        <div class="right">

            <p>abc</p>

            <p>bcd</p>

            <p>cde</p>

            <p>def</p>

            <p>efg</p>

            <p>fgh</p>

            <p>ghi</p>

        </div>

</body>


 【4】选项卡（锚点）

<style>

    .box{

        width:300px;

        height:300px;

        background:lightblue;

        overflow:hidden;

    }

    .list{

        width:300px;

        height:300px;

        color:red;

        text-align:center;

        line-height:300px;

    }

    .link{

        width:300px;

        margin-top:50px;

    }

    .click{

        padding:5px 10px;

        border:3px solid #ccc;

    }

</style>

<body>

    <div class="box">

        <div class="list" id="one">1</div>

        <div class="list" id="two">2</div>

        <div class="list" id="three">3</div>

        <div class="list" id="four">4</div>

    </div>

    <div class="link">

        <a class="click" href="#one">1</a>

        <a class="click" href="#two">2</a>

        <a class="click" href="#three">3</a>

        <a class="click" href="#four">4</a>

    </div>

</body>

轻轻松松学CSS:overflow的更多相关文章

  1. 轻轻松松学CSS:媒体查询

    轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...

  2. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  3. 轻轻松松学CSS：position

    position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...

  4. 轻轻松松学CSS：float

    float属性,会使元素向左或向右移动,其周围的元素也会重新排列.float不仅自己飘忽不定,还对周围元素有影响,这种影响力不容小觑.他捉摸不定(浮动规律不好把握),他干涉他国内政(对周围元素有影响) ...

  5. 轻轻松松学CSS:background

    background是复合属性,它可以分解为8个属性,其中5个属于CSS,另外3个属于CSS3一.CSS    1.background-color:背景色    2.background-image ...

  6. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  7. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  8. CSS——overflow的参数以及使用

    学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

  9. 教你玩转CSS Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

随机推荐

  1. python3在科学计算中的三种常用数据结构

    在科学研究中,数据运算是必不可少的,下面介绍python语言在科学计算中常用的数据结构和运算函数. 主要数据结构: (1)列表,用中括号表示,元素之间逗号分隔,每个元素可以是数字,字符,也可以是列表, ...

  2. 操作系统-I/O（1）设备控制器

    I/O设备通常是物理上相互独立的设备,它们一般通过通信总线(电缆)与I/O控制器连接. 例如,图中IDE接口是通信总线而非I/O总线. I/O控制器(I/O接口)在扩展卡或者南桥芯片内,通过I/O总线 ...

  3. HYSBZ - 2243 树链剖分 + 线段树 处理树上颜色段数

    用线段树处理颜色段数 记录区间内的颜色段数,区间右端点的颜色,区间右端点的颜色. int tr[maxn<<2], lc[maxn<<2], rc[maxn<<2] ...

  4. 使用PowerShell连接Ubuntu

    Ubuntu安装PowerShell Ubuntu安装PowerShell帮助文档 # Download the Microsoft repository GPG keys wget -q https ...

  5. Oracle - Flashback standby after resetlogs on primary

    一.概述 本文将给大家介绍主库使用rman做不完全恢复后,备库如何通过flashback,继续同步 二.正式实验 本次实验采用的是oracle 11g 单实例 + oracle 11g 单实例dg 1 ...

  6. Hello-Annie

    Annie theme Annie是一个简单的Hexo博客主题,如果你喜欢散文.诗歌.小说......那么它可能合你心意! ☞预览-1,☞预览-2 Features 文艺.优雅.简洁的博客主题 页头随 ...

  7. wordpress个人常用标签调用

    wordpress常见标签调用,老是容易忘记,又要找半天,干脆搬到网站上. <?php bloginfo('name');?>网站名称 url <?php echo home_url ...

  8. python+opencv 打开网络摄像头

    python+opencv 打开网络摄像头(手机)(转) #以下是最常用的读取视频流的方法import cv2url = 'rtsp://admin:admin@192.169.5.2:554/'#根 ...

  9. [PyTorch 学习笔记] 3.3 池化层、线性层和激活函数层

    本章代码:https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson3/nn_layers_others.py 这篇文章主要介绍 ...

  10. 一张图对比React、Angular、Vue.js

    文章原文地址:https://baijiahao.baidu.com/s?id=1609374985643812253&wfr=spider&for=pc