CSS学习笔记八---宽高自适应 & 多栏布局

最新推荐文章于 2026-04-24 02:21:17 发布

原创最新推荐文章于 2026-04-24 02:21:17 发布 · 771 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #学习 #前端

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS中的宽高自适应策略，包括width: auto、min-height和max-width等属性的使用。同时，详细讲解了如何实现两栏和三栏布局，包括浮动元素和calc函数的应用。此外，还提到了隐藏元素的不同方法。

一：宽高自适应

1：width：auto；或者不写，才是宽度自适应；

导航栏，通栏布局通常设置宽度自适应

2：height：auto；高度自适应，根据内容多少调节高度

3：min-height：设置最小高度，这个一般用的比较多。

max-height；min-width；max-width；

4：浮动元素的高度自适应

.box::after{
    content: ""; /* 空的行内元素 */
    clear: both; /* 清浮动 */
    sidplay: block; /* 行内元素-->块元素 */
    height: 0;
    width: 0;
    visibility: hidden; /* 内容隐藏，可以隐藏content中的内容 */
}

5：窗口自适应

盒子可以根据窗口的大小进行改变。

以下为例，设置box为默认的100%宽高。

<style>
    .box{
        width: 100%;
        height: 100%;
    }

    html,body{
        height:100%
    }

</style>

二：屏幕分多栏布局（使用窗口自适应）

1：两栏布局（左栏宽度固定，右栏宽度自适应）

方案一：box1设置浮动，box2设置margin-left，将box1浮动占的weight空出来
方案二：box2使用calc函数计算weight，box1设置左浮动，box2设置右浮动

<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box1{
        height: 100%;
        weight: 200px;
        background: red;
        /* float: left; */
    }

    .box2{
        height: 100%;
        background: yellow;
        /* margin-left: 200px; */
        /* width: calc(100% - 200px); */
        /* float: right; */
    }

    html,body{
        height: 100%;
    }

/* 方案一：box1设置浮动，box2设置margin-left，将box1浮动占的weight空出来 */
/* 方案二：box2使用calc函数计算weight，box1设置左浮动，box2设置右浮动*/

</style>

扩展知识点：

2：三栏布局1（左、右两栏宽度固定，中间栏自适应）

<style>
    *{
        margin: 0;
        padding: 0;
    }

    html,body{
        height: 100%;
    }

/**********************************/

    .left,.right{
        height: 100%;
        weight: 200px;
    }

    .left{
        background: yellow;
        /* float: left; */
    }

    .right{
        background: red;
        /* float: right; */
    }

    .center{
        height: 100%;
        background: yellow;

        /* margin-left: 200px; */
        /* margin-right: 200px; */

        /* width: calc(100% - 400px); */
        
    }

</style>
<body>
    <div class="left"></div>
    <div class="right"></div> 
    <div class="center"></div>
</body>

方案一：left,right设置浮动，center设置margin-left & margin-right，将left,right浮动占的weight空出来
注：此方案需要注意body中right和center的顺序，center未设置浮动，为块元素，如果center在right前，则right无法和center在同行显示。

方案二：center使用calc函数计算weight，left，center设置左浮动，right设置右浮动

3：三栏布局2（上、下栏高度固定，中间栏高度自适应）

<style>
    *{
        margin: 0;
        padding: 0;
    }

    html,body{
        height: 100%;
    }

/**********************************/

    .top,.bottom{
        height: 50px;
        weight: 100%;
        background: #ccc;
    }

    .middle{
        width: 100%;
        background: yellow;

        height: calc(100% - 100px);

        /* margin-left: 200px; */
        /* margin-right: 200px; */ 
    }

    .left,.right{
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }

    .center{
        width: calc(100% - 200px);
        height: 100&;/* 此处为父盒子高度的100% */
        background: blue;
        float: left;
    }

</style>
<body>
    <div class="top"></div>
    <div class="bottom">
        <div class="left"></div>
        <div class="center"></div> 
        <div class="right"></div>
    </div> 
    <div class="middle"></div>
</body>