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 内容 ...
随机推荐
- ES6语法糖，超甜！
ES6 语法糖 1. ... ... 表示取出可遍历数组中的内容. const arr = new Array() const numbers = [1,2,3,4,5] arr.push(...nu ...
- 洛谷P2701 [USACO5.3] 巨大的牛棚Big Barn 题解
怎么题解全是清一色的 dp?可以用笛卡尔树啊(虽然麻烦了很多,但是我热爱)! 题目传送门. 笛卡尔树的介绍 笛卡尔树,是一种二叉搜索树,它满足如下条件: 每个节点的编号满足二叉搜索树的性质. 每个节点 ...
- xpath 定位表格里面内容
向上找页面唯一元素,依次为: 表格体/第一行/第14列 实现代码 Xpath==//tbody/tr[1]/td[11]
- 【Pre】预习测试-Logisim/Verilog/MIPS
好家伙,开门挂 T2 字符自动机cscore 1.审题·惯性思维:直接输出了当前连续数,题目要求是最大连续数 -> [重新读题解决] 2.非阻塞赋值运用:若在always块内通过if(out1 ...
- 为什么将malloc（）和printf（）称为不可重入？
转载自https://mlog.club/article/1807704 在unix系统中,我们知道malloc()是一个不可重入的函数(系统调用).为什么? 类似地,printf()也被认为是不可重 ...
- linux shell用expect实现在scp时自动输入密码
文章目录 linux shell用expect自动输入密码 按行读取文件 expect 其他 linux shell用expect自动输入密码 最近有东西需要部署到很多服务器上去,一个服务器一个服务器 ...
- angular双向数据绑定踩坑记：
在angular中使用ngModel时出现了一个报错error NG8002: Can't bind to 'ngModel' since it isn't a known property of ' ...
- Apache Tomcat RCE漏洞复现（CVE-2025-24813）
漏洞描述 该漏洞的核心在于不完整PUT请求上传时 Tomcat 会使用了一个基于用户提供的文件名和路径生成的临时文件,且路径分隔符被替换为 . . 若同时满足以下条件,攻击者可执行任意代码: 默认 S ...
- Destination host unreachable 一般解决办法
症状: 上网各类应用基本正常,但是在命令行下使用ping命令,无论任何地址,均反馈Destination host unreachable. 分析: 输入命令arp -a可以看到网关的MAC地址正常解 ...
- Nginx配置跨域，覆盖后端服务跨域配置
本篇文章主要介绍了,如何通过Nginx配置跨域,并覆盖后端服务跨域配置. 先看下后端代码跨域配置: 主要的目标是:不修改后端跨域配置代码,来实现Nginx跨域指定域名. @Bean public Co ...