眼见为实 — 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 内容 ...
随机推荐
- Linux-常见的命令
1.杀掉tomcat进程 ps -ef |grep tomcat kill -9 pid 2.启动http服务 service httpd start 3.停止mysql服务 servi ...
- 网上一些sql题目的解决（网上答案+自己答案）
此篇博客内容引自“MySQL经典练习题及答案” 废话不不多说!!! 建表.插入数据. --建表 --学生表 CREATE TABLE Student( s_id VARCHAR(20), s_name ...
- python发送邮件插件
github链接:https://github.com/573734817pc/SendEmailPlug-in.git 说明: 1.该插件功能为发送邮件. 2.基于python编写. 3.使用的时候 ...
- Go的100天之旅-常量
常量 简介 道可道,非常道.这里常道指的永恒不变的道理,常有不变的意思.顾名思义和变量相比,常量在声明之后就不可改变,它的值是在编译期间就确定的. 下面简单的声明一个常量: const p int = ...
- Burp Suite Proxy Module - 代理模块
官方参考链接:https://portswigger.net/burp/documentation/desktop/tools/proxy/using 1.Burp Suite 代理设置选项 2.浏览 ...
- Ethical Hacking - GAINING ACCESS(6)
Server Side Attack Analysing scan results and exploiting target system. Go to the Analysis page and ...
- win10里面怎么获取最高管理员权限
Windows10专业版 1,按下win+R键唤出“运行”窗口,输入gpedit.msc. 2,这时打开了组策略编辑器,在左边找到“计算机配置-Windows 设置”,再进入右边“安全设置”,如图. ...
- 题解 洛谷 P4177 【[CEOI2008]order】
进行分析后,发现最大收益可以转化为最小代价,那么我们就可以考虑用最小割来解决这道题. 先算出总收益\(sum\),总收益减去最小代价即为答案. 然后考虑如何建图,如何建立最小割的模型. 发现一个任务最 ...
- http连接，缓存，cookie，重定向，代理
早期的HTTP协议使用短连接,收到响应后就立即关闭连接,效率很低: HTTP/1.1默认启用长连接,在一个连接上收发多个请求响应,提高了传输效率: 服务器会发送“Connection: ...
- ORACLE_19c用户密码登录失败的问题以及ORA-28040
测试环境19c 本地登录无异常,创建测试用户,电脑Plsql登录提示报错ORA-28040,处理后再次登录提示密码错误,最后重置密码再次登录OK? 通过这个问题再次测试及反思: 1.ORA-28040 ...