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. XCTF-easydex

    前期工作 查壳,无.安装打开黑屏. 逆向分析 用jadx打开看看 什么都没有,但可以看一下AndroidManifest 可以看到这个是个纯C/C++写的,没有Java代码,是个NativeActiv ...

  2. 十三:SpringBoot-基于Yml配置方式,实现文件上传逻辑

    SpringBoot-基于Yml配置方式,实现文件上传逻辑 1.文件上传 2.搭建文件上传界面 2.1 引入页面模板Jar包 2.2 编写简单的上传页面 2.3 配置页面入口 3.SpringBoot ...

  3. ssh登陆时,参数直接加入密码

    参考:  [随笔]ssh登录时如何直接在参数中加入登录密码   安装 sshpass  

  4. shell(shell简介)

    1.shell 简介 Shell 是一个 C 语言编写的脚本语言,它是用户与 Linux 的桥梁,用户输入命令交给 Shell 处理,shell是一个命令解释器,是一个工具箱, Shell 将相应的操 ...

  5. kafka背着你做了什么?

    Kafka中有broker.主题.分区.副本等概念,底层有日志和日志分片. 我们先简单介绍一下这些概念,做个类比. broker可以简单理解为一台物理机,其实一台机器上可以有多个broker进程,但是 ...

  6. Kibana,Logstash 和 Cerebro 的安装运行

    公号:码农充电站pro 主页:https://codeshellme.github.io 1,安装 Kibana Kibana 用于数据可视化,我们可以进入到 Kibana 下载页面下载 Kibana ...

  7. P3384 [模板] 树链剖分

    #include <bits/stdc++.h> using namespace std; typedef long long ll; int n, m, rt, mod, cnt, to ...

  8. 神奇C语言的字串处理库函数

    头文件:#incldue<string.h> 定义:strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地 ...

  9. codeforces 632F. Magic Matrix (最小生成树)

    You're given a matrix A of size n × n. Let's call the matrix with nonnegative elements magic if it i ...

  10. 找新朋友 HDU - 1286 欧拉函数模板题

    题意: 求出来区间[1,n]内与n互质的数的数量 题解: 典型的欧拉函数应用,具体见这里:Relatives POJ - 2407 欧拉函数 代码: 1 #include<stdio.h> ...