眼见为实 — 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 内容 ...
随机推荐
- keyring源码加密解密函数分析
Encrypt the page data contents. Page type can't be FIL_PAGE_ENCRYPTED, FIL_PAGE_COMPRESSED_AND_ENCRY ...
- 06-Python元组，列表，字典，集合数据结构
一.简介 数据结构是我们用来处理一些数据的结构,用来存储一系列的相关数据. 在python中,有列表,元组,字典和集合四种内建的数据结构. 二.列表 用于存储任意数目.任意类型的数据集合.列表是内置可 ...
- 开源｜如何开发一个高性能的redis cluster proxy？
文|曹佳俊 网易智慧企业资深服务端开发工程师 背 景 redis cluster简介 Redis cluster是redis官方提供集群方案,设计上采用非中心化的架构,节点之间通过gossip协 ...
- Ethical Hacking - NETWORK PENETRATION TESTING(20)
MITM - Capturing Screen Of Target & Injecting a Keylogger ScreenShotter Plugin: ScreenShotter: U ...
- CAS实现SSO 单点登录
结构 CAS分为两部分,CAS Server和CAS Client CAS Server用来负责用户的认证工作,就像是把第一次登录用户的一个标识存在这里,以便此用户在其他系统登录时验证其需不需要再次登 ...
- 深入剖析.NETCORE中CORS（跨站资源共享）
前言 由于现代互联网的飞速发展,我们在开发现代 Web 应用程序中,经常需要考虑多种类型的客户端访问服务的情况:而这种情况放在15年前几乎是不可想象的,在那个时代,我们更多的是考虑怎么把网页快速友好的 ...
- BUUCTF-web EasySearch (服务端包含注入ssi)
一打开就是登录页面 存在index.php.swp...(反正我是没有扫出来,题目没给提示),分析一波源码 <?php ob_start(); function get_hash(){ $cha ...
- 一个调用其他activity的完整例子，使用了 onActivityResult和startActivityForResult
https://blog.csdn.net/qq_32521313/article/details/52451364 Android startActivityForResult基本用法2016年09 ...
- 两种 HTTP 方法：GET 和 POST
区别 GET POST 可见性 数据在 URL 中对所有人都是可见的. post 方式通过body体进行传输,数据不会显示在 URL 中. 安全性 与 POST 相比,GET 的安全性较差,因为所发送 ...
- 在CentOS 7 上为docker配置端口转发以兼容firewall
在CentOS 7上当我们以类似下列命令将主机端口与容器端口映射时可能遇到无法访问容器服务的问题 docker run --name web_a -p 192.168.1.250:803:80 -d ...