眼见为实 — 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 内容 ...
随机推荐
- Mysql基础（九)：MySQL 事务
一.含义事务:一条或多条sql语句组成一个执行单位,一组sql语句要么都执行要么都不执行二.特点(ACID)A 原子性:一个事务是不可再分割的整体,要么都执行要么都不执行C 一致性:一个事务可以使数据 ...
- 07 drf源码剖析之节流
07 drf源码剖析之节流 目录 07 drf源码剖析之节流 1. 节流简述 2. 节流使用 3. 源码剖析 总结: 1. 节流简述 节流类似于权限,它确定是否应授权请求.节流指示临时状态,并用于控制 ...
- Python并发编程04 /多线程、生产消费者模型、线程进程对比、线程的方法、线程join、守护线程、线程互斥锁
Python并发编程04 /多线程.生产消费者模型.线程进程对比.线程的方法.线程join.守护线程.线程互斥锁 目录 Python并发编程04 /多线程.生产消费者模型.线程进程对比.线程的方法.线 ...
- Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇
Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇 本文主要内容: 1:spring cloud整合Eureka总结 本文是由凯哥(凯哥Java:kagejava ...
- Producter and Consumer
package pinx.thread; import java.util.LinkedList; import java.util.Queue; public class ProducerConsu ...
- Kite: 一个分布式微服务框架（翻译）
原文链接:https://blog.gopheracademy.com/birthday-bash-2014/kite-microservice-library/ 此为中文翻译 用GO语言来编写web ...
- Python 3基础教程8-if else语句
终于更新到了,教程8, 如果对python软件测试.接口测试.自动化测试.面试经验交流.感兴趣可以加君羊软件测试交流: 1079636098,还会有同行一起技术交流. 本文介绍if else语句,不多 ...
- 第三章:View的事件体系
3.1 View的基础知识 主要有:View的位置参数,MotionEvent和TouchSlop对象,VelocityTracker,GestureDetector和Scroller对象 3.1.1 ...
- Python Ethical Hacking - NETWORK_SCANNER(2)
DICTIONARIES Similar to lists but use key instead of an index. LISTS List of values/elements, all ca ...
- tineMCE 踩坑：images_upload_handler
tineMCE 的官方示例提供了前端上传图片方法 images_upload_handler 的写法. 但官方写的有点问题,上传会报错. 不过修改也很简单: images_upload_handler ...