overflow和display的用法

本文详细介绍了CSS中overflow和display属性的使用方法及各个参数的区别。包括如何通过设置overflow来控制内容溢出时的行为,例如使用auto使内容在需要时显示滚动条;以及display属性的不同值如block、inline等对元素布局的影响。

overflow的用法:
http://paranimage.com/css-overflow-attribute/
帕兰映像的详解

参数:

visible:不剪切内容也不添加滚动条。假如声明此默认值,对象将被剪切为包含对象的window或frame的大小,并且clip属性设置将失效。

auto:此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。

hidden:不显示超过对象尺寸的内容 (在ie6与firefox都敲定高,但总是不能保持高度一致时,试试用这个)

scroll:总是显示滚动条

display的用法:

今天遇到一个页面一个

<div><img src="xx.jpg"></div>

已经设定div的高度和背景色,但是图片的高度比div的高度要小2px,ie6中这时候会显示背景,用display:inline就没有背景色了

display:inline 行内显示 display:none 不显示,也不占地方

display:block 块显示 display:hidden不显示,但是占地方

### 关于显示溢出下溢的概念 在编程环境中,显示溢出(Display Overflow)通常指的是图形或图像数据超出分配给它们的屏幕空间范围。当渲染的内容超过窗口边界时就会发生这种情况[^4]。 对于下溢(Underflow),这一术语更多见于数值计算领域,表示数值变得太小以至于无法被计算机系统有效存储的情况;然而,在讨论显示器相关话题时,“下溢”的定义可以类推为未能充分利用可用的空间来展示内容——即存在空白区域未被填充的情形。 ### 处理方法 #### 防止显示溢出的方法 为了防止显示溢出,开发者可以通过设置视窗裁剪区(Clipping Region)、调整坐标系转换矩阵等方式控制绘制操作的影响范围: - **使用投影变换**:通过正交投影或其他类型的投影技术改变物体相对于观察者的视角位置关系,从而确保所有对象都位于可见区域内[^1]。 ```cpp // 设置OpenGL中的正交投影矩阵 glMatrixMode(GL_PROJECTION); glLoadIdentity(); float aspectRatio = (float)width / height; if(width >= height){ glOrtho(-aspectRatio, aspectRatio, -1.0f, 1.0f, 1.0f, -1.0f); }else{ glOrtho(-1.0f, 1.0f, -1.0f/aspectRatio, 1.0f/aspectRatio, 1.0f, -1.0f); } ``` - **启用双缓冲机制并同步刷新率**:这有助于减少因快速连续更新而导致的画面撕裂现象,同时也可间接帮助管理好屏幕上呈现的信息量,避免不必要的溢出问题出现。 ```csharp // C# WinForms 双缓存示例 this.DoubleBuffered = true; // 启用双缓冲 this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint, true); ``` #### 解决显示下溢的方式 针对可能出现的“下溢”,即画面中有部分区域为空白的问题,则应考虑优化布局算法或是动态适应不同的分辨率比例等因素: - **自适应界面设计**:创建能够响应不同设备尺寸变化的应用程序UI结构,使得即使是在较小屏幕上也能良好展现全部功能模块而不留死角。 - **智能缩放平移支持**:允许用户手动调节查看角度以及放大缩小特定部分内容,以此达到最佳视觉效果的同时也解决了潜在的‘下溢’隐患。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值