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

html-css012

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

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

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

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

参数是 hidden 时候,溢出隐藏

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

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

visible:

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

hidden:

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

scroll:

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

auto:

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

clip:

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

在外层的div固定宽高,里面的img如果你要宽度铺满

如 <div style="width:150height:200pxoverfloat:hidden"><img style="width:100%"/></div>

如果想图片高度铺满 <img style="height:100%"/>但是这样图片就不能完整显示

如果你的图片都是一样的尺寸,div设置相同比例 , <img style="width:100%height:100%"/>