HTML自适应

最新推荐文章于 2023-12-29 13:36:06 发布

Minerva0920

最新推荐文章于 2023-12-29 13:36:06 发布

阅读量2.2k

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_45309116/article/details/128578099

版权

何为自适应：
网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应

宽度自适应：元素高度的默认值auto

<body>
    <div></div>
</body>

<style>
	div{
	  /* width: 100px; */
	  width: auto;  /* 不写或者auto才叫自适应*/
	  /* width: 100%; */
	  padding-left: 100px;
	  height: 100px;
	  background-color: aquamarine;
	}
</style>

高度自适应：元素高度的默认值{height: auto;}

<body>
    <div class="header"></div>
    <div class="body">
        <ul>
            <li>11111111</li>
            <li>11111111</li>
            <li>11111111</li>
        </ul>
    </div>
    <div class="footer"></div>
</body>

<style>
   *{
      margin: 0;
      padding: 0;
    }
   .header, .footer{
      height: 100px;
      background-color: blue;
    }
   .body{
      /* height: 600px; */
      min-height: 500px;
      background-color: green;
    }
    li{
       height: 100px;
       max-width: 500px;
       margin: 0 auto;
       background: saddlebrown;
    }
</style>

窗口自适应：盒子根据窗口进行大小改变
html, body{ height: 100%; }

<body>
    <div class="box">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>

<style>
    *{
        padding: 0;
        margin: 0;
     }
    .box{
        width: 100%;
        height: 100%;
        background: salmon;
     }

     html, body{
         height: 100%;
     }
     /* 窗口自适应加上此段 */

    .child1{
          height: 50%;
          background: aquamarine;
     }
    .child2{
          height: 50%;
          background: rgb(45, 50, 48);
     }
  </style>