眼见为实 — CSS的overflow属性
1. overflow属性
CSS的overflow属性指定当内容溢出一个元素的框，会发生什么。举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content {
border: 1px solid red;
width: 300px;
}
.content>p {
width: 600px;
margin: 0;
padding: 5px;
}
</style>
</head>
<body>
<div class="content"><p>ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。</p></div>
</body>
</html>
在没有指定元素的overflow属性时，其默认值为visible。因此，不指定overflow属性和指定overflow属性的值为visible的效果是一样的。
.content {
border: 1px solid red;
width: 300px;
overflow: visible; /* 添加的样式 */
}
指定overflow属性的值为hidden：
.content {
border: 1px solid red;
width: 300px;
overflow: hidden;
}
指定overflow属性的值为scroll：
.content {
border: 1px solid red;
width: 300px;
overflow: scroll;
}
指定overflow属性的值为auto：
.content {
border: 1px solid red;
width: 300px;
overflow: auto;
}
提示：其实，也可以同时设置宽度和高度，这样就可以去掉<div>里面的<p>了。
<!-- ... -->
<style>
.content {
border: 1px solid red;
width: 300px;
height: 100px;
overflow: auto;
}
<style>
<!-- ... -->
<div class="content">ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，...</div>
<!-- ... -->
总结：
- 元素的
overflow属性的默认值为visible。 - 设置
overflow属性的值为hidden，当内容溢出元素框时，溢出的部分会被挡住。 - 设置
overflow属性的值为scroll或者auto，当内容溢出元素框时，都会出现滚动条。 scroll和auto区别是前者在水平方向和垂直方向都会出现滚动条，而后者只会在需要的地方出现滚动条。
2. The clearfix Hack
overflow: auto;还可以用于清除浮动：The clearfix Hack（该网址需要翻墙，请自备梯子。）
眼见为实 — CSS的overflow属性的更多相关文章
- CSS display overflow 属性 cursor光标类型
display属性 功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
- css的overflow属性
原文:https://www.jianshu.com/p/67b536fc67c1 ------------------------------------------- 事实上我挺长一段时间都没弄清 ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- CSS：overflow 内容溢出属性
overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...
随机推荐
- redis（三)：Redis 命令（python）
import redis from redis import StrictRedis redis=StrictRedis(host='localhost',port=6379,db=0,passwor ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- angular浏览器兼容性问题解决方案
问题:edge浏览器下,固定列的边框消失 原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webki ...
- 老司机带你玩转面试（3）：Redis 高可用之主从模式
前文回顾 建议前面文章没看过的同学先看下前面的文章: 「老司机带你玩转面试(1):缓存中间件 Redis 基础知识以及数据持久化」 「老司机带你玩转面试(2):Redis 过期策略以及缓存雪崩.击穿. ...
- Cyber Security - Palo Alto Firewall V-Wires
Leveraging V-Wires Bridge two physical connections and apply security Policies without influencing a ...
- antd踩坑：日期选择器的可选日期控制的问题
有一个需求是日期选择需要加一个日期限制. 于是我兴高采烈的加上去了. // 日期可选判断方法 disabledDateFunc = current => { const { disabledDa ...
- Win7安装Python失败 提示Setup failed
一.安装报错 如图所示,双击Python安装包后进行安装显示Setup failed 安装失败: 二.错误排除 1.首先查看自己的计算机是否已经安装了 Win7 Service Pack 1大补丁,没 ...
- maven项目原型（idea）
1: internal -> appfuse-basic-jsf (创建一个基于Hibernate,Spring和JSF的Web应用程序的原型) 2: internal -> appfus ...
- 2.pandas的数据结构
对于文件来说,读取只是最初级的要求,那我们要对文件进行数据分析,首先就应该要知道,pandas会将我们熟悉的文件转换成了什么形式的数据结构,以便于后续的操作 数据结构 pandas对文件一共有两种数据 ...
- c语言大小写转化函数（包括字母和字符串）
本憨憨忘了好几次了,这次一定记住他们! 首先大小写相差32．转换的话自己写函数也是可以写出来的． 1．字母 如果是字母转的话,用toupper(),tolower() 头文件是<ctype.h& ...