100%：使得html的height与屏幕的高度相等；
50%：使得html的height等于屏幕的一半；
若想让一个<div>的高度与屏幕高度自适应，始终充满屏幕，需要从html层开始层层添加height=100%
<html>元素没有margin和padding
<body>元素有margin没有padding
因此让body占满屏幕的代码是
注：因为html,body元素的width默认就是100%,因此在里面的div 设定width=100%时就能和屏幕等宽
html{
height:100%;//让html的高度等于屏幕
body{
height:100%;
margin:0;
而html,body元素的高度height默认是auto,因此要想让div和屏幕等高，需要改变html和body的height值
&lt;html&gt;元素的高度默认是auto，被内容自动撑开；100%：使得html的height与屏幕的高度相等；50%：使得html的height等于屏幕的一半；若想让一个&lt;div&gt;的高度与屏幕高度自适应，始终充满屏幕，需要从html层开始层层添加height=100%&lt;html&gt;元素没有margin和padding&lt;body&gt;元素有...
在如今响应式
布局的要求下，很多能自动调整尺寸的元素能够做到高宽自
适应，如img，通过{width:50%;height:auto;}
实现图片
高度跟随宽度比例调整。
然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的
高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。
要
实现这种功能（div的
高度：宽度=1:1），通过各种加Buff，得知有以下几种处理方式
1，直接指定div的宽高+zoom来
实现自
适应
div{width:50px;heigth:50px;zoom:1.1;}
这种方法使用了background-size属性，将背景图片的大小设置为cover，这样可以保持图片不失真地
适应屏幕大小。同时，使用background-position属性将图片居中显示，并使用background-repeat属性禁止图片重复。
2. 使用img标签和
CSS样式
```html
<div class="image-container">
<img src="image.jpg" alt="Image">
```
css
.image-container {
width: 100%;
height: auto;
.image-container img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
这种方法使用了img标签和
CSS样式来
实现图片自
适应屏幕大小。首先，将图片放置在一个
容器div中，设置
容器的宽度为100%，
高度为auto，这样
容器会根据图片的宽高比自动调整
高度。然后，使用
CSS样式将图片的宽度设置为100%，
高度设置为auto，并设置display为block，使图片居中显示。
