一、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. Linux环境下安装MySQL数据库

    Linux安装mysql服务分两种安装方法: (1).源码安装,优点是安装包比较小,只有十多M,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错: (2).使用官方编译好的二进制文件安装,优 ...

  2. 国际象棋棋盘输出-PHP代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python numpy常用的数学和统计函数

    numpy模块的核心就是基于数组的运算,相比于列表和其他数据结构,数组的运算效率是最高的.在统计分析和挖掘过程中,经常会使用到numpy模块的函数,以下是常用的数学函数和统计函数: 常数p就是圆周率  ...

  4. MPI自定义数据类型

    自定义数据类型 1.数据类型辅助函数 MPI_Type_commit int MPI_Type_commit( MPI_Datatype *datatype ); 在通信中使用数据类型对象之前,必须提 ...

  5. el-dialog“闪动”解决办法

    问题描述:el-dialog关闭的时候总是出现两次弹窗 解决思路:既然是el-dialog产生的那就直接杀掉el-dialog 代码实践:在el-dialog上添加上一个v-if,值就是用闭窗的值,促 ...

  6. 洛谷 P4343 [SHOI2015]自动刷题机

    思路 二分答案 显然的二分答案,但是因为二分判定条件 \(\text{wa}\) 了好几遍-- 可以发现,\(n\) 越大,\(k\) 就越小,所以答案是有单调性的,因此可以用两个二分,一次求最大值, ...

  7. 详细分析栈和队列的数据结构的实现过程（Java 实现）

    目录 栈和队列的数据结构的实现过程(Java 实现) 栈的数据结构的实现 栈的基础知识回顾 栈的常见应用 基于数组的栈的实现 具体代码设计 基于数组的栈简单的时间复杂度分析 关于栈的一个算法应用:括号 ...

  8. 记录一次mybatis缓存和事务传播行为导致ut挂的排查过程

    起因 rhea项目有两个ut一直都是挂的,之前也经过几个同事排查过,但是都没有找到解决办法,慢慢的这个问题就搁置了.因为之前负责rhea项目的同事离职,我临时接手了这个项目,刚好最近来了一个新同事在做 ...

  9. 寻找链表的倒数第k个节点

    寻找链表的倒数第k个节点 题目:已知一个带有表头结点的单链表,节点结构为(data,next),假设该链表只给出了头指针list.在不改变链表的前提下,请设计一个尽可能高效的算法,查找链表中倒数第k个 ...

  10. Python 利用三个简易模块熟悉前后端交互流程

    准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...