CSS盒模型

本文将会围绕CSS盒模型，进行相关问题的探讨。

标准模型

IE模型

 

1. CSS盒模型有哪两种标准？

• 标准模型
• IE模型

2. 这两种标准的区别是什么？

• 标准模型 -- 不含border和padding
• IE模型 -- 含border和padding

3. CSS中是如何设置这两种模型的？

• box-sizing: content-box;(default)
• box-sizing: border-box;

4. JS如何设置、获取盒模型对应的宽和高?

• 1. dom.style.width/height（只能取出内联样式）
• 2. dom.currentStyle.width/height(渲染后的尺寸，但是只有IE支持)
• 3. window.getComputedStyle(dom).width/height(chrome firefox支持)
• 4. getBoundingClientRect().width/height(常用于计算元素的绝对位置，相对于视口的位置)

5. 根据盒模型解释边距重叠问题

    问题重现

    wrap中的两个div都设置了margin-top: 10px 和margin-bottom: 20px，

   理应两个div之间的间距为30px，即第一个div的margin-bottom与第二个div的margin-top之和。

   但是如下图所示，实际的间距只有20px，此时就发生了边距重叠的问题。在垂直方向上，相邻的两个div的间距由两者垂直方向

   上的margin值大者决定。这里就直接取了第一个div的margin-bottom: 20px。

<style>
	.wrap {
		width: 500px;
		height: auto;
		background: #CECECE;
		padding: 20px;
	}
	
	.wrap p {
		height: 300px;
		background: #9ACD32;
		color: #ffffff;
		line-height: 300px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}
</style>
<article class="wrap">
	<p>Block 1</p>
	<p>Block 2</p>
</article>

边距重叠
​

   怎么解决这个问题呢？

   创建一个BFC

6. 什么是BFC？

    BFC 块级格式化上下文 (Block Formatting Context)

    它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相

     干。

7.  BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

8. 怎么实现BFC？

• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

更多BFC应用请参考xxx