盒模型的重要性

盒子模型是css中核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累的关于css盒子模型的知识，希望对初学者有用。

盒模型的理解

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

两种盒模型及区别

image.png

用代码演示如下：

.contont-box{
 margin:25px;
 border:5px solid red;
 padding:15px;
 box-sizing:contont-box;
width:100px;
}
.border-box{
 margin:25px;
 border:5px solid red;
 padding:15px;
 box-sizing:border-box;
 width:100px;
}

<div class="contont-box">contont box</div>
  <div class="border-box">border box</div>

效果图如下（从下面的图中我们很清楚的发现border-box是包括内边距和border的）

image.png
image.png

margin合并

哪些情况会合并

1. 父子之间会合并
2. 兄弟之间会合并

怎么阻止合并

父子合并用1. padding/border
2. overflow:hidden
3. display:flex
兄弟间合并用1. inline-block
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.