总结盒模型的考点

悠悠 2022-05-13 02:22 104阅读 0赞

**盒模型，前端面试中必考的点！**

盒子模型有两种 : **W3C标准盒模型** \+ **IE盒模型**

1.  W3C定义的盒子模型包括margin、border、padding、content ，元素的`width=content`的宽度  
    ![这里写图片描述][70]
2.  IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的`width=content+padding+border`  
    ![这里写图片描述][70 1]

**考点总结**

*  IE盒模型和W3C模型怎样区分？（width区别）
 *  css3属性：`box-sizing`: `content-box` (W3C) | `border-box`(IE)
 *  填充背景色，范围在哪里？（border和content之间的距离）
 *  border的相关知识点：  
    border一般用于分离元素，border的外围一般是指元素的最外围  
    border的属性只要有三个color(颜色) width(粗细) style(样式)
 *  margin的相关知识点：  
    margin是指元素与元素之间的距离，也就是指用于控制块与块之间的距离。  
    a.当两个**行内元素紧邻**的时候，他们之间的距离为第一个元素的 margin-right 加上第二个元素margin-left的值；  
    b.若不是行内元素，而产生换行效果的**块级元素**，则两个块级之间的距离不是 margin-bottom 和 margin-top 的和，而是俩者中取较大的值作为两个块级之间的距离；  
    c.**父子关系**，即当一个div块包含在另一块div中间时，其中子块的 margin 将以父块的 content 为参考。
    
    **注**：在上述 C 的情况下当父 div的高度设置的值小于子 div块的高度加上 margin的值时，此时 IE 浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的 padding-bottom ，但是 Firefox就不会，它会保证父元素的height高度的完全吻合，这时子元素将超过父元素的范围。  
    **另外**:margin也可以设置成负数，当设置成负数时，会使得设置成负数的块向相反的方向移动，甚至覆盖在其他的块上。

虽然面试的次数不多，但是前端每次面试考官都会问到这个问题，再好好总结一下。  
中间很多知识点也涉及到了以下知识：

1.  BFC（块级格式化上下文）
2.  布局问题（重点）
3.  所有布局的top、right、bottom、left

[70]: /images/20220513/695493c8f77f455ea082804635f6c26e.png
[70 1]: /images/20220513/e5ca3ad3463b47b19d7e920fa4fb2c15.png