css+div 小案例：图片廊_包含块 div 图例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143020484

效果展示

效果说明：鼠标划到对应的图片上时会有放大，阴影效果

css+div布局实现图片廊【跟练版】

代码展示

<body>
    <div class="container">
        <div class="content-box">
            <div class="imag-1">
                <a href=""><img src="images/12.jpg" alt="加载中..."></a>
            </div>
            <div class="imag-4">
                <img src="images/18.jpg" alt="加载中..." >
                <img src="images/29.jpg" alt="加载中..." >
                <img src="images/30.jpg" alt="加载中..." >
                <img src="images/2.jpg" alt="加载中..." >
            </div>
        </div>
    <!-- </div> -->
    <!-- <div class="container"> -->
        <div class="content-box">
        <div>
            <div class="imag-4">
                <img src="images/46.jpg" alt="加载中...">
                <img src="images/44.jpg" alt="加载中...">
                <img src="images/39.jpg" alt="加载中...">
                <img src="images/24.jpg" alt="加载中...">
            </div>
            <div class="imag-1">
                <a href=""><img src="images/45.jpg" alt="加载中..."></a>
            </div>
        </div>
        <div class="content-box">
            <div class="imag-1">
                <a href=""><img src="images/12.jpg" alt="加载中..."></a>
            </div>
            <div class="imag-4">
                <img src="images/9.jpg" alt="加载中..." >
                <img src="images/2.jpg" alt="加载中..." >
                <img src="images/13.jpg" alt="加载中..." >
                <img src="images/15.jpg" alt="加载中..." >
            </div>
        </div>
        <div class="content-box">
            <div class="imag-4">
                <img src="images/46.jpg" alt="加载中...">
                <img src="images/44.jpg" alt="加载中...">
                <img src="images/39.jpg" alt="加载中...">
                <img src="images/24.jpg" alt="加载中...">
            </div>
            <div class="imag-1">
                <a href=""><img src="images/45.jpg" alt="加载中..."></a>
            </div>
        </div>
    </div>
</body>

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #eee;
}
.container{
    width: 1200px;
    height: auto;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    padding: 15px;
}
.container:hover{
    box-shadow: 0 0 20px #ccc;
}
.container .content-box{
    width: 100%;
    height: auto;
    font-size: 0px;
} 
.container .content-box div{
    display: inline-block;
}
.container .content-box .imag-1,
.container .content-box .imag-4{
    width: 600px;
    height: 350px;
    background-color: antiquewhite;
}
.container .content-box img{
    transition-property: box-shadow;
    transition: .3s;
}
.container .content-box img:hover{
    box-shadow: 0 0 25px black;
    transform: scale(1.02);  /*悬浮放大效果*/
}
.container .content-box .imag-1 img{
    width: 100%;
    height: 350px;
}
.container .content-box .imag-4 img{
    width: 50%;
    height: calc(350px/2);
}

知识小天地

display: inline-block;

div是块级元素（block），可设宽高，但是独占一行，不能横向排列，行内元素（inline）可使元素保持在一行显示，但不能设置宽高，inline-block属性可以使两者结合，既能设置宽高，也能使元素在一行显示。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 500px;
        height: 100px;
        margin: 100px auto;
        background-color: aquamarine;
    }
    .container div{
        width: 100px;
        height: 100px;
        background-color:  magenta;
        /* border: 1px solid #eee; */
        /* display: inline-block; */
    }
</style>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

效果：

使用 inline-block 属性后发现确实可以横向排列了，但是每个div属性之间出现了空隙，这是由于空格导致的，多个只显示一个最后（不知道是不是这样~~）

解决方法：font-size: 0px;

font-size:0px; 要加在父级元素中，如果子元素中有文字，这是文字会消失，想让文字出现，可以再在子元素中重新设置 font-size。

.container{
        width: 500px;
        height: 100px;
        margin: 100px auto;
        background-color: aquamarine;
        font-size: 0px;
    }
    .container div{
        width: 100px;
        height: 100px;
        background-color:  magenta;
        /* border: 1px solid #eee; */
        display: inline-block;
        font-size: 16px;
    }
</style>
<body>
    <div class="container">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</body>