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 内容 ...
随机推荐
- SpringBoot - [07] Web入门
题记部分 一.Web 入门 SpringBoot将传统Web开发的mvc.json.tomcat等框架整合,提供了spring-boot-starter-web组件,简化了Web应用配置.创建Sp ...
- deepseek:封装一个axios
封装一个包含上传和下载文件功能的 axios 实例,可以提高代码的复用性和可维护性.以下是一个完整的封装示例,支持文件上传.下载.以及常规的 GET/POST 请求. 封装代码 import axio ...
- Mpmath库-学习笔记
目录 mpmath库学习 1. Introduction 1.2 Basic usage of mpmath 1.3 输出格式化 1.4 输出的小数点位数 2. BASIC FEATURES 2.1 ...
- WSL2 - Ubuntu 22.04使用记录
1 安装 搭配Windows Terminal使用为佳,在微软商店可下载: 然后依照官网描述即可. 命令行中运行wsl --install即可.不过由于想自行指定发行版,于是: wsl --list ...
- fs的proxy_media模式失效
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 在fs的使用过程中,某些场景只需要对rtp媒体做透传,又不需要任何处理. 在fs1.6的版本中,我们可以使用proxy_media来 ...
- 自行为一加6编译Postmarket os内核
序 在为自己的一加6刷上PostmarketOS后突然某一天想使用它的照相机功能.原因是想到使用pmos拍照后笔者可以直接使用scp指令来传输手机相片到自己运行着GNU/Linux的电脑上,就感到相对 ...
- 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
FRP 是 Github 上开源的一款内网穿透工具,点击前往项目地址,该项目分为 frps 服务端和 frpc 客户端,通过在拥有公网 IP 的服务器上搭建服务端,然后在被穿透的机器上安装客户端,配置 ...
- nginx 配置 vue History模式
解决 需要加一行 try_files $uri $uri/ /index.html;,其中 /index.html 是你自己的目录中的入口文件 server { listen [::]:80 defa ...
- python web服务器--WSGI/ASGI协议--web框架，三者之间的关系
在 Python Web 开发中,Web 服务器.WSGI/ASGI 协议 和 Web 框架 是三个核心组成部分,它们共同协作以实现完整的 Web 应用程序.以下是三者之间的关系和作用的详细讲解: 1 ...
- SpringBoot+微信支付-JSAPI
引入微信支付SDK Maven: com.github.wechatpay-apiv3:wechatpay-java-core:0.2.12 Maven: com.github.wechatpay-a ...