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> <!-- ... -->

总结:

  1. 元素的overflow属性的默认值为visible
  2. 设置overflow属性的值为hidden,当内容溢出元素框时,溢出的部分会被挡住。
  3. 设置overflow属性的值为scroll或者auto,当内容溢出元素框时,都会出现滚动条。
  4. scrollauto区别是前者在水平方向和垂直方向都会出现滚动条,而后者只会在需要的地方出现滚动条。

2. The clearfix Hack

overflow: auto;还可以用于清除浮动:The clearfix Hack(该网址需要翻墙,请自备梯子。)

眼见为实 — CSS的overflow属性的更多相关文章

  1. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  2. css的overflow属性

    原文:https://www.jianshu.com/p/67b536fc67c1 ------------------------------------------- 事实上我挺长一段时间都没弄清 ...

  3. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  4. 转:CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  5. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  6. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  7. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  8. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  9. CSS:overflow 内容溢出属性

    overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...

随机推荐

  1. pip install scrapy报错:error: Unable to find vcvarsall.bat解决方法

    今天在使用pip install scrapy 命令安装Scrapy爬虫框架时,出现了很让人头疼的错误,错误截图如下: 在网上查找解决方法时,大致知道了问题的原因.是因为缺少C语言的编译环境,其中一种 ...

  2. scrapy 基础组件专题(八):scrapy-redis 框架分析

    scrapy-redis简介 scrapy-redis是scrapy框架基于redis数据库的组件,用于scrapy项目的分布式开发和部署. 有如下特征:  分布式爬取 您可以启动多个spider工 ...

  3. redis(十九):Redis 架构模式,特点

    单机版 特点:简单 问题: 1.内存容量有限 2.处理能力有限 3.无法高可用. 主从复制 Redis 的复制(replication)功能允许用户根据一个 Redis 服务器来创建任意多个该服务器的 ...

  4. day3 python数据类型转换及变量的缓存机制

    类型转换 1,强制类型转换 1.1 number的转换(int,float,bool,complex) num1 = 10 num2 = 10.6 num3 = True num4 = 3 + 4j ...

  5. [Qt2D绘图]-06QPainter的复合模式&&双缓冲绘图&&绘图中的其他问题

    本篇读书笔记主要记录QPainter的复合模式&&双缓冲绘图&&绘图中的其他问题   大纲:     复合模式     双缓冲绘图     绘图中的其他问题       ...

  6. C++算法 广搜

    有一个同学推荐我写一下广搜,广搜在最短路(骗分)上确实也有突出贡献,普及组应该也会考到,我今天就给要考普及组的同学讲讲课,今天讲广搜. 广搜,把可以走到的地点存进队列,然后一个个走,所以他第一次走到一 ...

  7. InceptionV4

    目录 1. inception v4 2. Inception-resnet-v1 & Inception-resnet-v2 2.1 Inception-resnet-v1的组成模块 2.2 ...

  8. STL源码剖析:序列式容器

    前言 容器,置物之所也.就是存放数据的地方. array(数组).list(串行).tree(树).stack(堆栈).queue(队列).hash table(杂凑表).set(集合).map(映像 ...

  9. git安装并与远程仓库关联相关配置

    git是当前最流行的版本控制系统,下面简单记录一下git的安装及其与远程仓库的关联. git安装 打开git官网,下载对应的安装包. 双击运行安装包,安装过程中可以直接选择默认配置,一路next下去. ...

  10. 题解 洛谷 P6378 【[PA2010]Riddle】

    首先不难看出对于本题的点与点之间的限制关系,我们可以考虑用\(2-SAT\)来解决,通过从状态\(x\)向状态\(y\)连一条有向边表示若状态\(x\)存在,那么状态\(y\)必须存在. 接下来的处理 ...