子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示，通过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. HDFS--大数据应用的基石
			
    近些年,由于智能手机的迅速普及推动移动互联网技术的蓬勃发展,全球数据呈现爆发式的增长.2018年5月企鹅号的统计结果:互联网每天新增的数据量达2.5*10^18字节,而全球90%的数据都是在过去的两年 ...
    
			
    2. 
						
  2. 20155227《网络对抗》Exp8 Web基础
			
    20155227<网络对抗>Exp8 Web基础 实验内容 (1)Web前端HTML (2)Web前端javascipt (3)Web后端:MySQL基础:正常安装.启动MySQL,建库. ...
    
			
    3. 
						
  3. 20155333 《网络对抗》 Exp8  Web基础
			
    20155333 <网络对抗> Exp8 Web基础 基础问题 (1)什么是表单? 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用 ...
    
			
    4. 
						
  4. 20155339 Exp3 免杀原理与实践
			
    20155339 Exp3 免杀原理与实践 基础问题 (1)杀软是如何检测出恶意代码的? 基于特征码的检测(杀软的特征库中包含了一些数据或者数据段,杀软会尽可能的更新这个特征库,以包括尽可能多的恶意代 ...
    
			
    5. 
						
  5. WPF编程，TextBlock中的文字修饰线（上划线，中划线，基线与下划线）的使用方法。
			
    原文:WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330 ...
    
			
    6. 
						
  6. Android开发——Android多进程以及使用场景介绍
			
    个层级,具体可以查看Android开发--Android进程保活招式大全中1.1部分的内容,这里就不赘述了. 根据进程中当前活动组件的重要程度,Android 会将进程评定为它可能达到的最高级别.例如 ...
    
			
    7. 
						
  7. 全方位Bindind分析
			
    Binding,音译为绑定,通道捆她想一条数据的高速绑着“源”与“目标”: “源”乃提供数据的一方:“目标”乃接收数据并作出相应反应的一方: 过程感觉就像是,给一个“激励”,就会作出“反应”那样--- ...
    
			
    8. 
						
  8. mfc  Edit控件属性
			
    设置Edit控件属性 窗口创建顺序 初始化Edit控件数据 一.设置Edit控件属性 .Align Text :Right 二.窗口创建顺序 CMywindowdlg: 窗口构造函数 OnCreate ...
    
			
    9. 
						
  9. 浅谈 iOS 中的 Activity Indicator
			
    Activity Indicator 是iOS开发中必不可少的一个视图.本文就简单地总结一下这个Activity Indicator 的使用方法. 默认 Activity Indicator 以下的函 ...
    
			
    10. 
						
  10. babel的使用(关于使用async报错的问题)
			
    一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...
    
			
    11.