This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

1. The categories

  1. IE box model -border-box
  2. W3C standard box model – Content-Box

2. Features (Note: Photo source network, deleted)

2.1 W3C standard box model
   width=content;
   height=content;
Copy the code

2.2 IE Box Model
width=content+padding+border
height=content+padding+border
Copy the code

3. How does CSS set these two models

Standard model: box-sizing: content-box

4. How does JS set/obtain the width and height corresponding to the box model

  1. Dom.style. width/height: The width of the inline style, returned in units, the return value of the data type is string–300px

  2. Dom. CurrentStyle. Width/height: the rendered eventually wide high (old) used in IE, it takes the data types are string, such as 300 px

  3. Window.getcomputedstyle (dom).width/height: DOM standard, Internet Explorer is not supported

  4. Dom. GetBoundingClientRect (). The width/height: it takes data types are string, such as 300 px

5. Compatible writing:

var oAbc = document.getElementById("abc"); If (oabc.currentStyle) {alert(" I support currentStyle"); alert(oAbc.currentStyle.width); } else {alert(" I don't support currentStyle"); alert(getComputedStyle(oAbc,false).width); }Copy the code
5. Margins overlap
5.1 Boundary overlap refers to the fact that the adjacent boundaries of two or more boxes (which may be adjacent or nested) (without any non-empty content, padding, or border between them) overlap to form a single boundary.

Case 1:

       .neighbor{
			height: 100px;
			background: red;
		}
		.father{
			background: #f436365e;
		}
		.child{
			height: 100px;
			margin-top: 10px;
			background: #00800047;
		}
		<div class="neighbor">
		this is neighbor
	</div>
	<div class="father">
		<div class="child">
			this is child
		</div>
	</div>
Copy the code

Actual results:But the desired effect is this:Solution: Use BFC

.father{
			background: #f436365e;
			overflow: hidden;
		}
Copy the code
5.2 The vertical adjacent boundaries of two or more block-level boxes will overlap and their boundary widths are the maximum of the adjacent boundary widths. Notice that horizontal boundaries do not overlap.

Example 2:

<style type="text/css"> .father{ background: #f436365e; overflow: hidden; } .child{ height: 20px; margin: 30px auto 30px; background: #00800047; } </style> <div class="father"> <div class="child"> this is child1 </div> <div class="child"> this is child2 </div> <div  class="child"> this is child1 </div> </div>Copy the code

Actual effect: The spacing is only 30px

Expected effect: 60px expected

Solution: Use BFC

<div class="father"> <div class="child"> this is child1 </div> <div style="overflow: hidden;" <div class="child"> This is child2 </div> <div class="child"> This is child1 </div> </div>Copy the code