子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示，通过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的更多相关文章
	

    
								
  1. vue—你必须知道的       js数据类型    前端学习    CSS 居中    事件委托和this    让js调试更简单—console   AMD && CMD   模式识别课程笔记（一）   web攻击   web安全之XSS  JSONP && CORS   css 定位  react小结
		
    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
    
		
    2. 
						
  2. 前端学习---css基本知识
		
    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
    
		
    3. 
						
  3. 前端学习——css实用技术
		
    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
    
		
    4. 
						
  4. Web前端学习——CSS
		
    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
    
		
    5. 
						
  5. 前端学习 -- Css -- 高度坍塌问题的产生以及解决
		
    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
    
		
    6. 
						
  6. 前端知识点--CSS overflow 属性
		
    问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...
    
		
    7. 
						
  7. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
		
    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
    
		
    8. 
						
  8. 前端学习 -- Css -- 浮动
		
    块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
    
		
    9. 
						
  9. 前端学习 -- Css -- display和Visibility
		
    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Could not obtain transaction-synchronized Session for current thread原因及解决方案
			
            在开发中,碰到到了Could not obtain transaction-synchronized Session for current thread异常,因此特意记录下. 一.问 ...
    
			
    2. 
						
  2. Linux环境中Qt程序的手工发布
			
    Linux环境中Qt程序的手工发布
    
			
    3. 
						
  3. WinForm  随手记
			
    从今天开始咱们正式进入WinForm开发模式 首先很官方的介绍下什么是winform:客户端应用程序:C/S 这就是winform 有什么特别特别重要的特点呢:可以操作用户电脑上的文件 举个简单的例子 ...
    
			
    4. 
						
  4. 《Effective Java》学习笔记 —— 通用程序设计
			
    本章主要讨论局部变量.控制结构.类库.反射.本地方法的用法及代码优化和命名惯例. 第45条 将局部变量的作用域最小化 * 在第一次使用的它的地方声明局部变量(就近原则). * 几乎每个局部变量的声明都 ...
    
			
    5. 
						
  5. numpy 初识（一）
			
    基本操作: 读取文件(与pandas读取csv相似): import numpy numpy.genfromtxt("word.txt", delimiter=',', dtype ...
    
			
    6. 
						
  6. LAXCUS大数据操作系统节点挂掉后的处理
			
    昨天回公司加班跑一个LAXCUS大数据应用,JVM直接挂了,没有留下任何异常信息,查看代码,也没有内存泄漏的问题.百思不得姐,只好去求教LAXCUS大数据操作系统的技术客服,客服查看了故障节点配置.日 ...
    
			
    7. 
						
  7. SimpleDateFormat的一些常用用法
			
    /** SimpleDateFormat函数语法: G 年代标志符 y 年 M 月 d 日 h 时 在上午或下午 (1~12) H 时 在一天中 (0~23) m 分 s 秒 S 毫秒 E 星期 D  ...
    
			
    8. 
						
  8. PAT甲题题解-1039. Course List for Student (25)-建立映射+vector
			
    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789157.html特别不喜欢那些随便转载别人的原创文章又不给 ...
    
			
    9. 
						
  9. PAT甲题题解-1068. Find More Coins (30)-dp,01背包
			
    一开始没多想,虽然注意到数据N<=10^4的范围,想PAT的应该不会超时吧,就理所当然地用dfs做了,结果最后一组真的超时了.剪枝啥的还是过不了,就意识到肯定不是用dfs做了.直到看到别人说用0 ...
    
			
    10. 
						
  10. alpha发布排序结果
			
    友组所做排序 其中有一组是教师排序. 序号 组名 组长 项目简称 匿名1组 匿名2组 匿名3组 匿名4组 匿名5组 匿名6组 匿名7组 匿名8组 平均 1 新蜂 武志远 俄罗斯 2 3 3 4 4 5 ...
    
			
    11.