宽高自适应
网页布局中经常要定义元素的宽和高。但是很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应
元素自适应在网页布局中非常重要,他能够使网页显示更加灵活,可以适应在不同设备、不同窗口和不同分辨率下显示
1.宽度自适应
元素宽度设置为100%(块元素宽度默认为100%)
2.元素具备最小高度的自适应
min-height属性:最小高度:可以让 内容少的时候仍然保持一定的高度
其他属性:
min-height(最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
3.高度自适应
- 元素高度自适应窗口高度
设置方法:html,body{height:100%}
需要自适应的元素:height:100%; - 自适应元素高度:
父元素:height:value
需要自适应父元素高度的子元素:height:100%;
height:auto是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度
最后提一句图片整合…
一般比较大的网站可能需要用,主要原理就是把许多图片整合成一张,比如许多小图标,把他们合在一张图上 ,然后布局的时候利用background-position属性来对图片进行移动,实现想要的布局效果,这样做可以减少图片体积,还可以降低服务器响应次数