前端页面实现宽高自适应

宽高自适应

1、宽度自适应

 width:100%; // 元素宽度设置为100%。（块元素宽度默认为100%）

2、高度自适应

元素 {height : auto; } 或高度不写 

height:100%; // 子元素的高度由父元素决定 

3、最大小高宽度

min-height（最小高度）  注：height属性在IE6里就类似min-height作用。
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)

注：IE6及以下版本不识别该组属性。

既要有一定高度 当我里面超出所给高度的时候盒子能自动撑开

4、自适应窗口（一屏页面的写法）

如果想要盒子的大小等于当前屏幕的大小(元素的宽高度自适应窗口高度)

html,body{
	width:100%;
	height:100%;
}

5、宽度自适应

块元素不设width 或者width:100%,内容的宽度跟随父元素的宽度变化而变化

高度自适应:
	父元素不设高度或者height:auto (父元素的高度由内容决定)
	min-height:最小高度(iE6以下浏览器不支持)
		1.当内容的高度过小时，父元素有一个固定的高度
		2.当内容的高度大于父元素的高度，让父元素内容的高度为准

如果当前需要考虑IE6浏览器
第一种

min-height：500px；
_height:500px;

第二种

height:500px;
height:auto !important;
min-height:500px;

总结

以上是对前端页面实现宽高自适应的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌