CSS的几个常用布局

Guoyeting020
58 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

布局

flex布局

    <style>
        .father{
            display: flex;
            justify-content: space-around;
            width: 300px;
            height: 300px;
            border: 10px solid yellowgreen;
        }
        .son{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: grey;
        }
        .son:nth-child(2){
            align-self: center;
        }
        .son:nth-child(3){
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <!-- 父元素：
    flex-direction : 决定主轴方向，默认水平
    justify-contant : 主轴的排列方式
    align-items : 交叉轴的排列方式
    flex-wrap : 是否换行

    子元素：
    align-self : 子元素在交叉轴上的对齐方式,会覆盖align-items属性
    -->
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

image.png

圣杯布局

paddign-left + padding-right + margin-left + margin-right + position

    <style>
        .header,
        .footer {
            background: rgba(29, 27, 27, 0.726);
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .contant {
            /* 给left，right留出位置 */
            padding-left: 100px;
            padding-right: 55px;
        }

        .contant .box {
            float: left;
            text-align: center;
            height: 100px;
            line-height: 100px;
        }

        .contant .main {
            width: 100%;
            background: rgb(132, 228, 94);
        }

        .contant .left {
            position: relative;  /*定位，靠着最左边*/
            right: 100px;
            width: 100px;
            margin-left: -100%; /*移动,回到上一行左侧*/
            background: orange;
        }

        .contant .right {
            width: 55px;
            margin-right: -55px;
            background: orangered;
        }

        .footer {
            clear: both;   /* 清除浮动 */
        }
    </style>
</head>

<body>
    <h2>圣杯布局</h2>
    <div class="header">#header</div>

    <div class="contant">
        <div class="main box">main</div>
        <div class="left box">left</div>
        <div class="right box">right</div>
    </div>
    <div class="footer">#footer</div>

</body>

image.png

双飞翼布局

圣杯布局，双飞翼布局一般用于PC端网页布局
1、 两侧内容宽度固定，中间内容自适应；
2、 三栏布局，中间一栏先加载，渲染出来（主要内容）

双飞翼不同：在main盒子预留左右空间 + margin-left + margin-right

    <title>双飞翼布局</title>
    <style>
        .box{
            float: left;
            text-align: center;
        }
        .main {
            width: 100%;
            background: grey;

        }
        .main .wrapper{
            margin-left: 50px;
            margin-right: 100px;
        }
        .left {
            width: 50px;
            margin-left: -100%;
            background: orange;
        }
        .right {
            width: 100px;
            margin-left: -100px;
            background: yellow;
        }
    </style>
</head>

<body>
    <h2>双飞翼布局</h2>
    <div class="main box">
        <div class="wrapper">main</div>
    </div>
    <div class="left box">left</div>
    <div class="right box">right</div>
</body>

淘宝常用布局 image.png

响应式布局

rem (root em) 是一个相对单位
em是相对于父元素字体大小; rem的基准是相对于html元素的字体大小
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px

关于媒体查询和rem单位

<style>
        /* iPhone5（宽度为320px） */
        @media only screen and (max-width:375px) {
            html {
                font-size: 85px;
                background-color: blueviolet;
            }
        }

        /* iPhone6/7/8 或 iPhone x（宽度为375px） */
        @media only screen and (min-width:376px) and (max-width:413px) {
            html {
                font-size: 100px;
                background-color: blue;
            }
        }

        /* iPhone6/7/8 plus */
        @media only screen and (min-width:414px) {
            html {
                font-size: 120px;
                background-color: yellow;
            }
        }

        .box {
            width: 1rem;
            font-size: 0.16rem;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <!-- rem + 媒体查询 -->
    <div class="box">
        媒体查询
    </div>
</body>

rem布局（移动端）

巧用 vw单位 ： 把可视化屏幕的宽度平均分成100份

用rem和vw配合使用，就会使页面布局更为优化，改善使用体验感。

    <style>
        html{
            /* font-size: 16px; */
            /*用 vw 替换 px */
            /* 100vw   375px */
            /* a？     100px */
            font-size: 26.66667vw;
            /* 如果切换屏幕:动态改变字体大小*/
            /* 100vw     414px */
            /* 26.66667vw    ？px（>100px） */
        }
        .box{
            font-size: 0.16rem;
        }
    </style>
</head>
<body>
    <div class="box">
        动态改变大小
    </div>
</body>
avatar
文章
阅读
粉丝