点赞 关注 收藏 学会了整理了一个「前端调试小专栏」有兴趣的工友可以关注一下 《前端Debug不求人》在刚开始写 CSS 时我们经常会用到百分比%来实现响应式布局。但在这个过程中有一个非常经典且常常让初学者感到“反直觉”的隐藏规则当元素的 margin外边距或 padding内边距的值被设置为百分比时无论方向是水平左右还是垂直上下它们的计算基准都是其父元素容器的宽度是的你没有听错。哪怕是margin-top或者padding-bottom它们计算时参考的也是父元素的宽度而不是高度。垂直方向的外边距margin-top假设我们有一个父元素.p它的宽度是 100px高度是 200px。里面包含一个子元素.c并且我们给子元素设置了margin-top: 50%。很多初学者会误以为margin-top是基于父元素的高度200px来算的从而得出 100px 的结果。但实际上它是基于父元素的宽度100px来计算的100px * 50% 50px。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title百分比 Margin 测试/titlestyle/* 父元素 */.p{width:100px;height:200px;background-color:#e0e0e0;/* 灰色背景方便观察 */border:1px solid #333;position:relative;/* 使子元素的 margin-top 以父元素为参考 */}/* 伪元素用于显示父元素高度 50% 的位置在哪 */.p::after{content:50%;position:absolute;top:100px;left:0;width:100%;height:1px;background:red;display:flex;align-items:center;justify-content:center;color:#333;}/* 子元素 */.c{margin-top:50%;/* 实际计算结果为父元素宽度 100px 的 50%即 50px */background-color:#ff7675;/* 红色背景 */color:white;text-align:center;}/style/headbodydivclasspdivclassc子元素 c/div/div/body/html经典的等比例缩放黑科技保持 1:1 宽高比由于padding-bottom或padding-top设置为百分比时也是基于父元素的宽度前端老手们经常利用这个特性来创建一个可以随屏幕大小缩放但始终保持固定比例比如 1:1 正方形、16:9 视频框的元素。以创建一个 1:1 的正方形为例由于width: 100%等于父元素的宽度而padding-bottom: 100%也等于父元素的宽度这样就在视觉上撑出了一个完美的正方形!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title百分比 Padding 等比例测试/titlestyle/* 限制一下外层容器的宽度方便观察缩放 */.container{width:300px;/* 你可以尝试修改这个宽度里面的正方形会自动跟着变大变小 */margin:50px;border:2px dashed #0984e3;}/* 核心逻辑利用 padding 撑开高度 */.ratio{width:100%;padding-bottom:100%;/* 高度由基于宽度的 padding 撑开实现 1:1 */background-color:#74b9ff;/* 注意因为内容区高度实际为0如果里面要放文字或图片 通常需要配合相对/绝对定位来实现 */position:relative;}/* 如果要在等比容器里放内容通常这么做 */.ratio-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;}/style/headbodydivclasscontainerdivclassratiodivclassratio-content我是一个 1:1 的正方形/div/div/div/body/html以上就是本文的全部内容啦想了解更多前端调试玩法欢迎关注《前端Debug不求人》点赞 关注 收藏 学会了