盒模型理解

太过爱你忘了你带给我的痛 2022-05-28 01:27 170阅读 0赞

参考： [盒模型理解][Link 1]

前端的盒模型包括两种，分别是W3C盒模型和IE盒模型。

W3C盒模型包括content、padding、border、margin。其中width = content

![Center][]

IE盒模型包括content、padding、border、margin。其中width=content+padding+border

![Center 1][]

后来W3C在CSS3中新增了box-sizing的样式，属性包含content-box和border-box；content-box就是默认的样式，border-box是width包含了content+padding+boder。

> （1） content-box  元素的width=content+padding+border
> 
> **\[css\]**  [view plain][]  [copy][view plain]
> 
> 1.  .test1\{  
> 2.      box-sizing:content-box;  
> 3.      width:200px;  
> 4.      padding:10px;  
> 5.      border:15px solid \#eee;  
> 6.  \}  
> 
> > > ![Center 2][]
> 
> （2） border-box   元素的width=width（用样式指定的宽度）
> 
> **\[css\]**  [view plain][]  [copy][view plain]
> 
> 1.  .test1\{  
> 2.      box-sizing:border-box;  
> 3.      width:200px;  
> 4.      padding:10px;  
> 5.      border:15px solid \#eee;  
> 6.  \}

> > ![20160922115316708][]
> > 
> > ##     ##
> > 
> > >   
> > > 
> > > 
> > > 其他知识点：
> > > 
> > > 1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
> > > 
> > > 2.对于相邻的块级元素margin-bottom和margin-top 取值方式
> > 
> > > >  1） 都是正数： 取最大值
> > 
> > > > >    距离=Math.max(margin-botton,margin-top)
> > 
> > > >  2） 都是负数： 取最小值
> > 
> > > > >    距离=Math.min(margin-botton,margin-top)
> > 
> > > >  3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加
> > 
> > > > >    距离=margin-botton+margin-top
> > 
> >   
> >

[Link 1]: https://blog.csdn.net/lxcao/article/details/52620453
[Center]: /images/20220528/5ea35428ab834c54858d16596569a205.png
[Center 1]: /images/20220528/cc6df5ebba7e405a9c86856ac3b0cb0b.png
[view plain]: https://blog.csdn.net/lxcao/article/details/52620453#
[Center 2]: /images/20220528/c28d0bd7940841a2beefb97927740759.png
[20160922115316708]: /images/20220528/d8dc3b33e0c44f48952976ee4528a678.png