overflow属性定义了当子元素超越了包含它的元素时,子元素的显示方式。如果内容太多,overflow属性说明内容是否显示以及如何显示。
overflow属性有4个可能值:
- visible:内容未被剪切,显示在元素外;
- hidden:内容被剪切,但是浏览器不显示滚动条,无法看到剩余的内容;
- scroll:即使有足够空间显示全部内容,浏览器也显示滚动条;
- auto:如果内容太多,浏览器将显示滚动条以查看剩余内容;
下面我们就看看每个值会产生的效果:
overflow:auto; |
overflow:hidden; |
overflow:visible; |
overflow:scroll; |
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
|
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
|
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
|
所有的框模型按文档中正常的元素流定位。
|
关于布局的内容基本上就这些了吧,还有一些高级的特性就需要大家自己学习积累、使用才是王道!
分享到:
相关推荐
布局其他属性 布局其他属性 overflow属性可以解决溢出问题,其基本语法格式如下: 选择器{overflow:属性值;} overflow属性的常用值有四个,具体如下表所示。 属性值 描述 visible 内容不会被修剪,会呈现在元素框...
布局及常用属性 布局概述 为什么要应用布局? 布局概述 阅读报纸时会发现,虽然报纸中的内容很多,但 是经过合理地排版,版面依然清晰、易读。 1.确定版心 什么是版心?以某教育网站首页为例: 布局概述 布局概述 2....
1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......
DIV+CSS 网页布局第二篇:两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。 当元素使用了浮动之后,会对周围的元素造成影响,那么就...
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐。 <div class=box> <div class=demo> <div>1</div> <div>2</div> ...
CSS div布局有很多的注意事项,比如大的div里面长宽给定,内部又存在一个新的div,这个div不能完全放在父div中。那么就会overflow、float出来的div不占文档流等等
CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。 CSS float 属性 float浮动属性,用于设置标签对象(如:div、span、a、em等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左...
示例描述:本章演示用DIV布局。 div布局.html 演示div布局实例。 层嵌套.html 层嵌套的用法。 table布局.html 演示table布局。 DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html ...
CSS 布局 – Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px ...
CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这个元素尺寸。 但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方: 那有什么办法...
以最普遍的DIV三列布局来说,想实现三列等高布局,可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下: HTML代码: 复制代码代码如下: <div id=”container”> <div id=”left”> 左侧</p> ...
2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; ——缺点是火狐浏览器实现效果不好,...
属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出可见 2.hidden 隐藏的,溢出的内容全部隐藏,不可见溢出 3.scroll 显示滚动条,溢出时可用 4.auto 自动,溢出时自动显示滚动条...
复制代码代码如下: <div class=”wrap”> <div class=”main”> <div class=”content”></div> </div> <div class=”submain”>2</div> <div class=”sidebar”>3</div> </div> 复制代码代码如下: .wrap{width: ...
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容. ...
box1:实现两列多行布局 <li>111 <li>222 <li>333 </div> CSS: .box1 { width: 500px; background: #EEEEEE; } .box1 ul { clear: both; overflow: hidden; } .box1 ul li { width: 48%; height: 100...
在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的...
本题目采用方法:即在其中的某个div的css中增加overflow:hidden;(OVERFLOW:hidden—这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.要注意的是,...