[css] margin和padding使用的場景有哪些？

實現(xiàn)自適應的等比例矩形效果： div { padding: 50%; } div { padding: 25% 50%; } //寬高比為 2:1 的矩形效果實現(xiàn)頭圖高度天然等比例縮小效果 .box { padding: 10% 50%; position: relative; } .box > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }padding 屬性和 background-clip 屬性配合，可以在有限的標簽下實現(xiàn)一些 CSS 圖形繪制效果margin 可以實現(xiàn)很多流體布局 margin 外部尺寸實現(xiàn)等高布局 實現(xiàn)垂直居中布局from《css世界》

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] margin和padding使用的场景有哪些？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。