一：什么是overflow

在CSS中，overflow是“溢出”的意思，该属性规定当内容溢出元素框时发生的事情，设置内容是否会被修剪，溢出部分是否会被隐藏；例如当属性值设置为“visible”则内容不会被修剪，为“hidden”则内容会被修剪并且其余内容是不可见的

1.1 overflow的属性

overflow属性支持4个属性，可设置当内容溢出元素框时的4种处理方式：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

二：实例分析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div.ex1 {
                background-color: lightblue;
               width: 150px;
                height: 110px;
                overflow: scroll;
            }
            div.ex2 {
               background-color: lightblue;
                width: 150px;
                height: 110px;
                overflow: hidden;
            }

div.ex3 {
                background-color: lightblue;
               width: 150px;
                height: 110px;
                overflow: auto;
            }

div.ex4 {
                background-color: lightblue;
                width: 150px;
                height: 110px;
                overflow: visible;
            }
        </style>
    </head>
    <body>
        <h1>overflow 属性</h1>
        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

        <h2>overflow: scroll:</h2>
        <div class="ex1">测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>

<h2>overflow: hidden:</h2>
        <div class="ex2">测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>

       <h2>overflow: auto:</h2>
        <div class="ex3">测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>

       <h2>overflow: visible (默认):</h2>
        <div class="ex4">测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>

</body>

</html>

结果分析：

1：scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。显示上下的滚动条

2：hidden 超出部分被修剪不显示

3：auto 自动超出部分修剪浏览器会显示滚动条以便查看其余的内容。

4：visible 默认值。内容不会被修剪，超出部分会呈现在元素框之外。

overflow属性（溢出）详解相关推荐

CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
Python|线程和进程|阻塞|非阻塞|同步|异步|生成器和协程|资源竞争|进程间通信|aiohttp库|daemon属性值详解|语言基础50课：学习（11）
文章目录系列目录原项目地址第34课:Python中的并发编程-1 线程和进程多线程编程使用 Thread 类创建线程对象继承 Thread 类自定义线程使用线程池守护线程资源竞争 G ...
Java内存溢出详解之Tomcat配置
Java内存溢出详解转自:http://elf8848.iteye.com/blog/378805 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError ...
Java内存溢出详解
Java内存溢出详解一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出 JVM在 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
tomcat java内存_[Tomcat]Java内存溢出详解Tomcat内存设置
Java内存溢出详解一.常见的Java内存溢出有以下三种: 1.java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出 JVM在启 ...
文件的复制、移动、压缩等对SELinux属性关系详解
文件的复制.移动.压缩等对SELinux属性关系详解 1.临时修改文件的类型属性文件的类型属性不正确是常见的SELinux拒绝访问的主要原因 1)修改文件的SELinux属性: [root@loca ...
java8 方法引用详解_Java8中如何通过方法引用获取属性名详解
前言在我们开发过程中常常有一个需求,就是要知道实体类中Getter方法对应的属性名称(Field Name),例如实体类属性到数据库字段的映射,我们常常是硬编码指定属性名,这种硬编码有两个缺点. ...
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
css动画定义,css3的动画(animation)属性的详解（附代码）
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...

overflow属性（溢出）详解

一：什么是overflow

1.1 overflow的属性

二：实例分析

overflow属性（溢出）详解相关推荐

最新文章

热门文章