溢出的目的是什么:隐藏;服务?

时间:2011-10-02 16:28:57

标签: css

我的网页中间有一个标题区域。然后元素是标题的一部分。有人可以解释溢出的内容:隐藏;在这里。我不明白为什么我需要它或它做什么。

谢谢,

#hdr_mdl {
    margin: 0 auto;
    overflow: hidden;
    width: 980px;
    z-index: 10;
    height: 50px; 
}

6 个答案:

答案 0 :(得分:5)

overflow:hidden可防止滚动条显示,即使它们是必要的。

CSS的解释:

  • margin: 0 auto水平对齐中心的元素
  • overflow:hidden阻止滚动条显示
  • width:980px将元素的宽度设置为980px
  • z-index:10会导致元素停留在元素之上而没有定义的z-index,*或 - 元素,其中z-index低于10,元素a z-index为10,但在当前元素之前定义
  • heigh:50px - 身高50px

答案 1 :(得分:0)

如果#hdrPmdl中的内容溢出超过50px,则不允许浏览器将滚动条插入DIV。如果DIV不包含动态内容并且大小将始终保持静态,那么可能不需要它,因为内容不会是> 50像素

答案 2 :(得分:0)

overflow属性的说明:CSS overflow Property

overflow属性的互动示例:Play it

答案 3 :(得分:0)

overflow指定当内容更大而不是块尺寸时,浏览器应该执行的操作。 overflow:hidden表示“隐藏它并保留初始块尺寸”。

答案 4 :(得分:0)

如果您对特定内容使用隐藏溢出而不是为此内容剪切溢出,则其余内容将不可见。为了清楚这件事,请访问w3school http://www.w3schools.com/cssref/pr_pos_overflow.asp

答案 5 :(得分:0)

overflow: hidden 添加到容器元素时,它会隐藏不适合容器的子元素。
示例:

.overflowhidden {
 background: green;
 width: 10rem;
 height: 10rem;
 overflow: hidden;
}
<div class="overflowhidden">
 This container has the style overflow:hidden. Text that does not fit becomes hidden. This is a very long sentence of text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text even more text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text this is the end of the sentence.
</div>