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

发布于:2023-01-04 ⋅ 阅读:(230) ⋅ 点赞:(0)

一:宽高自适应

 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>

 

 

扩展:

1:display:none;不占位的隐藏

2:visibility:hidden;占位隐藏

3:

4:


网站公告

今日签到

点亮在社区的每一天
去签到