css overflow属性是什么意思

html-css034

css overflow属性是什么意思,第1张

css overflow属性定义了元素处理溢出内容的方式https://www.apiref.com/css-zh/properties/layout/overflow.htm

visible：

对溢出内容不做处理，内容可能会超出容器。

hidden：

隐藏溢出容器的内容且不出现滚动条。

scroll：

隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。

auto：

当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。

clip：

与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。

朋友，overflow具体如何定义溢出内容，要看你给定的值来具体处理。

overflow：visible，这个就是默认值。内容不会被修剪，会呈现在元素框之外。

overflow：hidden，这个值代表的是内容会被修剪，并且其余内容是不可见的。 

overflow：scroll，这个值代表内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow：auto，这个代表如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow：inherit，这个代表规定应该从父元素继承 overflow 属性的值。

这些值才是overflow处理溢出内容的关键，根据需求设置不同的值即可。

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

css代码：

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

html代码：

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

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