宽高自适应

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基础知识点
文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐