`
liyiye
  • 浏览: 415701 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Css+Div布局学习(五)—overflow属性

阅读更多

overflow属性定义了当子元素超越了包含它的元素时,子元素的显示方式。如果内容太多,overflow属性说明内容是否显示以及如何显示。

overflow属性有4个可能值:

  • visible:内容未被剪切,显示在元素外;
  • hidden:内容被剪切,但是浏览器不显示滚动条,无法看到剩余的内容;
  • scroll:即使有足够空间显示全部内容,浏览器也显示滚动条;
  • auto:如果内容太多,浏览器将显示滚动条以查看剩余内容;

下面我们就看看每个值会产生的效果:

overflow:auto; overflow:hidden; overflow:visible; overflow:scroll;
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。
所有的框模型按文档中正常的元素流定位。

 

关于布局的内容基本上就这些了吧,还有一些高级的特性就需要大家自己学习积累、使用才是王道!

分享到:
评论

相关推荐

    使用HTML开发商业网站-DIV+CSS布局 布局的其他属性课件.pptx

    布局其他属性 布局其他属性 overflow属性可以解决溢出问题,其基本语法格式如下: 选择器{overflow:属性值;} overflow属性的常用值有四个,具体如下表所示。 属性值 描述 visible 内容不会被修剪,会呈现在元素框...

    使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx

    布局及常用属性 布局概述 为什么要应用布局? 布局概述 阅读报纸时会发现,虽然报纸中的内容很多,但 是经过合理地排版,版面依然清晰、易读。 1.确定版心 什么是版心?以某教育网站首页为例: 布局概述 布局概述 2....

    div+css布局中常用方法总结

    1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......

    学习DIV+CSS网页布局之两列布局

    DIV+CSS 网页布局第二篇:两列布局 1、宽度自适应两列布局  两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。  当元素使用了浮动之后,会对周围的元素造成影响,那么就...

    css两端对齐之div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐。 <div class=box> <div class=demo> <div>1</div> <div>2</div> ...

    CSS div布局需要注意的两点

    CSS div布局有很多的注意事项,比如大的div里面长宽给定,内部又存在一个新的div,这个div不能完全放在父div中。那么就会overflow、float出来的div不占文档流等等

    CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。

    CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。 CSS float 属性 float浮动属性,用于设置标签对象(如:div、span、a、em等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左...

    零基础学HTML CSS源代码

    示例描述:本章演示用DIV布局。 div布局.html 演示div布局实例。 层嵌套.html 层嵌套的用法。 table布局.html 演示table布局。 DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html ...

    CSS 布局 – Overflow

    CSS 布局 – Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px ...

    纯CSS实现左右拖拽改变布局大小

    CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这个元素尺寸。 但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方: 那有什么办法...

    用CSS实现三列DIV等高布局以传达更好的视觉效果

    以最普遍的DIV三列布局来说,想实现三列等高布局,可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下: HTML代码: 复制代码代码如下: <div id=”container”> <div id=”left”> 左侧</p> ...

    div中文字内容溢出常见的解决方法

    2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; ——缺点是火狐浏览器实现效果不好,...

    css入门笔记

    属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出可见 2.hidden 隐藏的,溢出的内容全部隐藏,不可见溢出 3.scroll 显示滚动条,溢出时可用 4.auto 自动,溢出时自动显示滚动条...

    CSS三列布局两端固定宽度中间自适应

    复制代码代码如下: <div class=”wrap”> <div class=”main”> <div class=”content”></div> </div> <div class=”submain”>2</div> <div class=”sidebar”>3</div> </div> 复制代码代码如下: .wrap{width: ...

    CSS浏览器兼容性常见问题总结大全(推荐)

    DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容. ...

    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...

    CSS 网页内容换行控制

    在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的...

    IE6 两个div有间隙的问题(IE 3px bug)

    本题目采用方法:即在其中的某个div的css中增加overflow:hidden;(OVERFLOW:hidden—这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.要注意的是,...

Global site tag (gtag.js) - Google Analytics