宽高自适应：

最新推荐文章于 2024-06-13 09:45:33 发布

2301_740097890

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量97

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/2301_76892837/article/details/129584460

版权

<!--

宽高自适应：

自适应：元素能够根据窗口发生变化，或者元素根据内容而变化

宽度自适应：元素不设置宽度就是宽度自适应

元素默认宽：width：auto；

思考：元素宽度自适应与元素宽度100%是否相等？同时设置margin-left：100px

不同

元素宽度自适应宽度=100px+auto=浏览器窗口宽

元素宽度100%=100px+100%>浏览器窗口宽

高度自适应：不给元素设置高度就是高度自适应

元素默认高度：height：auto

元素内部内容过少会导致容器高度太小，影响页面布局，不美观，需要给容器设置最小高度

min-height--------最小高度（常用）

max-height--------最大高度

max-width--------最大宽度

min-width--------最小宽度（常用）

窗口自适应：元素随着窗口的变化而变化，只需要一行代码实现

html,body{

height:100%;

}

两栏三栏布局：

一侧宽度固定。另一侧宽度占剩余宽度所有

方法一：宽度自适应

方法二：calc()函数

calc函数支持加减乘除，注意运算符前后需要加空格

两栏布局：

<!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;
        }
        /* 窗口自适应 */
        html,body{
            height:100%;
        }
        .lef{
            width:300px;
            height:100%;
            background-color: red;
            float: left;
        }
        /* .rig{
            height:100%;
            background-color: green;
            margin-left:300px;
        } */
        .rig{
            width:calc(100% - 300px);
            height:100%;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="lef"></div>
    <div class="rig"></div>
</body>
</html>

三栏布局：

<!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;
        }
        html,body{
            height:100%;
        }
        .lef{
            width:200px;
            height:100%;
            background-color: pink;
            float: left;
        }
        .rig{
            width:300px;
            height:100%;
            background-color: blueviolet;
            float: left;
        }
        .cen{
            width:calc(100% - 500px);
            height:100%;
            background-color: yellowgreen;
            float: left;
        }
    </style>
</head>
<body>
    <div class="lef"></div>
    <div class="cen"></div>
    <div class="rig"></div>
</body>
</html>

<!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;
        }
        html,body{
            height:100%;
        }
        .top{
            height:100px;
            background-color: red;
        }
        .bot{
            height:calc(100% - 100px);
            background-color: aqua;
        }
        .bot .lef{
            width:300px;
            height:100%;
            background-color: orange;
            float: left;
        }
        .bot .rig{
            width:calc(100% - 300px);
            height:100%;
            background-color: plum;
            float: left;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bot">
        <div class="lef"></div>
        <div class="rig"></div>
    </div>
</body>
</html>

<!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;
        }
        html,body{
            height:100%;
        }
        .top{
            height:90px;
            background-color: pink;
        }
        .bot{
            height:100px;
            background-color: red;
        }
        .cen{
            height:calc(100% - 190px);
            background-color: orange;
        }
        .lef{
            width:200px;
            height:100%;
            background-color: yellow;
            float: left;
        }
        .rig{
            width:300px;
            height:100%;
            background-color: greenyellow;
            float: left;
        }
        .centerBox{
            width:calc(100% - 500px);
            height:100%;
            background-color: plum;
            float: left;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="cen">
        <div class="lef"></div>
        <div class="centerBox"></div>
        <div class="rig"></div>
    </div>
    <div class="bot"></div>
</body>
</html>