首页 前端知识 HTML自适应

HTML自适应

2024-08-27 09:08:43 前端知识 前端哥 338 915 我要收藏

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

  1. 宽度自适应:元素高度的默认值auto
<body>
    <div></div>
</body>

<style>
	div{
	  /* width: 100px; */
	  width: auto;  /* 不写或者auto才叫自适应*/
	  /* width: 100%; */
	  padding-left: 100px;
	  height: 100px;
	  background-color: aquamarine;
	}
</style>
  1. 高度自适应:元素高度的默认值{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>
  1. 窗口自适应:盒子根据窗口进行大小改变
    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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16952.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!