08-CSS中的宽高自适应
CSS 中的宽高自适应
什么是自适应
不同大小设备呈现同样的页面效果,只是文字、图片等的大小不一样,但是相对位置一样
CSS 中的宽高
宽高的默认值
宽度的默认值100%,就是和父级元素等宽
高度的默认值auto,将由它的子元素的高来决定,也就是说会子元素会撑开父级元素
宽高的最值
宽度的最大值 max-width
宽度的最小值 min-width
高度的最大值 max-height
高度的最小值 min-height
注意:IE6及以下版本不识别该组属性
微信聊天案例
宽高的自适应
1、非浮动元素的父元素高度自适应
不设置高度,高度默认由子元素内容撑开 height: auto;
通过最小高度实现高度自适应 min-height:___px;
height: auto; min-height:___px;
2、浮动元素的父元素高度自适应(触发BFC)
设置全屏页面
html,body {
height: 100%;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂