盒模型中margin和padding

CSS盒模型中
1.padding和border变化会使盒子的整体发生变化,若不想发生变化则用
box-sizing:border-box;

2.margin的变化会引起盒子发生位移,
但在处理父子关系的盒子中水平方向的margin可以使用,垂直方向的margin不能使用,因为会导致父盒子跟着变化,如何处理呢?给父盒子加一个边框即可;
但兄弟关系中水平方向和垂直方向的margin都可以使用(好神奇)。

而且只能使用margin-top和margin-left;margin-bottom和margin-right无效(暂时不知道为啥、记住就好)。
还有一个,在嵌套关系中(也就是父子关系),用margin:0 auto;
可以水平居中,垂直方向无效(就算设置auto auto也没毛用),垂直方向只能用具体数值表示。

3.margin本质上是用来控制兄弟之间的关系的,不是用来控制父子关系的。
padding才是用来控制父子关系的。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,190评论 5 15
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,916评论 0 6
  • 人体疾病与脊柱错位关系一览表(脊柱疗法通用处方) 椎骨 脊神经支配部位 脊神经受压后所产生的症状 颈1 头部血管,...
    淡定r阅读 7,850评论 0 2
  • 文/七蒙主 思维导图并不是什么新玩意,也不是无懈可击的神器,学习之前我们应该先了解一下这个工具的发明过程。 50年...
    七蒙主阅读 15,370评论 5 17

友情链接更多精彩内容