CSS overflow隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用overflow来hidden隐藏多余margin或元素</title>
    <style type="text/css">
        .pic_list_con{
            width: 958px;
            border: 1px solid #666;
            margin: 50px auto 0;
        }
        .pic_list_title{
            width: 918px;
            height: 50px;
            /*background: gold;*/
            margin: 0 auto;
            /*此处设置了之后图片应该在父集边框紧贴边缘,不过出现问题,没有能够紧贴.
            这个时候首先要查找问题在哪个元素.
            主要看自己子元素内是否有自带式样的元素.

            此处经过排查, 发现是h3自带式样,引起了top塌陷,所以导致title的div无法紧贴上方父元素.
            所以第一时间应该更改h3的默认margin!
            */
        }
        .pic_list_title h3{
            margin:0;
            /*设置margin之后,父元素也能够紧贴上级元素了!*/
            font: 18px/50px "Microsoft Yahei";
            border-bottom: 2px solid red ;
            /*此处设置了下border之后,发现h3的元素是一个块元素,border覆盖整行
            那么需要转元素:使用display或者是float;
            在此处,displayd的inlineblock 和 float所形成的效果是一样的
            不过在行内有多个行内块元素的时候,inlineblock则会有块间间隙,需要通过margin负值来消除.float则不会.
            所以通常来讲使用float会比较方便一点.
            */
            
            /*display: inline-block;*/
            float: left;
            /* 且此处文字与元素块并不是同一位置,所以要设置, 让文字在元素块偏后
            可以通过indent设置或者padding-left. 所能达到的效果在此处一模一样.
            */
            text-indent: 10px;
            /*padding-left: 20px;*/
            /*background: gold;*/

        }
        
        .pic_wrap{
            width: 918px;
            margin: 20px auto 13px;
            /*background: cyan;*/
            overflow: hidden;
        }
        .pic_list{
            list-style: none;
            width: 950px;
            padding: 0;
            margin: 0px;
            /*background-color: gold;*/
            /*overflow: hidden;*/
        }
        .pic_list li{
            width: 160px;
            height:68px;
            margin: 0;
            float: left;
            /*此时设置块元素的时候会导致,底栏塌陷,清除浮动*/
            /*clearfix可以使用.
            但在此处,使用overflow更为方便.因为overflow的hidden缺陷在于会隐藏定位元素, 而此时没有定位元素.
            所以在父集设置overflow    
            */
            margin: 0 29px 25px 0px;

            /*到此处,发现图片无法单行存在5个,因为有margin存在,于是在父集上又添加一个div元素,wrap.
            解决图片margin排版问题思路:

                1.在父集外面创建一个上级元素
                2.放大父集,使其能够容纳下足够的图片单位,不至于因为每行最后一个图片的右边margin值影响排列.
                3.在父集的上级设置overflow,hidden.隐藏多余元素.    

            */

        }


    </style>
</head>
<body>
    <div class="pic_list_con">
        <div class="pic_list_title">
            <h3>图片列表</h3>
        </div>
        
        <!-- sublime -->

        <!-- div.pic_wrap>ul.pic_list>(li>a[href="#"]>img[src="images/goods.jpg" alt="商品图片"])*10 -->

        <!-- sublime中, 创建元素的时候可以通过
        {} 大括号添加元素内容
        [] 中括号添加属性内容,  例如 src, alt 等等
        () 用来框住批量创建时候的语法.
        $  美元符号可以让其自动生成顺序常数.
         -->

        <div class="pic_wrap">
            <ul class="pic_list">
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
                <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
            </ul>
        </div>

    </div>
</body>
</html>

 

posted @ 2019-08-13 16:41  Jrri  阅读(894)  评论(0编辑  收藏  举报