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 内容 ...
随机推荐
- Jupyter Notebook 一些常用的快捷键
命令模式(按 Esc 进入): A:在当前单元格上方插入新单元格. B:在当前单元格下方插入新单元格. D + D(按两次 D 键):删除当前单元格. Z:撤销单元格删除. Ctrl + Enter: ...
- Featurewiz-Polars：一种强大且可扩展的特征选择解决方案，适用于XGBoost
前言:"Featurewiz-Polars"是一个用于特征工程的 Python 库,结合了特征选择和特征生成的功能.它基于"Polars",这是一个高性能的 D ...
- cudatooklit安装记录_windows
Windows本地部署deepseek,使用速度不是很理想,在此尝试使用GPU加速 在cmd中使用命令查看支持的版本 nvidia-smi 注意对应的 Driver Version,根据Nvidia给 ...
- jQuery ajax 文件上传 Request Headers 缺少 boundary
原文地址: https://blog.jijian.link/2020-07-28/jquery-ajax-upload-file/ 一般上传方式 const file = document.getE ...
- 获取当前电脑屏幕的dpi
<div id="test" style="width:1in;height:1in;overflow:hidden;"></div> ...
- Golang 入门 : 语言环境安装
下载介绍 在go的官方网址上下载go最新版本https://golang.google.cn/dl/,或者在 Go 的中文网上下载https://studygolang.com/dl,两个网站打开的内 ...
- 云服务器下如何部署Django项目详细操作步骤
前期本人完成了"编写你的第一个 Django 应用程序",有了一个简单的项目代码,在本地window系统自测没问题了,接下来就想办法部署到服务器上,可以通过公网访问我们的Djang ...
- 【WPF开发】HandyControl Growl控件Error通知不自动消失的问题
需求 HandyControl Growl在Error类型的通知不自动消失,此时需要他跟其他的统一. 找寻原因 那么翻翻代码看看为啥不消失呗 1.这是决定关闭通知的计时器 2.这是通过_staysOp ...
- SpringBoot集成亚马逊的S3对象存储
依赖导入:aws-java-sdk-s3 <dependencyManagement> <dependencies> <dependency> <groupI ...
- 通过百度地图 API V2.0 版本，进行地图坐标系转换
注意 先阅读参考链接 瞭月 的文章,再阅读本文. 其中,请求参数中 model 的含义: amap/tencent - 即:GCJ02 火星坐标系,由中国国家测绘局制订的地理信息系统的坐标系统. 由 ...