前端页面实现宽高自适应
宽高自适应1、宽度自适应width:100%; // 元素宽度设置为100%。(块元素宽度默认为100%)2、高度自适应元素 {height : auto; } 或高度不写height:100%; // 子元素的高度由父元素决定3、最大小高宽度min-height(最小高度)注:height属性在IE6里就类似min-height作用。max-height(最大高度)min-width(最小宽度)
·
宽高自适应
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基础知识点
文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌
更多推荐
所有评论(0)