Web前端入门到精通|CSS盒子模型-常问面试题
2022-12-04 08:33 作者:bili_170178778 | 我要投稿
HTML和CSS基础学不好，后面会越来越乱，所以我花了很多时间，就为了弄懂最常用又最容易搞错的Box Model盒子模型。
.
所有网站元素都是 Box 盒子，CSS有一个盒子模型，看得我好辛苦啊。
.
所以，我就用了另一个比喻——别墅——帮我记住到底padding，margin等怎么分。
.
别墅有什么？有房子，有庭院，有围栏，别墅之间还有小道。刚好对上content, padding, border, margin。
.
图片笔记不够写了，我这里再加一些小备注：
- Padding 是对自身的修改，而Margin是对外部的设置。
- 还有的说，父子之间用padding，兄弟之间用margin。
- Margin是透明的，不能添加背景颜色。但它可以显示元素的背景，比如body。
- Margin 不能叠加，而是看两者哪个值最大。什么意思呢？比如，两个上下相邻的元素，一个margin-bottom是20px，另一个margin-top是40px，那它们之间的距离不是60px，而是40px（取两者最大值）。（这种情况叫做Collapsing Margin）
