CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

html-css027

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?,第1张

参数是 scroll 时候,必会出现滚动条;

参数是 auto 时候,子元素内容大于父元素时出现滚动条;

参数是 visible 时候,溢出的内容出现在父元素之外;

参数是 hidden 时候,溢出隐藏

可以多看看黑马程序员的课程,多学学这些基础知识。

CSS之overflow属性有四个值:visible

(默认),

hidden,

scroll,

和auto。同样有两个overflow的姐妹属性overflow-y

和overflow-x,它们很少被采用。让我们分别看一下这几个值,并讨论一写共同用法和技巧。

Auto

overflow的auto值很像scroll,它唯一解决的是在你不需要的时候也会出现滚动条的问题。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容,而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此,请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。

比如有的用户设置他们的浏览器的默认字体比你预期的要大些,你会将一些文字推到盒子的外面然后完全的隐藏之……

Visible

如果你不设置overflow属性,则默认的overflow属性值就是visible。所以一般而言,并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是,尽管盒子外面的内容是可见的,内容并不会影响页面的工作流。一般来说,你至少不用为里面的内容为文字的盒子设置固定的高度,这样就不会遇到这种情况了。

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容,但是它将会提供一个滚动条在盒子内部滚动,从而可以查看剩下的内容。值得注意的是,使用scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中一个。

溢出就是你设置的样式表现出来的东西超出了你的本意,比如一个盒子里面的内容本来应该包含在盒子里面,但是它不小心超出了范围,从盒子里面延伸出去了,破坏了页面的美观,所以用溢出隐藏把多余的部分隐藏掉。

css代码:

.box {width:200pxheight:30pxline-height:30pxbackground-color:#cdd/*overflow:hidden*/ }

html代码:

<div class="box">我溢出了我溢出了我溢出了我溢出了你能把我怎么样</div>

你可以看看加了overflow:hidden和不加这句的区别