教你玩转CSS Overflow
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
- <style>
- #overflowTest {
- background: #4CAF50;
- color: white;
- padding: 15px;
- width: 80%;
- height: 100px;
- overflow: scroll;
- border: 1px solid #ccc;
- }
- </style>
- <div id="overflowTest">
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- </div>
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
值 | 描述 |
visible | 默认值,内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
inherit | 规则应该从父元素继承overflow属性的值 |
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
overflow: visible
默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:
代码演示:
- <style>
- div.visible {
- padding: 4px;
- background-color: #eee;
- width: 200px;
- height: 100px;
- overflow: visible;
- xborder: 1px dotted red;
- }
- </style>
- <div class="visible">
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- </div>
效果演示:
教你玩转CSS Overflow的更多相关文章
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- 教你玩转CSS 居中
1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分 ...
- monyer教你玩电脑——CSS、HTML、JS、XML的关系
首先Monyer还是有必要提一句:这是一篇低中等难度的文章.如果你是高手或被认为是高手,那么请pass掉这篇文章:如果你是新手,甚至不知道什么是css(譬如百度模版)等,那么请pass掉这篇文章.谢谢 ...
- 教你玩转CSS border(边框)
边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html ...
- 教你玩转CSS 伪元素
一.CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: ...
- 手把手教你玩转 CSS3 3D 技术
css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3 ...
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...
- 手把手教你玩转SOCKET模型之重叠I/O篇(下)
四. 实现重叠模型的步骤 作 了这么多的准备工作,费了这么多的笔墨,我们终于可以开始着手编码了.其实慢慢的你就会明白,要想透析重叠结构的内部原理也许是要费点功夫,但是只是学会 如何来使用它,却 ...
- 转:CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
随机推荐
- Centos7部署FytSoa项目至Docker——第三步:部署程序
FytSoa项目地址:https://gitee.com/feiyit/FytSoaCms 部署完成地址:http://82.156.127.60:8000/ 我买的是一年99标准型SA2云服务器 购 ...
- Java面试(解答题二)
1.一个用户具有多个角色,请查询出该表中具有该用户的所有角色的其他用户.备注:用户表:tb,角色字段为role,主键为id.请写出sql语句. 解答: 2.概述MVC体系结构 解答: MVC包括三类对 ...
- Java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json
对象转换为Json 对象bean转换为Json List集合转换为Json 对象数组转换为Json Map集合转换为Json Set集合转为Json 字符串转换为Json 把Java对常用的一些数据转 ...
- java生成Https证书,及证书导入的步骤和过程
以下是相关的Tomcat,JDK和Windows环境: Tomcat版本:tomcat-7.0.55 JDK版本: jdk1.6.0 目录所在的位置: Serve的目录:D:\server\tomca ...
- PHP-电脑搭建服务器
PHP-电脑搭建服务器 一 材料 花生壳 php mysql apache(我使用的是phpstudy) 二 实现 (一)phpstudy安装 (二)花生壳安装及认证 (二)相关设置 1 ...
- Windows下使用poetry和pyproject.toml
0. 题引 为什么要使用poetry? 因为想使用pyproject.toml,并通过pyproject.toml进行依赖包管理,目前pip还不支持,所以poetry是首选 为什么要使用pyproje ...
- k倍区间(解题报告)前缀和简单应用
测评地址 问题 1882: [蓝桥杯][2017年第八届真题]k倍区间 时间限制: 1Sec 内存限制: 128MB 提交: 351 解决: 78 题目描述 给定一个长度为N的数列,A1, A2, . ...
- P2062 分队问题(DP)
题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...
- uestc 1221 Ancient Go
Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit Status Y ...
- Codeforces Round #656 (Div. 3) B. Restore the Permutation by Merger (模拟)
题意:有两个完全相同的排列,将其中一个的元素按相对顺序插入另外一个排列中,给你操作完的排列,求原排列. 题解:感觉看看样例就能直接写了啊,直接遍历,用桶存数字个数,如果桶为空,直接输出即可. 代码: ...