CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

  1. <style>
  2. #overflowTest {
  3. background: #4CAF50;
  4. color: white;
  5. padding: 15px;
  6. width: 80%;
  7. height: 100px;
  8. overflow: scroll;
  9. border: 1px solid #ccc;
  10. }
  11. </style>
  12. <div id="overflowTest">
  13. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  14. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  15. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  16. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  17. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  18. <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
  19. </div>

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值:

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

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

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

overflow: visible

默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:

代码演示:

  1. <style>
  2. div.visible {
  3. padding: 4px;
  4. background-color: #eee;
  5. width: 200px;
  6. height: 100px;
  7. overflow: visible;
  8. xborder: 1px dotted red;
  9. }
  10. </style>
  11. <div class="visible">
  12. <p>这里的文本内容会溢出元素框。</p>
  13. <p>这里的文本内容会溢出元素框。</p>
  14. <p>这里的文本内容会溢出元素框。</p>
  15. <p>这里的文本内容会溢出元素框。</p>
  16. <p>这里的文本内容会溢出元素框。</p>
  17. </div>

效果演示:

教你玩转CSS Overflow的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. 教你玩转CSS 居中

    1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分 ...

  3. monyer教你玩电脑——CSS、HTML、JS、XML的关系

    首先Monyer还是有必要提一句:这是一篇低中等难度的文章.如果你是高手或被认为是高手,那么请pass掉这篇文章:如果你是新手,甚至不知道什么是css(譬如百度模版)等,那么请pass掉这篇文章.谢谢 ...

  4. 教你玩转CSS border(边框)

    边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html ...

  5. 教你玩转CSS 伪元素

    一.CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: ...

  6. 手把手教你玩转 CSS3 3D 技术

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3 ...

  7. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  8. 手把手教你玩转SOCKET模型之重叠I/O篇(下)

    四.     实现重叠模型的步骤 作 了这么多的准备工作,费了这么多的笔墨,我们终于可以开始着手编码了.其实慢慢的你就会明白,要想透析重叠结构的内部原理也许是要费点功夫,但是只是学会 如何来使用它,却 ...

  9. 转:CSS Overflow 属性

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

随机推荐

  1. Centos7部署FytSoa项目至Docker——第三步:部署程序

    FytSoa项目地址:https://gitee.com/feiyit/FytSoaCms 部署完成地址:http://82.156.127.60:8000/ 我买的是一年99标准型SA2云服务器 购 ...

  2. Java面试(解答题二)

    1.一个用户具有多个角色,请查询出该表中具有该用户的所有角色的其他用户.备注:用户表:tb,角色字段为role,主键为id.请写出sql语句. 解答: 2.概述MVC体系结构 解答: MVC包括三类对 ...

  3. Java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json

    对象转换为Json 对象bean转换为Json List集合转换为Json 对象数组转换为Json Map集合转换为Json Set集合转为Json 字符串转换为Json 把Java对常用的一些数据转 ...

  4. java生成Https证书,及证书导入的步骤和过程

    以下是相关的Tomcat,JDK和Windows环境: Tomcat版本:tomcat-7.0.55 JDK版本: jdk1.6.0 目录所在的位置: Serve的目录:D:\server\tomca ...

  5. PHP-电脑搭建服务器

    PHP-电脑搭建服务器 一 材料 花生壳   php   mysql    apache(我使用的是phpstudy) 二 实现 (一)phpstudy安装 (二)花生壳安装及认证 (二)相关设置 1 ...

  6. Windows下使用poetry和pyproject.toml

    0. 题引 为什么要使用poetry? 因为想使用pyproject.toml,并通过pyproject.toml进行依赖包管理,目前pip还不支持,所以poetry是首选 为什么要使用pyproje ...

  7. k倍区间(解题报告)前缀和简单应用

    测评地址 问题 1882: [蓝桥杯][2017年第八届真题]k倍区间 时间限制: 1Sec 内存限制: 128MB 提交: 351 解决: 78 题目描述 给定一个长度为N的数列,A1, A2, . ...

  8. P2062 分队问题(DP)

    题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...

  9. uestc 1221 Ancient Go

    Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  Status Y ...

  10. Codeforces Round #656 (Div. 3) B. Restore the Permutation by Merger (模拟)

    题意:有两个完全相同的排列,将其中一个的元素按相对顺序插入另外一个排列中,给你操作完的排列,求原排列. 题解:感觉看看样例就能直接写了啊,直接遍历,用桶存数字个数,如果桶为空,直接输出即可. 代码: ...