自适应+两栏三栏布局

最新推荐文章于 2023-08-30 16:07:08 发布

YiLin_Classics

最新推荐文章于 2023-08-30 16:07:08 发布

阅读量194

点赞数

分类专栏： web前端文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/YiLin_Classics/article/details/123986291

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

自适应

宽度自适应

概念：不设置宽度的话就是宽度自适应，通常情况下，默认不设置宽度，width的取值为auto
特点：默认占父元素/屏幕的一整行
因此，宽度自适应有三种情况：

1）width：auto即不设置宽度
2）width：100%
3）不给元素添加盒子模型
因为只要添加了盒子模型，元素实现的效果不一样。
width：auto auto+内边距不会把盒子撑大
但是width：100%，100%+内边距=具体数值，比如父元素宽度为2000px，内边距为200px，那么此时的宽度为2000+200=2200px

高度自适应

  概念：给元素不设置高度，就是高度的自适应。默认的不设置高度的元素。
  使用方法：height：auto；此时的高度是有文本撑开或者子元素撑开。
  问题：添加不添加height都存在问题
          添加height的话，1）如果文本过少，留白会太多，
                                      2）如果文本过多的话，容易出现溢出效果。
 解决上面的问题，
 使用最值属性：最小最大高度
 使用的是最小高度问题：min-height,最小高度====最少就这么多了，不能比他还小了。但是超过他的话，能实现自适应高度。
 同样的，还有min-width、max-width、min-height、max-height

窗口的自适应

   在设置百分比的基础上，元素会根据窗口的大小发生改变。
   元素设置的宽度高度是需要设置成百分比，但是百分比单位有继承，继承的是父元素的大小。

html,body{height:100%;}

动态计算宽度和高度

    动态计算宽度和高度：当屏幕大小发生改变的时候，盒子有一个区域是固定的宽度。如何去求剩余的宽度
  使用了一个calc(参数1 - 参数2)函数，里面有两个参数，参数中间的运算符前后需要带空格，必须携带。
  运算符：+-*/%

除了使用calc()函数实现左右两块布局之外，还有；另外一种方法实现左右两块布局。
左边的盒子固定宽度或者高度，然后让他浮动，右边的盒子自适应+内边距。如下：

.lef{
width:200px;
height:200px;
backgroud-color:red;
float:left;}
.right{
height:300px;
bakground-color:green;
padding-left:200px}

如何实现两栏或者三栏布局

两栏布局：一左一右
三栏布局：左中右，左右固定高度，中间自适应
第一种方法：使用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: 0px;
            padding: 0px;
        }
        .lef,.reg{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .cen{
            width: calc(100% - 400px);
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="lef"></div>
    <div class="cen"></div>
    <div class="reg"></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}
        .lef,.rig{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .lef{
            float: left;
        }
        .rig{
            float: right;
        }
        .cen{
            margin:0px 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- rig一定要放在cen的前面，left的后面 -->
    <div class="lef"></div>
    <div class="rig"></div>
    <div class="cen"></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}
        .lef,.rig{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
        }
        .rig{
            top:0px;
            right: 0px;
        }
        .cen{
            margin:0px 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="lef"></div>
    <div class="cen"></div>
    <div class="rig"></div>
  
    
</body>
</html>

YiLin_Classics

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自适应+两栏三栏布局

自适应宽度自适应高度自适应窗口的自适应动态计算宽度和高度如何实现两栏或者三栏布局宽度自适应概念：不设置宽度的话就是宽度自适应，通常情况下，默认不设置宽度，width的取值为auto特点：默认占父元素/屏幕的一整行因此，宽度自适应有三种情况：1）width：auto即不设置宽度2）width：100%3）不给元素添加盒子模型因为只要添加了盒子模型，元素实现的效果不一样。width：auto auto+内边距不会把盒子撑大但是width：100%，100%+内边距=具体数值，比如
复制链接

扫一扫