CSS Overflow:hidden

来源：互联网发布：公交车gps 大数据分析编辑：程序博客网时间：2024/05/17 21:59

终于知道为什么要设置OverFlow:Hidden了，看代码：

<div id="wrapper">    <figure class="img-wrapper">        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/1973147/studiojq2015_explore62_1x.jpg" draggable="false">        <figcaption>            <h1 class="title">Hover Design Interaction</h1>            <div class="bottom detail">                <p>Some little detail here, things about the designs summary lorem anything related just to make this look long text.</p>                <ul class="social-icons">                    <li><a class="fa facebook" href="#"></a></li>                    <li><a class="fa dribble" href="#"></a></li>                    <li><a class="fa twitter" href="#"></a></li>                    <li><a class="fa behance" href="#"></a></li>                </ul>            </div>        </figcaption>    </figure></div>

#wrapper{    position: absolute;    width: 100%;    height: 100%;}.img-wrapper{    width: 350px;    background: #3498db;    overflow: hidden;}

如果不设置OverFlow:Hidden, wrapper会默认伸开到图片的大小。

如果设置了，那么图片就会剪切到wrapper的宽度。

0 0