前端知识点之overflow属性的用法

如果你没有设置一个盒子的 高度,该盒子的高度将根据他容纳的内容的需要进行增长;

但是当你给盒子指定一个高度或者宽度而里面的内容超出的时候可以用到overflow,又或者想让浮动元素撑起

包含块的时候也可以使用overflow属性;

overflow属性:

其有四个值:visible(默认),hidden,scroll,auto;

visible:

默认的overflow属性值就是visible,

注意:盒子外面的内容是可以见到的,内容不会影响页面的工作流,

(一般来说,可以部位里面的内容为文字的盒子设置固定的宽度)

hidden:

默认值visible的相反的属性值就是hidden,

它会将所有超出盒子的内容都给隐藏掉;

scroll:设置一个盒子的overflow属性的值为scroll,将会隐藏掉渲染到盒子外面的内容,

但是他将会提供一个滚动条,在盒子的内部进行滚动,从而可以查看剩余的内容;

auto:

overflow的属性值auto值与scroll很像,就是可以在不需要滚动条的时候 也会出现滚动条;


overflow的作用:

清除浮动,应用了overflow的元素将会扩展到他需要的大小,以包围它里面的滚动的子元素;

猜你喜欢

转载自blog.csdn.net/Endl_1998/article/details/82942585
今日推荐