CSS中的overflow属性

  • overflow属性

如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条,是否隐藏溢出部分等行为,规定当内容溢出元素框时发生的事情。

  • 可能的值有:

visible:默认值。内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,并且其余内容是不可见的。

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

  • overflow-x与overflow-y

overflow-x主要用来定义对水平方向内容溢出的剪切,而overflow-y主要用来定义对垂直方向内容溢出的剪切,如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或者默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto。

我们看下面这个小例子,div2在水平方向超出了容器div1,我们将div1的overflow-x设置为visible,overflow-y设置为scroll,但是发现水平方向并没有显示多余的部分,而是出现了水平滚动条,可见overflow-x被重置为auto了。同样,div2中文字在竖直方向超出了容器,我们将div2的overflow-y设置为visible,overflow-x设置为hidden,但是发现竖直方向并没有隐藏多余的部分,而是出现了竖直方向的滚动条,可见overflow-y也被重置为auto了。

如果子元素为绝对定位元素,而父元素没有定位时,给父元素设置overflow并不起作用。就像下图,div2为绝对定位元素,给div1设置了overflow:hidden之后它超出div1的部分并没有被裁掉。只要给父元素设置定位position:absolute,fixed或relative之后就可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369513.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【知识梳理1】Android触摸事件机制

前言 随着科学技术的发展,智能手机早已成为我们当代人身边不可缺少的“伙伴”之中的一个,堪比对象女友。每天我们对着手机反复的做着点击、滑动操作,而手机则随着我们的操作给我们展示她的精彩。… 废话到此结束。 看到这里,即使…

自己做的一个登录页面,纯代码!

先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 1 1 body{2 2 margin: 0;3 3 padding: 0;4 4 width: 100%;5 5 height: 100%;6 6 }7 7 8 8 .headers{9 9 width: 100%;10 10 height: 100px;11 11 }12 12 .siv-ng{13 13 width:…

ASP.NET调用cmd命令提示符拒绝访问解决方案

using System.Diagnostics; public class CmdHelper{private static string CmdPath "C:\Windows\System32\cmd.exe";/// <summary>/// 执行cmd命令/// 多命令请使用批处理命令连接符&#xff1a;/// <![CDATA[/// &:同时执行两个命令/// |:将上一个命…

Some reading, some thinking.

update&#xff1a;感谢助教0 0又学会一招&#xff0c;play 了一下CSS Part 1 Reading AuthorArticleNoteMadcola《两年波折路&#xff08;考研、工作、考研&#xff09;》"吾志所向&#xff0c;一往无前&#xff1b;愈挫愈奋&#xff0c;再接再励。"辜新星《时刻调…

CSS选择器:伪类(图文详解)

本文最初发表于博客园&#xff0c;并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我&#xff0c;一起入门和进阶前端。 以下是正文。 伪类&#xff08;伪类选择器&#xff09; 伪类&#xff1a;同一个标签&#xff0c;根据其不同的种状态&#xff0c;有不同的样式。…

DIV固定宽度和动态拉伸混合水平排列

1.效果图 2.源代码 html <h2>1.头部固定&#xff0c;尾部拉伸</h2> <div class"container" id"div1"><div class"head"></div><div class"tail"></div> </div><h2>2.尾部固定…

使用CSS设置JavaFX饼图样式

渲染图表时&#xff0c; JavaFX默认提供某些颜色。 但是&#xff0c;在某些情况下&#xff0c;您想自定义这些颜色。 在此博客文章中&#xff0c;我将使用一个示例来更改JavaFX饼图的颜色&#xff0c;该示例打算在今天下午在RMOUG Training Days 2013的演示中包括。一些基于Jav…

java 错误: 找不到或无法加载主类

这个问题应该很常见的&#xff0c;笔者经常手工编译一些测试代码或者小工具&#xff0c;经常用到 javac和java来编译并运行一些简单的小工具。 以Hello World来测试。 HelloWorld.java public class HelloWorld{public static void main(String[]args){System.out.println(&quo…

在Visual Studio Code中配置GO开发环境

一、GO语言安装 详情查看&#xff1a;GO语言下载、安装、配置 二、GoLang插件介绍 对于Visual Studio Code开发工具&#xff0c;有一款优秀的GoLang插件&#xff0c;它的主页为&#xff1a;https://github.com/microsoft/vscode-go 这款插件的特性包括&#xff1a; Colorizatio…

最受欢迎的应用服务器

这是本系列的第二篇文章&#xff0c;我们将发布有关Java安装的统计数据。 使用的数据集来自免费的Plumbr安装&#xff0c;在过去六个月中&#xff0c;我们总共收集了1,024个不同的环境。 本系列的第一篇文章分析了基础-运行JVM的操作系统&#xff0c;是32位还是62位基础架构以…

SON_EXAM考试php,通用全国少儿英语等级考试:三星笔试真题

单项选择&#xff1a;36. exciting the game was! I enjoyed every minute of it.A.What B. How C.What an B.How an37.You stay here if youve finished your work.A.neednt B.mustnt C. shouldnt D.cant38 Nanjing Road in Shanghai is always crowded peole.A.with B.by c.o…

CSS基础知识(display和visibility、overflow、文档流)

9、显示与隐藏 u display属性&#xff1a; (1)none&#xff1a;隐藏元素&#xff0c;不会再占有页面的任何空间&#xff0c;即不会影响布局。 (2)inline&#xff1a;默认值。将元素[显示]为内联元素 &#xff08;与HTML元素本身无关系&#xff09; (3)block&#xff1a…

最受欢迎的Java环境

该职位将是即将发布的系列文章中的第一篇。 我们从所使用的环境开始&#xff1a;如果您感兴趣的是最受欢迎的JVM供应商或JVM版本&#xff0c;那么32bit是比64bit更流行的体系结构&#xff0c;还是Windows 8比Windows XP更流行的体系结构-这些都将在我们的文章中介绍。 在下一个…

使用宏实现透视表部分功能,将AB列数据合并统计.

功能:1.筛选B列;2.将A列中的值按照筛选后的结果进行合计. 这个特殊点是按照月日进行筛选的. Sub count_a() Dim sh As Worksheet Set sh ActiveSheet Range("C2:D" & [D65536].End(3).Row).Clear For line_b 2 To [B65536].End(3).Row If Len(Cells(line_b, &q…

HTML基础知识(常见元素、列表、链接元素、图片元素)

1、HTML有关概念 全称: Hyper Text Markup Language&#xff08;超文本标记语言&#xff09; 其文件扩展名为“.html”或“.htm” * 超文本 - 在普通的文本基础上&#xff0c;添加超链接、图片、音频或视频等 * 标记 - 标记就是HTML中的标签(元素)&#xff0c;特点:<a> …

权限和ACL练习题

1、在/testdir/dir里创建的新文件自动属于g1组&#xff0c;组 g2的成员如&#xff1a;alice能对这些新文件有读写权限&#xff0c;组g3 的成员如&#xff1a;tom只能对新文件有读权限&#xff0c;其它用户&#xff08;不 属于g1,g2,g3&#xff09;不能访问这个文件夹。 前期准备…

CSS3的过渡和转换

CSS3的过渡和转换 1.过渡 什么是过渡呢&#xff1f;过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性&#xff1a; 属性 描述csstransition简写属性&#xff0c;用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称…

JavaEE概念简介

这篇文章旨在澄清J2EE范例中使用的首字母缩写词和概念。 J2EE代表Java to Platform&#xff0c;Entreprise Edition。 它使创建模块化Java应用程序成为可能&#xff0c;并将其部署在应用程序服务器上。 它依赖于Java SE&#xff0c;Java SE是一组Java库的核心&#xff0c;所有J…

js php 数据类型判断,【js基础】变量类型判断

类型判断方法比较&#xff1a;如果需要想详细了解&#xff0c;请看下文:注&#xff1a;原封不动复制备份&#xff0c;防止删帖在JavaScript中&#xff0c;有5种基本数据类型和1种复杂数据类型&#xff0c;基本数据类型有&#xff1a;Undefined, Null, Boolean, Number和String&…

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西&#xff0c;突有兴致&#xff0c;想在里面嵌套一个微信网页版。 好了&#xff0c;想法一出来&#xff0c;就行动吧&#xff0c;最终效果…