css样式之overflow&overflow-x&overflow-y

最新推荐文章于 2024-05-20 14:07:14 发布
最新推荐文章于 2024-05-20 14:07:14 发布
阅读量1k 收藏 2
点赞数 2
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xj2wjtx/article/details/121655199
版权

overflow&overflow-x&overflow-y

overflow

<html>
	<head>
	<style type="text/css">
		div {
				background-color: #ccc;
				width: 80px;
				height: 80px;
				overflow: visible;
			}
	</style>
</head>
<body>
	<div>
		这个属性定义溢出元素内容区的内容会如何处理。
	</div>
</body>
</html>

属性值

overflow: visible;/*默认值，内容全部显示，溢出部分在元素外显示*/
overflow: scroll;/*不管会不会溢出都会显示滚动条，溢出部分滚动处理*/
overflow: auto;/*溢出会显示滚动条，不溢出正常显示*/
overflow: hidden;/*溢出会显示部分内容，溢出部分不再显示*/
overflow: inherit;/*继承父元素的overflow属性*/

overflow-x

<html>
	<head>
	<style type="text/css">
		div {
				background-color: #ccc;
				width: 80px;
				height: 80px;
				overflow-x: visible;
			}
	</style>
</head>
<body>
	<div>
		<p style="width: 100px">这个属性定义对溢出元素内容区的内容做左右边缘裁剪。</p>
	</div>
</body>
</html>

属性值

overflow-x: visible;/*默认值，溢出显示在元素外边*/
overflow-x: hidden;/*x方向溢出不显示，y方向滚动*/
overflow-x: scroll;/*x和y方向滚动*/
overflow-x: auto;/*x和y方向滚动*/
overflow-x: no-display;/*内容不适合内容框，删除内容框*/
overflow-x: no-content;/*内容不适合内容框，删除内容框*/

overflow-y

<html>
	<head>
	<style type="text/css">
		div {
				background-color: #ccc;
				width: 80px;
				height: 80px;
				overflow-y: visible;
			}
	</style>
</head>
<body>
	<div style="width: 100px">
		这个属性定义对溢出元素内容区的内容做上下边缘裁剪。
	</div>
</body>
</html>

属性值

overflow-y: visible;/*默认值，溢出显示在元素外边*/
overflow-y: hidden;/*y方向溢出不显示，x方向滚动*/
overflow-y: scroll;/*x和y方向滚动*/
overflow-y: auto;/*x和y方向滚动*/
overflow-y: no-display;/*内容不适合内容框，删除内容框*/
overflow-y: no-content;/*内容不适合内容框，删除内容框*/

overflow-x&overflow-y

<html>
	<head>
	<style type="text/css">
		div {
				background-color: #ccc;
				width: 80px;
				height: 80px;
				overflow-x: visible;
				overflow-y: visible;
			}
	</style>
</head>
<body>
	<div style="width: 100px">
		这个属性定义对溢出元素内容区的内容做上下左右边缘裁剪。
	</div>
</body>
</html>

overflow-x: visible;
overflow-y: visible;
/*溢出元素显示在元素外边*/

overflow-x: hidden;
overflow-y: visible;
/*溢出元素x方向显示部分内容，y方向滚动*/

overflow-x: visible;
overflow-y: hidden;
/*溢出元素x方向滚动，y方向显示部分内容*/

overflow-x: hidden;
overflow-y: hidden;
/*溢出元素x方向和y方向都显示部分内容*/

overflow-x: scroll;
overflow-y: visible;
/*溢出元素x方向和y方向滚动*/

overflow-x: auto;
overflow-y: visible;
/*溢出元素x方向和y方向滚动*/

overflow-x: visible;
overflow-y: scroll;
/*溢出元素x方向和y方向滚动*/

overflow-x: visible;
overflow-y: auto;
/*溢出元素x方向和y方向滚动*/

overflow-x: auto;
overflow-y: auto;
/*溢出元素x方向和y方向滚动*/

overflow-x: scroll;
overflow-y: scroll;
/*溢出元素x方向和y方向滚动*/
给你喝豆浆啊
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-文档流和 overflow 溢出
池鱼思故渊的博客
12-10 609
文档流 流动方向 inline 元素从左到右，到达最右边才会换行； block 元素从上到下，每一个都另起一行； inline-block 也是从左到右， 宽度 inline 宽度为内部 inline 元素的和，部能用 width 指定； block 默认自动计算宽度，可用 windth 指定； inline-block 结合前两者特点，可用 width。 高度 inline 高度由 ...
CSS之overflow
做一个开心的全栈工程师
07-07 2080
第1章 基本属性1.1overflow的五种取值 visible（默认） hidden scroll auto inherit 1.2overflow-x和overflow-y（IE8+）两种情况： 1.overflow-x和overflow-y值相同，则等同于overflow 2.overflow-x和overflow-y值不同，并且一个被赋予visible，另一个被赋予hidden、scro
css中overflow、overflow-x、overflow-y使用
qq_43235503的博客
04-23 3724
css中overflow、overflow-x、overflow-y使用
也说css之overflow：细探之下有意想不到的结果
weixin_34419326的博客
11-05 348
作者：dolymood overflow 是一个非常常用的 CSS 属性，一般来说会认为很简单，其实细究之后就会发现他还有很多小特性或者说意想不到的结果； 下面就介绍下（在浏览器环境下）关于 overflow 的小总结。 哪些元素上有效？ 首先 overflow 是应用到哪些元素上有效的，任意元素？ 当然不是，它只能应用于块容器上。 那什么是块容器呢？ 简单来说：除了 table 和可替换（...
css中的overflow-y
最新发布
wangzhen12138的博客
05-20 288
属性用于控制当内容溢出元素框时的行为。例如，如果你想隐藏一个元素框中的垂直滚动条，你可以设置。如果你想让内容在溢出时有一个垂直滚动条，你可以设置。
CSS系列之详解overflow
老__L的博客
02-01 8983
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
overflow-x和overflow-y设置冲突问题解决方案
weixin_44501030的博客
04-19 6767
问题情景还原： 对一个元素设置CSS overflow-x: hidden; 和 overflow-y: visible; 理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，overflow-y元素属性并没有生效。 原因分析： 一般来说“overflow-x”和“overflow-y”的计算值与它的指定值相同，但是在特定的情况下两者会有冲突： 如果其中一个指定为“visible”，而另一个是“scroll”或“auto”，那么“visible”就会被设置为“auto’”。在Gecko，Safari，O
css基础--overflow一
chujinmaolu的博客
06-30 2444
1、overflow剪裁界线border box overflow:hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响，overflow:hidden声明不会影响元素原先的流体特性或宽度表现。overflow属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪，也就是“结界”只是其衍生出来的特性，“剪裁”才是其本职工作。 一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，类似于下面的CSS代码： .box { width: 2
【第 231 期】CSS 中 关于 Overflow ，你需要了解的这些知识点！
粉丝们务必加入微信粉丝群
05-26 3060
在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。在本文中，将会介绍这些属...
css---overflow自定义样式
IT_Bonnie的博客
03-31 3375
一、原始css的overflow overflow： 用于内容展示时，内容过长，导致空间不足。 以下是菜鸟上的介绍以及例子，有兴趣的话可以先看看原始的。 二、需求自定义overflow 因需求方需要做一个非原始css给的滚动条，本身可能我们直接这样使用：overflow：auto，就可以完成内容过长的处理，但是原始的样式偏向于普通，不太符合有时候页面美观问题，所以我自定义了自己的overflow。 .left-co...
CSS布局--overflow
coinisi_li的博客
09-06 409
一、overflow 1. overflow 属性用于控 制内容溢出元素框时显示的方式。 2. overflow有五种属性值： visible : 默认值，内容不会被修剪，会超出元素框显示。 hidden : 内容会被修剪，超出元素框的部分会被隐藏。 scroll : 内容会被修剪，但浏览器会显示滚动条以查看其余内容。 auto : 如果内容被修剪，浏览器就会显示滚动条以查看其余内容。 inherit : 从父元素继承overflow的值。 3. 注意:overflow 属性只工作于指定高度的块元素上。
【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-28 1214
一、清除浮动 - 父级元素设置 overflow 样式 二、父级元素设置 overflow 样式代码示例 三、overflow 属性样式效果 1、没有设置 overflow 的效果 2、overflow: hidden 溢出隐藏效果 3、overflow: auto 垂直进度条效果 4、overflow: scroll 水平垂直进度条效果
黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题...
weixin_30335353的博客
06-28 738
不废话，直接上代码 <!DOCTYPE html> <html> <head> <style> body { padding: 0; margin: 0; height: 800px; display: flex; just...
overflow产生的滚动条样式修改
Z_kenshou的博客
03-20 562
实现出来就是这个样子 颜色可以自己改。
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
qq_51055690的博客
07-28 5067
css自定义滚动条样式
overflow属性当页面内容超出时 修改美化滚动条样式（CSS）
weixin_44096999的博客
07-24 2148
overflow 属性可以控制内容溢出，将对应区域内超出部分进行隐藏或者添加滚动条。页面CSS样式：(一定要设置宽高，否则不生效，不会出现溢出情况)height: 5px;//高宽分别对应横竖滚动条的尺寸。上述滚动条想要什么样式，根据自己的需求对应去修改即可。对y轴隐藏设置：overflow-y:hidden;对x轴自适应设置：overflow-x:auto;//滚动条里的小方块。
CSS overflow-x与overflow-y不同的兼容
gacha_man的博客
11-04 1948
问题描述 当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’，另一个特性的指定值为 ‘visible’ 时， 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’，其它浏览器使用 ‘auto’。 对于 ‘overflow-x’ 和 ‘overflow-y’ 的组合渲染，所有...
html overflow 样式,css样式之overflow-x属性样式
weixin_29586681的博客
06-15 895
overflow-x是overflow子花样，平日也很少用的。overflow-x设置匿伏溢出过宽模式(比如过宽图片)、设置对象底部转折条等重要。overflow-x语法与根本懂得1、overflow-x可设置值overflow-x : visible | auto | hidden| scroll值与解释引见：visible : 　不剪切内容也不添加迁移转变条。auto : 　此为body对象与...
04overflow属性,字体设置,背景,display
weixin_62235902的博客
07-09 189
04overflow属性,字体设置,背景,display
css overflow-y 样式
05-27
"overflow-y" 是一个 CSS 样式属性，用于控制一个元素在垂直方向上内容超出容器时的处理方式。它有以下几种取值： - visible：默认值，内容溢出容器时不会进行裁剪，会显示在容器外面。 - hidden：内容溢出容器时会被裁剪，并且不会显示在容器外面。 - scroll：内容溢出容器时会被裁剪，但是会显示滚动条，用户可以通过滚动条查看内容。 - auto：内容溢出容器时会根据需要进行裁剪，如果需要显示滚动条，才会显示滚动条，否则不显示滚动条。 该属性通常与 "overflow-x" 属性一起使用，用于控制在水平方向上内容超出容器时的处理方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值