轻轻松松学CSS:overflow
一、overflow的定义
overflow,音【əʊvəˈfləʊ】，义【溢出】，就像2.2米的人躺在1.8米的床上，腿得耷拉到床外一样。overflow 属性用于控制内容溢出容器时显示的方式
二、overflow的属性值
【1】visible，默认值（确切地说是绝大数元素的默认值，html、textarea的overflow默认值是auto），overflow:visible表示溢出的内容在容器之外可见
<style>
div{width:300px;height:100px;border:3px solid red;overflow:visible;}
</style> <div>
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：visible表示溢出部分可见。
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：visible表示溢出部分可见。
</div>
效果如下图：
尽管容器外面的内容是可见的，但它不会把周围其它元素挤下去，但溢出的内容可能与周围其它元素重叠
【2】hidden，表示溢出的内容在容器之外被隐藏
<style>
div{width:300px;height:100px;border:3px solid red;overflow:hidden;}
</style>
<body>
<div>
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：hidden表示溢出部分被隐藏。
</div>
hidden与visible相反，它会把超出容器部分隐藏掉，被隐藏的部分彻底看不到（除非查看源代码），overflow:hidden用的比较多，主要应用在清除浮动（下面要讲）等方面
【3】scroll，表示容器出现滚动条（包括水平滚动条和垂直滚动条），溢出的内容可以通过滚动条查看
<style>
div{width:300px;height:100px;border:3px solid red;overflow:scroll;}
</style>
<body>
<div>
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：scroll表示溢出部分通过滚动条查看，滚动条有点傻，不管是否需要，它都存在。
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：scroll表示溢出部分通过滚动条查看，滚动条有点傻，不管是否需要，它都存在。
</div>
scroll有点傻乎乎的，（水平方向、垂直方向）不管是否溢出，滚动条都会出现。正因为如此，overflow:scroll有点影响美观，所以用的不是很多。
【4】auto，表示容器出现滚动条（包括水平滚动条和垂直滚动条），溢出的内容可以通过滚动条查看
<style>
div{width:300px;height:100px;border:3px solid red;overflow:auto;}
</style>
<body>
<div>
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：auto表示溢出部分通过滚动条查看，滚动条的出现更智能，按需出现。
如果容器中的内容，超过了容器本身的宽度或高度时，内容就有可能溢出。此时，就可以使用overflow属性来控制内容溢出时的处理方式。overflow：auto表示溢出部分通过滚动条查看，滚动条的出现更智能，按需出现。
</div>
auto，更智能，根据需要出现滚动条，水平方向或垂直方向哪个有溢出哪个方向才出现滚动条。正因为如此，overflow:auto相比scroll更美观，所以用的较多。
三、应用
当overflow设置为auto或scroll或hidden时可以触发BFC（只要不是overflow:visible，overflow的其它属性都能触发BFC），使得overflow可以实现一些相关应用。（关于BFC，简单地说就是自成系统，与系统外彼此互不干扰，详细内容读者可以搜索相关资料，此处不赘述）
【1】清除浮动
<style>
img{float:left;}
.box{background:lightblue;overflow:hidden;}
</style>
<body> <div class="box">
<img src="img/guanggao.jpg">
</div>
</body>
【2】避免margin穿透
<style>
img{display:block;}
.box{background:lightblue;overflow:hidden;}
</style>
<body>
<div class="box">
<img src="img/guanggao.jpg">
</div>
</body>
【3】两栏自适应布局
<style>
.left{float:left;margin-right:30px;}
.right{background-color:lightgreen;overflow:hidden;}
p{background-color:olive;}
</style>
<body>
<div class="left">
<img src="img/guanggao.jpg">
</div>
<div class="right">
<p>abc</p>
<p>bcd</p>
<p>cde</p>
<p>def</p>
<p>efg</p>
<p>fgh</p>
<p>ghi</p>
</div>
</body>
【4】选项卡（锚点）
<style>
.box{
width:300px;
height:300px;
background:lightblue;
overflow:hidden;
}
.list{
width:300px;
height:300px;
color:red;
text-align:center;
line-height:300px;
}
.link{
width:300px;
margin-top:50px;
}
.click{
padding:5px 10px;
border:3px solid #ccc;
}
</style>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link">
<a class="click" href="#one">1</a>
<a class="click" href="#two">2</a>
<a class="click" href="#three">3</a>
<a class="click" href="#four">4</a>
</div>
</body>
轻轻松松学CSS:overflow的更多相关文章
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
- 轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
- 轻轻松松学CSS：position
position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...
- 轻轻松松学CSS：float
float属性,会使元素向左或向右移动,其周围的元素也会重新排列.float不仅自己飘忽不定,还对周围元素有影响,这种影响力不容小觑.他捉摸不定(浮动规律不好把握),他干涉他国内政(对周围元素有影响) ...
- 轻轻松松学CSS:background
background是复合属性,它可以分解为8个属性,其中5个属于CSS,另外3个属于CSS3一.CSS 1.background-color:背景色 2.background-image ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- CSS——overflow的参数以及使用
学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
- 教你玩转CSS Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...
随机推荐
- SpringBoot整合Redis并完成工具类
SpringBoot整合Redis的资料很多,但是我只需要整合完成后,可以操作Redis就可以了,所以不需要配合缓存相关的注解使用(如@Cacheable),而且我的系统框架用的日志是log4j,不是 ...
- 鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java通过反射加载的类，变量无法注入
//之前都是直接newInstance的到obj,类中的变量无法被注入//Object obj = aClass.newInstance(); //改成如下方式的到bean,变量就能顺利被注入 ,其他 ...
- 焦大：seo思维光年(下)seo操作如何度量化
http://www.wocaoseo.com/thread-57-1-1.html 如果不能度量就无法进行改进,所以度量化或数据化是网站分析和网站研究必须进行的一个方面,seo也不能例外.我在上篇文 ...
- js区别对象和数组的三种方法
var arr = {}||[]; 区分arr是数组还是对象 1.arr.constructor ...
- MySql 错误：In aggregated query without GROUP BY, expression #1 of SELECT list contains....
前段时间做sql注入的时候 使用group_concat时,出现标题上的错误.经查阅一位大佬的博客,成功解决!故写此博文! 当mysql的sql_mode是only_full_group_by的时候 ...
- AndroidStudio中利用git下载github或者git.oschina的代码时报错：repository test has failed解决方法
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing AndroidS ...
- Spring源码分析 手写简单IOC容器
Spring的两大特性就是IOC和AOP. IOC Container,控制反转容器,通过读取配置文件或注解,将对象封装成Bean存入IOC容器待用,程序需要时再从容器中取,实现控制权由程序员向程序的 ...
- html打印后不刷新当前页
这种方法可以在打印的页面中添加样式,新页面跳转打印 doPrint(ids){ var titleHTML=document.getElementById(ids).innerHTML; var Op ...
- 微服务实战SpringCloud之Spring Cloud Feign替代HTTP Client
简介 在项目中我们有时候需要调用第三方的API,微服务架构中这种情况则更是无法避免--各个微服务之间通信.比如一般的项目中,有时候我们会使用 HTTP Client 发送 HTTP 请求来进行调用,而 ...