Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS中overflow的概念和等高布局

  昨天的文章“研究下overflow:hidden中所谓overflow的概念”中说了基本布局对overflow的影响。除了基本布局之外,还有一些属性也对“溢出”的计算有影响。先来看个例子
<style>
.panel {
  width:200px;height:100px;
  border:1px solid red;
}
</style>
<div class="panel">
  blahblahblahblahblahblahblahblahblah
  次碳酸钴次碳酸钴次碳酸钴次碳酸钴次碳酸钴
</div>
  阿啦,英文溢出了,而中文没有溢出。这是因为没有空格分割的字母会被当作一个单词来解析。一般情况下,一个单词是不会分行写的。而中文是以字为单位,所以没有这个问题。要解决这个问题可以使用word-wrap让长单词换行显示。 .panel {
  width:200px;height:100px;
  border:1px solid red;
  word-wrap:break-word;
}

  上面这个问题是很常见的,解决方式也很简单。接下来还个比较不常见的问题,那就是margin的负数值对容器的影响。margin的作用是外补丁,一个元素设置了正值的margin之后,边框之外就会多出一个空白的补丁。换一种说法就是元素在容器中占的位置要算上margin。既然要算上margin,那么负值的margin就会让元素在容器内占的位置变小,而元素本身不会因为设置的负值的margin而变小。看个例子吧 <style>
.panel {
  width:200px;height:100px;
  border:1px solid red;
}
.content {
  margin-top:-10px;
  *position:relative;
}
</style>
<div class="panel">
  <div class="content">次碳酸钴</div>
</div>

  content设置了margin-top负值,那么它在容器里占的位置应该在上方减去相应的margin再开始计算,所以被减去的地方就呈现在了容器的外面。这里还有个小问题,那就是IE7-的兼容性,所以上面的样式中使用了一个hack来调整这个兼容性。在IE7-中,由margin负值导致static元素溢出的内容不会被呈现出来。static元素就是position:static;的元素,这个static也是position的默认值。兼容IE7-就要让元素脱离static状态,所以上面使用了position:relative来兼容。
  昨天的文章加上上面这两种情况,我暂时就没想到其它影响overflow的情况了,如果以后还有什么情况我会另写文章做补充。下面趁热打铁,顺便说一下和padding负值关系密切的等高布局。
  在容器内有多个子元素,他们的最小高度都根据自己的内容来调整,这时候要让这个容器内的子元素的高度都等于最高的那个子元素的高度就叫做等高布局。在表格布局时代没有等高问题,因为表格中同行的单元格本来就是等高的。在浮动布局流行起来之后就出现了这个问题。下面是等高布局的解决方法,我就不做太多说明了,如果你理解了上面对margin负值的解释就很容易理解这个代码。 <style>
.panel {
  border:1px solid red;
  overflow:hidden;
  zoom:1;
}
.left {
  float:left;
  background:#CFC;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}
.right {
  float:left;
  background:#CCF;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}
</style>
<div class="panel">
  <div class="left">
    <br/><br/><br/><br/>次碳酸钴
  </div>
  <div class="right">次碳酸钴</div>
</div>
  关于overflow的问题就说到这儿吧,谢谢大家的关注。有什么问题欢迎提出。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^