宽高自适应

宽高自适应

网页布局中经常要定义元素的宽和高。但是很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
元素自适应在网页布局中非常重要，他能够使网页显示更加灵活，可以适应在不同设备、不同窗口和不同分辨率下显示

1.宽度自适应

元素宽度设置为100%（块元素宽度默认为100%）

2.元素具备最小高度的自适应

min-height属性：最小高度：可以让 内容少的时候仍然保持一定的高度

其他属性：

min-height（最小高度）
max-height（最大高度）
min-width（最小宽度）
max-width（最大宽度）

3.高度自适应

1. 元素高度自适应窗口高度
   设置方法：html,body{height:100%}
   需要自适应的元素：height:100%;
2. 自适应元素高度：
   父元素：height：value
   需要自适应父元素高度的子元素：height:100%;
   height:auto是指根据块内内容自动调节高度。
   height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度

最后提一句图片整合…
一般比较大的网站可能需要用，主要原理就是把许多图片整合成一张，比如许多小图标，把他们合在一张图上 ，然后布局的时候利用background-position属性来对图片进行移动，实现想要的布局效果，这样做可以减少图片体积，还可以降低服务器响应次数

来源：CSDN

作者：风华正茂呀

链接：https://blog.csdn.net/weixin_42149770/article/details/104357360