眼见为实 — 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 内容 ...
随机推荐
- pip install scrapy报错：error: Unable to find vcvarsall.bat解决方法
今天在使用pip install scrapy 命令安装Scrapy爬虫框架时,出现了很让人头疼的错误,错误截图如下: 在网上查找解决方法时,大致知道了问题的原因.是因为缺少C语言的编译环境,其中一种 ...
- scrapy 基础组件专题（八）：scrapy-redis 框架分析
scrapy-redis简介 scrapy-redis是scrapy框架基于redis数据库的组件,用于scrapy项目的分布式开发和部署. 有如下特征: 分布式爬取 您可以启动多个spider工 ...
- redis（十九)：Redis 架构模式，特点
单机版 特点:简单 问题: 1.内存容量有限 2.处理能力有限 3.无法高可用. 主从复制 Redis 的复制(replication)功能允许用户根据一个 Redis 服务器来创建任意多个该服务器的 ...
- day3 python数据类型转换及变量的缓存机制
类型转换 1,强制类型转换 1.1 number的转换(int,float,bool,complex) num1 = 10 num2 = 10.6 num3 = True num4 = 3 + 4j ...
- [Qt2D绘图]-06QPainter的复合模式&&双缓冲绘图&&绘图中的其他问题
本篇读书笔记主要记录QPainter的复合模式&&双缓冲绘图&&绘图中的其他问题 大纲: 复合模式 双缓冲绘图 绘图中的其他问题 ...
- C++算法 广搜
有一个同学推荐我写一下广搜,广搜在最短路(骗分)上确实也有突出贡献,普及组应该也会考到,我今天就给要考普及组的同学讲讲课,今天讲广搜. 广搜,把可以走到的地点存进队列,然后一个个走,所以他第一次走到一 ...
- InceptionV4
目录 1. inception v4 2. Inception-resnet-v1 & Inception-resnet-v2 2.1 Inception-resnet-v1的组成模块 2.2 ...
- STL源码剖析：序列式容器
前言 容器,置物之所也.就是存放数据的地方. array(数组).list(串行).tree(树).stack(堆栈).queue(队列).hash table(杂凑表).set(集合).map(映像 ...
- git安装并与远程仓库关联相关配置
git是当前最流行的版本控制系统,下面简单记录一下git的安装及其与远程仓库的关联. git安装 打开git官网,下载对应的安装包. 双击运行安装包,安装过程中可以直接选择默认配置,一路next下去. ...
- 题解 洛谷 P6378 【[PA2010]Riddle】
首先不难看出对于本题的点与点之间的限制关系,我们可以考虑用\(2-SAT\)来解决,通过从状态\(x\)向状态\(y\)连一条有向边表示若状态\(x\)存在,那么状态\(y\)必须存在. 接下来的处理 ...