子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示，通过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. linux gz 解压缩
			
    Linux压缩保留源文件的方法:gzip –c filename > filename.gzLinux解压缩保留源文件的方法:gunzip –c filename.gz > filenam ...
    
			
    2. 
						
  2. shell脚本事例 -- 获取当前日期的前一天日期
			
    记录一个shell脚本事例,事例中包括shell的一些语法(函数定义.表达式运算.if.case...) #!/bin/sh #获取当前时间 RUN_TIME=`date +%H%M%S` #取当前日 ...
    
			
    3. 
						
  3. 移动端页面滑动时候警告：Unable to preventDefault inside passive event listener due to target being treated as passive.
			
    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to  ...
    
			
    4. 
						
  4. gulp.src()内部实现探究
			
    写在前面 本来是想写个如何编写gulp插件的科普文的,突然探究欲又发作了,于是就有了这篇东西...翻了下源码看了下gulp.src()的实现,不禁由衷感慨:肿么这么复杂... 进入正题 首先我们看下g ...
    
			
    5. 
						
  5. Jq_javascript跨域问题
			
    为什么浏览器不能跨域   现在很多人特别是前端开发人员,在ajax请求,XMLHttpRequest的过程中会碰到一个问题,那就是跨域请求: 当我们javaScript脚本试图跨域访问时,浏览器会告诉 ...
    
			
    6. 
						
  6. docker之私有仓库镜像管理
			
    一.查看本地镜像 二.给镜像打标记(tag ) [root@node03 ~]# docker tag wordpress:v1 192.168.1.197:5000/wordpress:v1 2.删 ...
    
			
    7. 
						
  7. 深入了解Kubernetes REST API的工作方式
			
    关于Kubernetes REST API的工作方式: 在哪里以及如何定义从REST路径到处理REST调用的函数的映射? 与etcd的交互发生在哪里? 从客户端发出请求到保存在etcd中对象的端到端路 ...
    
			
    8. 
						
  8. OpenGL学习（3）——Shader
			
    之前已经接触过Vertex Shader和Fragment Shader,这次学习如何编写Shader并封装成类. Shader源码主要有四部分: 版本声明 #version xxx core: 使用 ...
    
			
    9. 
						
  9. python基础面试题
			
    函数1def foo(arg,li=[]): li.append(arg) return li list1 = foo(21) list2 = foo(11,[2]) list3 = foo(28)  ...
    
			
    10. 
						
  10. PHP密码的六种加密方式
			
    1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. raw_output  --  ...
    
			
    11.