持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
日常看前端同学开发时，总分不清为什么这里使用内/外边距，不免产生疑惑：什么情况下使用内边距？什么情况下使用外边距？那么今天我们就来看看，关于“盒子模型布局的稳定性”问题和最后一个知识点“盒子阴影！
建议优先使用顺序：width > padding > margin
- 宽度 （width）
- 使用内边距（padding）
- 外边距（margin）
这样的优先顺序好处是：
- width 暂时没有观察到明显问题
- padding 会影响盒子大小，需要进行加减计算，增加一小点使用成本
- margin 会有外边距合并，影响开发时的考虑，增加不少开发成本？
最后学习点：关于“盒子阴影”
box-shadow:水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影
对应的值，：参考图例总结
div {
width: 100px;
height: 100px;
border: 5px pink;
//box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4)
//box-shadow:水平位置、垂直位置、模糊距离、阴影大小、颜色、内/外阴影
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
特别注意：
- 以上前两个属性必须添加，而其余可选
- 把
inset删除，默认就是outset即：外阴影模式。但不能直接写outset！！
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
