盒模型理解_盒图最小值是负数-CSDN博客

本文介绍了前端开发中的盒模型概念，包括W3C盒模型和IE盒模型的区别，并详细解释了box-sizing属性的作用及content-box与border-box的区别。此外还讨论了元素之间的margin取值规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

后来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

.test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

（2） border-box 元素的width=width（用样式指定的宽度）

[css] view plain copy

.test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

其他知识点：

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