前端学习 -- Css -- overflow
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：
可选值：
visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。
hidden, 溢出的内容，会被修剪，不会显示。
scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条。
auto，会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.visible {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: visible;
} .hidden {
width: 100px;
height: 500px;
background-color: red;
overflow: hidden;
} .scroll {
width: 100px;
height: 500px;
background-color: #bfa;
overflow: scroll;
} .auto {
width: 100px;
height: 500px;
background-color: red;
overflow: auto;
}
</style>
</head> <body> <div class="visible">
进能有益，纳说有补，人之所知也；或以不补而得佑，或以有益而获罪。且夏时炉以炙湿，冬时扇以火。世可希，主不可准也；说可转，能不可易也。世主好文，己为文则遇；主好武，己则不遇。主好辩，有口则遇；主不好辩，己则不遇。文主不好武，武主不好文；辩主不好行，行主不好辩。文与言，尚可暴习；行与能，不可卒成。学不宿习，无以明名。名不素著，无以遇主。仓猝之业，须臾之名，日力不足。不预闻，何以准主而纳其说，进身而托其能哉？昔周人有仕数不遇，年老白首，泣涕於涂者。人或问之：“何为泣乎？”对曰：“吾仕数不遇，自伤年老失时，是以泣也。”人曰：“仕奈何不一遇也？”对曰：“吾年少之时，学为文。文德成就，始欲仕宦，人君好用老。用老主亡，後主又用武，吾更为武。武节始就，武主又亡。少主始立，好用少年，吾年又老，是以未尝一遇。”仕宦有时，不可求也。夫希世准主，尚不可为，况节高志妙，不为利动，性定质成，不为主顾者乎？
</div>
<div class="hidden">
进能有益，纳说有补，人之所知也；或以不补而得佑，或以有益而获罪。且夏时炉以炙湿，冬时扇以火。世可希，主不可准也；说可转，能不可易也。世主好文，己为文则遇；主好武，己则不遇。主好辩，有口则遇；主不好辩，己则不遇。文主不好武，武主不好文；辩主不好行，行主不好辩。文与言，尚可暴习；行与能，不可卒成。学不宿习，无以明名。名不素著，无以遇主。仓猝之业，须臾之名，日力不足。不预闻，何以准主而纳其说，进身而托其能哉？昔周人有仕数不遇，年老白首，泣涕於涂者。人或问之：“何为泣乎？”对曰：“吾仕数不遇，自伤年老失时，是以泣也。”人曰：“仕奈何不一遇也？”对曰：“吾年少之时，学为文。文德成就，始欲仕宦，人君好用老。用老主亡，後主又用武，吾更为武。武节始就，武主又亡。少主始立，好用少年，吾年又老，是以未尝一遇。”仕宦有时，不可求也。夫希世准主，尚不可为，况节高志妙，不为利动，性定质成，不为主顾者乎？
</div>
<div class="scroll">
进能有益，纳说有补，人之所知也；或以不补而得佑，或以有益而获罪。且夏时炉以炙湿，冬时扇以火。世可希，主不可准也；说可转，能不可易也。世主好文，己为文则遇；主好武，己则不遇。主好辩，有口则遇；主不好辩，己则不遇。文主不好武，武主不好文；辩主不好行，行主不好辩。文与言，尚可暴习；行与能，不可卒成。学不宿习，无以明名。名不素著，无以遇主。仓猝之业，须臾之名，日力不足。不预闻，何以准主而纳其说，进身而托其能哉？昔周人有仕数不遇，年老白首，泣涕於涂者。人或问之：“何为泣乎？”对曰：“吾仕数不遇，自伤年老失时，是以泣也。”人曰：“仕奈何不一遇也？”对曰：“吾年少之时，学为文。文德成就，始欲仕宦，人君好用老。用老主亡，後主又用武，吾更为武。武节始就，武主又亡。少主始立，好用少年，吾年又老，是以未尝一遇。”仕宦有时，不可求也。夫希世准主，尚不可为，况节高志妙，不为利动，性定质成，不为主顾者乎？
</div>
<div class="auto">
进能有益，纳说有补，人之所知也；或以不补而得佑，或以有益而获罪。且夏时炉以炙湿，冬时扇以火。世可希，主不可准也；说可转，能不可易也。世主好文，己为文则遇；主好武，己则不遇。主好辩，有口则遇；主不好辩，己则不遇。文主不好武，武主不好文；辩主不好行，行主不好辩。文与言，尚可暴习；行与能，不可卒成。学不宿习，无以明名。名不素著，无以遇主。仓猝之业，须臾之名，日力不足。不预闻，何以准主而纳其说，进身而托其能哉？昔周人有仕数不遇，年老白首，泣涕於涂者。人或问之：“何为泣乎？”对曰：“吾仕数不遇，自伤年老失时，是以泣也。”人曰：“仕奈何不一遇也？”对曰：“吾年少之时，学为文。文德成就，始欲仕宦，人君好用老。用老主亡，後主又用武，吾更为武。武节始就，武主又亡。少主始立，好用少年，吾年又老，是以未尝一遇。”仕宦有时，不可求也。夫希世准主，尚不可为，况节高志妙，不为利动，性定质成，不为主顾者乎？</div> </body> </html>
注释下各种div就可以看到效果：
overflow: visible：
overflow: hidden：超出部分不会显示
overflow: scroll:可以滑动将内容全部显示
overflow: auto：看下效果：
可运行代码文件：
https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson18.html
前端学习 -- Css -- overflow的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 前端学习——css实用技术
一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
- Web前端学习——CSS
一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
- 前端知识点--CSS overflow 属性
问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- 前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
- 前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...
随机推荐
- 20155313 杨瀚 《网络对抗技术》实验一 PC平台逆向破解(5)M
exp1 PC平台逆向破解(5)M 一.实验内容 1.手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 2.利用foo函数的Bof漏洞,构造一个攻击输入字符串,覆盖返回地址,触发 ...
- 20155317王新玮《网络对抗技术》实验9 web安全基础实践
20155317王新玮<网络对抗技术>实验9 web安全基础实践 一.实验准备 1.0 实验目标和内容 Web前端HTML.能正常安装.启停Apache.理解HTML,理解表单,理解GET ...
- 20155331 丹增旦达 网络攻防 Exp2后门原理与实践
20155331 丹增旦达<网络攻防>Exp2后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启 ...
- 20155334 网络对抗PC平台逆向破解（二）
注入Shellcode并运行攻击 shellcode就是一段机器指令(code) 通常这段机器指令的目的是为获取一个交互式的shell(像linux的shell或类似windows下的cmd.exe) ...
- STM32一键下载电路设计原理
先放原理图(补充:图中的BOOT0通过10K的电阻接到地),再解释为什么这么设计: STM32启动方式:BOOT0和 BOOT1用于设置 STM32的启动方式 ,见下表: BOOT0=1,BOOT1= ...
- Redux系列01：从一个简单例子了解action、store、reducer
其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) ...
- python 连接 hive 的 HiveServer2 的配置坑
环境: hadoop 2.7.6 hive 2.3.4 Hive 的 thirft 启动: hadoop 单机或者集群需要: 启动 webhdfs 修改 hadoop 的代理用户 <proper ...
- java保留两位小数4种方法（转载）
喵喵最近经常遇到小数点保留的问题,转载一篇Java里面的几种小数点位数控制方法. 这是转载的原地址:https://www.cnblogs.com/chenrenshui/p/6128444.html ...
- CEPH FILESYSTEM
参考文档: CEPH FILESYSTEM:http://docs.ceph.com/docs/master/cephfs/ CephFS best practices:http://docs.cep ...
- Codeforces Round #550 (Div. 3) E. Median String （模拟）
Median String time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...