多列布局 && 响应式布局

最新推荐文章于 2024-04-29 21:14:52 发布

阿茶阿茶

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量174

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/Flora_hsx/article/details/129017007

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：多列布局，应用瀑布流

1：column-count

属性规定元素应该被分隔的列数

2：column-gap

属性规定列之间的间隔大小

3：column-rule

设置或检索对象的列与列之间的边框。复合属性。

<style>
        div{
            height: 300px;
            background-color: yellowgreen;

            /*  控制显示的列数 */
            column-count: 3;

            /*  列与列之间的间距 */
            column-gap: 50px;

            /*  列的边框  */
            column-rule: 2px solid red;

            /*  控制列 高度统一属性  */
            column-fill: balance; 

            /*  设置为auto，则会先将父盒子高度占满，再换列  */

            /*  调整列宽   */
            /* column-width: 300px; 
               应用较少*/

        }

        div>h1 {
            /*  跨列属性   加给盒子里的项目  */
            column-span: all;
            text-align: center; /*  居中 */
        }
    </style>

补充知识点：

1：break-inside：avoid；不允许盒子内部进行折行。

二：响应式布局

几个设计显示原则：

关键点：

关键字：and，not(排除)，only(仅限)

三：横竖屏的检测

横屏检测：orientation：landscape

竖屏检测：orientation：portrait

四：响应式布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .top{
            display: flex;  /* 弹性盒 */
            flex-wrap: wrap;  /* 折行  */
            justify-content: space-between; /* 两端对齐  */
        }

        .top>div {
            width: 49%;
        }

        .top img{
            width: 100%;
        }
        
        .right{
            display: flex;
            justify-content: space-between;
        }

        .right>div{
            width: 49%;
        }

        @media screen and  (max-width:6000px) {
            .top>div{
                width: 100%;
            }
            
        }

        .bottom{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .bottom>div{
            width: 23%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gray;

            margin-bottom: 10px;
            box-shadow: 0 0 5px black;
        }

        .bottom img{
            width: 100%;
        }

        /* .bottom p{
            font-size: 200px;
        } */

        @media screen and (max-width:6000px) and (min-width:4500px) {
            .bottom>div{
                width: 31%;
            };
        }

        @media screen and (max-width:4500px) and (min-width:3000px) {
            .bottom>div{
                width: 48%;
            };
        }
        @media screen and (max-width:3000px) {
            .bottom>div{
                width: 100%;
            };
        }

    </style>
</head>
<body>
    <!-- 
        top部分，6000px为分界点
        >6000px： 左与右 各占一半，占一行  49%  剩余的1%分间隙
        <6000x：左边 100%，右边100%，折行
        选择弹性盒设计
     -->
     <div class="top">
        <div class="left">
            <img src="/photo/pic1.png" alt="">
        </div>

        <div class="right">
            <div class="p1">
                <img src="/photo/pic2.png" alt="">
            </div>
            <div class="p2">
                <img src="/photo/pic3.png" alt="">
            </div>
        </div>
      </div>

     <!-- 
        >6000：一行4个  各25%
        6000-4500  一行3个  33.33%
        4500-3000   一行2个   50%
        <3000     一行1个   100%
      -->

      <div class="bottom">
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
        <div>
            <img src="/photo/pic4.png" alt="">
            <p>微摄影展</p>
        </div>
      </div>
</body>
</html>