轻轻松松学CSS:overflow

一、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的更多相关文章

轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用下面实例在屏幕可视窗口尺寸大 ...
轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
轻轻松松学CSS：position
position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...
轻轻松松学CSS：float
float属性,会使元素向左或向右移动,其周围的元素也会重新排列.float不仅自己飘忽不定,还对周围元素有影响,这种影响力不容小觑.他捉摸不定(浮动规律不好把握),他干涉他国内政(对周围元素有影响) ...
轻轻松松学CSS:background
background是复合属性,它可以分解为8个属性,其中5个属于CSS,另外3个属于CSS3一.CSS 1.background-color:背景色 2.background-image ...
轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
CSS——overflow的参数以及使用
学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
教你玩转CSS Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

随机推荐

centos AAVMF_CODE.fd 文件下载
centos: yum install AAVMF -y ubuntu: apt-get install qemu-efi*
appium配置
前言最近报了个班,学习关于全栈自动化相关内容.学归学.培训就像敲门砖,领人入门,同时可以比较系统性的给学习到关于这块的基础知识(比较好的培训机构).其次想着总结一些培训知识和遇到的一些问题,以供自己 ...
javascript正则用法
一.元字符 . 匹配除了换行符以外的字符. \w 匹配字母或者数字或者下划线 \W 匹配不是字母.数字.下划线 \d 匹配数字,相当于[0-9] \D 匹配不是数字的字符 \s ...
广度优先搜索（BFS）解题总结
定义广度优先搜索算法(Breadth-First-Search),是一种图形搜索算法. 简单的说,BFS是从根节点开始,沿着树(图)的宽度遍历树(图)的节点. 如果所有节点均被访问,则算法中止. B ...
USB Key
随着互联网和电子商务的发展,USB Key作为网络用户身份识别和数据保护的“电子钥匙”,正在被越来越多的用户所认识和使用.本文对USB Key的产生和未来的发展趋势作了一个简单的介绍. 目前市场上见到 ...
02.Flink的单机wordcount、集群安装
一.单机安装 1.准备安装包将源码编译出的安装包拷贝出来(编译请参照上一篇01.Flink笔记-编译.部署)或者在Flink官网下载bin包 2.配置前置:jdk1.8+ 修改配置文件flink- ...
轮廓线DP
轮廓线DP 刚刚学了轮廓线DP,想了好久才懂. 我的理解就是用一条线的状态去更新另一条线的状态,然后将格子填满. 图中正方形即是要填东西(根据题意)的格子,红线的状态是由黑线转移过来的. ...
JetBrain破解
https://blog.csdn.net/u014044812/article/details/78727496 https://jetlicense.nss.im/ https://zhile.i ...
在Fragment 中拦截返回键
代码如下: class XXXFrgmt : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ...
12_进程,线程,协程,IO多路复用的区别
1.进程 1.进程可以使用计算机多核 2.进程是资源分配的单位 3.进程的创建要比线程消耗更多的资源效率很低 4.进程空间独立,数据安全性跟好操作有专门的进程间通信方式 5.一个进程可以包含多个线程, ...

轻轻松松学CSS:overflow

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

随机推荐

热门专题