CSS特殊布局方式

最新推荐文章于 2024-11-06 09:49:17 发布

YanLingGe

最新推荐文章于 2024-11-06 09:49:17 发布

阅读量232

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/YanLingGe/article/details/121456809

版权

一.左边固定，右边自适应

（1）通过浮动和定位

通过设置padding值空出左边位置，左边定位，右边浮动

<body>
    <header>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        header{
            margin: 0;
            padding-left: 200px;
            height: 100vh;
            position: relative;
        }
        div{
            float: left;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: yellowgreen;
        }
        div:nth-of-type(2){
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }
    </style>

（2）通过宽度计算

通过calc属性直接计算宽度值

<body>
    <header>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        div{
            float: left;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100vh;
            background-color: yellowgreen;
        }
        div:nth-of-type(2){
            width: calc(100% - 400px);
            height: 100vh;
            background-color: red;
        }
</style>

（3）通过弹性盒子布局

通过设置扩张因子实现

<body>
    <header>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        header{
            display: flex;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100vh;
            background-color: yellowgreen;
        }
        div:nth-of-type(2){
            width: 200px;
            height: 100vh;
            flex-grow: 1;
            background-color: red;
        }
</style>

二.双飞翼布局（左右固定，中间自适应）

（1）通过浮动和定位

通过设置padding值空出左边右边位置，左边右边定位，中间浮动

<body>
    <header>
        <div></div>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        header{
            margin: 0;
            padding: 0;
            height: 100vh;
            position: relative;
            padding: 0 200px;
        }
        div{
            float: left;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: yellowgreen;
        }
        div:nth-of-type(3){
            width: 200px;
            height: 100%;
            position: absolute;
            right: 0;
            background-color: red;
        }
        div:nth-of-type(2){
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }
 </style>

（2）通过宽度计算

通过calc属性直接计算宽度值

<body>
    <header>
        <div></div>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        div{
            float: left;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100vh;
            background-color: yellowgreen;
        }
        div:nth-of-type(2){
            width: calc(100% - 400px);
            height: 100vh;
            background-color: red;
        }
        div:nth-of-type(3){
            width: 200px;
            height: 100vh;
            background-color: skyblue;
            
        }
</style>

（3）通过弹性盒子布局

通过设置扩张因子实现

<body>
    <header>
        <div></div>
        <div></div>
        <div></div>
    </header>
</body>
<style>
        div{
            float: left;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 100vh;
            background-color: yellowgreen;
        }
        div:nth-of-type(2){
            width: calc(100% - 400px);
            height: 100vh;
            background-color: red;
        }
        div:nth-of-type(3){
            width: 200px;
            height: 100vh;
            background-color: skyblue;
            
        }
</style>

三.微信布局

同理双飞翼布局的通过弹性盒子布局，再通过flex-direction: column;属性旋转主轴方向即可