16.css: overflow使用 例: 固定div大小,不让内容超出div

html-css016

16.css: overflow使用 例: 固定div大小,不让内容超出div,第1张

子元素默认是存在于父元素的内容区中,

理论上讲子元素的最大可以等于父元素内容区大小

如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容!

父元素默认是将溢出内容,在父元素外边显示,

通过overflow可以设置父元素如何处理溢出内容:

可选值:

该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条

需要水平就添加水平

需要垂直就添加垂直

都不需要就都不加

#content{width:1000pxheight:2000pxoverflow:hidden}

/* overflow:hidden 超出的内容隐藏掉 */

希望能帮到你

<div class="imglist">

<img src="img1.jpg">

<img src="img2.jpg">

<img src="img3.jpg">

</div>

<style>

.imglist img {width:60pxheight:80px}

</style>

在图片尺寸不定的情况下,不建议这样写,小尺寸的图片放大会影响图片质量,大图片缩小会占用更多无谓的带宽以及页面打开速度!

所以在图片生成的时候建议尽量统一图片尺寸~或等比压缩~