子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。
父元素默认是将溢出内容，在父元素外边显示，通过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. C语言中猴子吃桃问题
			
    猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个.第二天早上又将第一天剩下的桃子吃掉一半,有多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第 10 天早上想再吃时 ...
    
			
    2. 
						
  2. 数据库连接池DBUtils使用
			
    一.简介 DBUtils简单说python实现的线程化数据库连接(连接池),DBUtils支持所有遵循DP-API 2规范的数据库连接模块,例如:mysql.sqlserver.oracle.sqli ...
    
			
    3. 
						
  3. 20155202张旭《网络对抗技术》 week1 PC平台逆向破解及Bof基础实践
			
    20155202张旭<网络对抗技术> week1 PC平台逆向破解及Bof基础实践 1.实践目标: 实践对象:一个名为pwn1的linux可执行文件. 该程序正常执行流程是: main调用 ...
    
			
    4. 
						
  4. MODIS 数据产品预处理
			
    MODIS 数据产品预处理 1  MCTK重投影 第一步:安装ENVI的MCTK扩展工具 解压压缩包,将其中的mctk.sav与modis_products.scsv文件复制到如图所示,相应的ENVI ...
    
			
    5. 
						
  5. UI Recorder 安装教程（二）
			
    前言: UI Recorder支持无线native app(Android, iOS)录制, 基于macaca实现:https://macacajs.com/ 本次教程只针对无线native app( ...
    
			
    6. 
						
  6. java BigDecimal实现精确加减乘除运算
			
    java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val)Translates a doubl ...
    
			
    7. 
						
  7. 《Linux内核分析》第二周学习小结  操作系统是如何工作的？
			
    郝智宇   无转载   <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一．函数调用堆栈: 1.计算机是 ...
    
			
    8. 
						
  8. 《LINUX内核设计与实现》第五章学习总结
			
    一.与内核通信 系统调用:用户控件进程和硬件设备之间添加了一个中间层 系统调用的三个主要作用: 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进程都运行在虚拟系统中,而在用户 ...
    
			
    9. 
						
  9. python 图像处理(从安装Pillow开始)
			
    python2.x及以下用的是PIL(图像处理库是 PIL(Python Image Library)),最新版本是 1.1.7  可在http://www.pythonware.com/produc ...
    
			
    10. 
						
  10. 剑指offer：二叉树的深度
			
    题目描述: 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 解题思路: 这道题也是递归的思路,比较简单. 做的过程中遇到的一个 ...
    
			
    11.