CSS 基础 4 - CSS 常用单位

合集 - CSS 基础(5)

1.CSS 基础 1 - Block & Inline2023-09-27 2.CSS 基础 2 - Box Model 盒模型2023-09-27 3.CSS 基础 3 - 定位 Postion 属性2023-09-28

4.CSS 基础 4 - CSS 常用单位2023-09-28

5.CSS 基础 5 - CSS 选择器2023-10-06

CSS 基础 4 - CSS 常用单位

px：基础单位
em：相对当前父容器的系数，可以累乘
rem：相对根 <html> 的系数，方便计算
vw/vh：viewport width/height，整个浏览器的大小，取值范围 1-100
- 如 100vh，占满高度，如果出现滚动条，是因为 body 预设的 padding 和 margin
- 如 30% 宽度的侧边栏： height:100vh;width:30vw;
vmin/vmax：屏幕短边/长边，取值范围 1-100，配合 MediaQuery，用于响应式布局、手机旋转场景
- 如 100vmin，占满短边

em 累乘效果

Reference

https://www.bilibili.com/video/BV1d441167e9

posted @ 2023-09-28 20:52 Zijian/TENG 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步

相关博文：

· CSS 基础 1 - Block & Inline

· CSS 基础 3 - 定位 Postion 属性

· CSS 常用单位

· CSS尺寸设置的单位：px、rem、em、vw、vh

· CSS 单位解析

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具