前端学习 -- 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 ...
随机推荐
- 20155338《网络对抗》Exp6 信息搜集与漏洞扫描
20155338<网络对抗>Exp6 信息搜集与漏洞扫描 实验过程 外围信息搜集 (1)whois域名注册信息查询 下面是搜索hao123.com得到的结果 下面这个也是同理 (2)nsl ...
- [BZOJ4379][POI2015]Modernizacja autostrady[树的直径+换根dp]
题意 给定一棵 \(n\) 个节点的树,可以断掉一条边再连接任意两个点,询问新构成的树的直径的最小和最大值. \(n\leq 5\times 10^5\) . 分析 记断掉一条边之后两棵树的直径为 \ ...
- Javascript如何实现GPU加速？
一.什么是Javascript实现GPU加速? CPU与GPU设计目标不同,导致它们之间内部结构差异很大.CPU需要应对通用场景,内部结构非常复杂.而GPU往往面向数据类型统一,且相互无依赖的计算.所 ...
- 软件工程第二次作业（One who wants to wear the crown, Bears the crown.）
小镓自述Eclipse使用及自动单元测试技术 因为本人对JAVA有一些兴趣,所以就决定用Eclipse来完成这次作业,从安装Eclipse到学习写代码,最后学会用Junit来进行单元测试.这段过程给我 ...
- SpringBoot日记——信息修改PUT篇
我们常用的功能,除了post和get,还有put和delete,这篇文章就介绍一下这个put的基本用法. 页面跳转和回显 1. 首先,我们之前的页面已经将添加和修改的按钮都做好了,那么如何实现这些按钮 ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- Category Theory: 01 One Structured Family of Structures
Category Theory: 01 One Structured Family of Structures 这次看来要放弃了.看了大概三分之一.似乎不能够让注意力集中了.先更新吧. 群的定义 \( ...
- docker-compose编排
创建并启动容器 docker-compose up -d 备注: -d 后台启动并运行容器 前提是你在执行该命令的时候已经编写好了docker-compose.yml文件,在这个文件的当前目录执行上述 ...
- 5分钟让你明白HTTP协议
一.HTTP简介 1.http协议介绍 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标 ...
- Scrum Meeting day 2
第二次会议,开发人员会议 . • 前端: 1. 登陆界面,login, sign up, 添加加载时的图片. 2. 主界面:采用类微信类型.应含有联系人.群聊.设置 3. ...