CSS盒模型与外边距重叠margin问题

（1）页面中的所有元素都可以看做是一个盒子，占据一定的页面空间。盒模型由内容、边框、内边距和外边距组成。

（2）盒模型有两种标准：标准模型（W3C盒模型）、IE盒模型

在标准盒模型中，盒模型的宽高只是内容的宽高；

而在IE盒模型中，盒模型的宽高是内容（content）+padding+border;

 

标准盒模型模型：width=content，对象的实际宽度=width+padding+border+margin;

 

IE6盒子模型：width=content+padding+boorder;对象实际宽度=width+margin;

 

所以我认为IE6盒子模型比较合理，就像现实中的物体，应该包括内边界和边框

 

（3）CSS如何设置这两种模型？

通过box-sizing属性

box-sizing: content-box|border-box|inherit;

content-box（标准盒模型）:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box（IE盒模型）:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

（4）JS如何设置、获取盒模型对应的宽和高？

方式一：通过dom节点的style样式获取    

 element.style.width/height;

　　　　缺点：这种方式只能获取行内样式

方式二：（IE独有）

 element.currentStyle.width/height;

方式三：（通用型）

 window.getComputedStyle(element).width/height;

方式四：

element.getBoundingClientRect().width/height;

（5）根据盒模型解释边距重叠

外边距（margin）重叠问题

外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

相邻元素可为父子元素或同胞元素。

实例

（1）同胞元素

（2）父子元素

两个或多个块级盒子的垂直相邻边界会重合，这个边界的高度等于两个发生重叠的边界的高度中的最大者。

子元素与父元素之间

.div9{
　　background: red;
}
.div9 div{
　　width: 100px;
　　height: 100px;
　　background: yellow;
　　margin-top: 50px;
}

<div class="div9">
　　<div></div>
</div>

儿子的height是 100px，magin-top 是50px。注意，此时父亲的 height 是100，而不是110。因为儿子和父亲在竖直方向上，共一个margin。

此时给父div加一个border属性，就正常了

.div9{    
    background: red;
    border: solid 1px #666666;
}

 

折叠后的margin计算

（1）margin都是正值时取较大的margin值

（2）margin都是负值时取绝对值较大的，然后负向位移。

（3）margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

 

解决方案：

（1）设置为BFC布局

• 　　根元素
• 　　float的值不为none
• 　　overflow的值不为visible（hidden、auto、scroll）
• 　　display的值为inline-block、table-cell、table-caption、flex
• 　　position的值为absolute或fixed 　

（2）对于父子元素，内层元素加 float:left或display:inline-block;

（3）内层元素绝对定位 position:absolute;

（4）外层父元素加透明边框 border:solid 1px transparent;

（5）改为padding

转载于:https://www.cnblogs.com/xiaoan0705/p/8619338.html