CSS 之overflow属性简结
CSS的overflow 属性用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容超粗自身的大小时，就会发生内容溢出，这种情况，可以对内容进行“裁剪”，只让一部分内容可见。
overflow的属性有四种:visible,hidden,scroll,auto:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/layout.css" media="screen" />
</head>
<body>
<h1>Web Design</h1>
<ol id="linklist">
<li>
<a href="Page1.html">Page 1</a>
</li>
<li>
<a href="Page2.html">Page 2</a>
</li>
</ol>
<div id="slideshow">
<img src="data:images/1.jpg" id="preview" />
</div>
</body>
</html>
visible:不裁剪溢出内容，浏览器将把溢出的内容呈现在其容器元素的显示区域以外，全部内容可见。
#slideshow{
width:100px;
height:100px;
position:relative;
overflow:visible;
}
hidden:隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见。
#slideshow{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
scroll:类似于hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条，以便让与用户能够滚动看到内容的其他部分。
#slideshow{
width:100px;
height:100px;
position:relative;
overflow:scroll;
}
auto:类似于scroll，但浏览器只在确实发生溢出时，才显示滚动条，如果内容没有溢出，就不显示滚动条。
#slideshow{
width:100px;
height:100px;
position:relative;
overflow:auto;
}
CSS 之overflow属性简结的更多相关文章
- 眼见为实 — CSS的overflow属性
1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...
- 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 内容 ...
随机推荐
- 使用FishSpeech进行语音合成推理
部署 部署FishSpeech,优先参考github官方(https://speech.fish.audio/zh/). 注意:此网站可能需要FQ才能访问. 个人为Windows电脑,使用Wind ...
- 解决黑群晖 Docker 日志八小时时间差的有效方法
步骤一:登录黑群晖控制台 首先,我们需要登录到黑群晖控制台.可以通过SSH登录,或是直接在黑群晖控制台界面上操作. 步骤二:停止相关的Docker容器 在解决时间差问题之前,我们需要停止相关的Dock ...
- flutter - [02] 基本语法
题记部分 一.注释 ///这是一个注释 //这也是个注释 /* 这还是个注释 */ void main(List<String> args) { print ('你好 dart'); } ...
- SpringSecurity学习笔记-前后端分离
1. 简介 Spring Security是Spring家族中的一个安全管理框架.相比于另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富. 一般来说中大型的项目都是使用Sp ...
- 导出和导入word样式模板
对于自己配置过之后常用的word样式可以导出作为样式模板, 可以重复使用. 举例说一下哪些是常用的word样式, 例如: (常见的): 中文的内容的样式, 中英文分别设置不同的样式 (比较高级的)多级 ...
- go minio 设置访问权限
bucket 权限 桶默认可以有三种 Access Policy 策略:public.custom.private. public:不经过任何认证可以直接访问资源 custom:自定义策略 Acces ...
- docker网络冲突解决（修改docker_gwbridge网段）
1·问题 一次生产搭建服务的时候,出现客户端服务器到docker服务断开不通的情况,在docker服务器上抓包可以抓到客户端服务器的包,但是docker服务器不做任何响应 于是ip route 查看本 ...
- unity 多层叠加的BillBoard特效转序列帧特效降低overdraw
- 使用Python建立双缝干涉模型
引言 双缝干涉实验是物理学中经典的实验之一,它展示了光的波动性以及量子力学的奇异性.实验结果表明,当光或粒子通过两条狭缝时,它们会产生干涉现象,形成明暗相间的条纹图案.这种现象不仅说明了光的波动性,还 ...
- 878. 第 N 个神奇数字
878. 第 N 个神奇数字 题解:二分 + gcd 1~n中,能被a整除的个数 n/a , 能被b整除的个数 n/b, 能被a 且 b 整除的个数 n/ gcd(a,b) 则 1~n中能被a或b整除 ...