PS: History. Back (-1)

W3C standard box model & IE weird box model

Each element displayed on a page, including inline elements, can be thought of as a box, a box Model

The box model consists of four parts, from inside to outside: Content padding border Margin


The width of an element in the W3C standard box model (height and so on) should be calculated as follows:

Width of an element = content Total box width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-rightCopy the code

The width (height and so on) of an element in IE’s weird box model is calculated like this:

Width of an element = Content + padding + border Total box width = margin-left + width + margin-rightCopy the code

The solutionbox-sizing

// W3C standard box model (browser default) box-sizing: content-box; Box-sizing: border-box; // box-sizing: border-box;Copy the code

When we set box-sizing: border-box; , the border and padding are included in the width and height, just like the IE box model.

So, to prevent you from having the same CSS behave differently in different browsers, add:


                                            
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

                                        Copy the code

How does JS get the width and height of the box model

<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; padding: 50px; border: 5px solid red; margin: 50px; } </style> <div id="box" style=""></div> <script> let box = document.getelementById ('box') // Console. log('style:' + box.style.width) // 100px // Log ('currentStyle:' + box.currentStyle.width) // 100px // Console. log('getComputedStyle:' + getComputedStyle(box).width) // 100px // Into the box is the total width of the console. The log (' getBoundingClientRect: + box. GetBoundingClientRect (). The width) / 210 / < / script >Copy the code

BFC

BFC: Block-level element formatting context

IFC: Inline element formatting context

Landing the principle

  1. Margins overlap in the vertical direction of the BFC
  2. The BFC area does not overlap with the floating area
  3. The BFC is a separate container on the page, independent of other elements
  4. When calculating the height of the BFC, floating elements are also involved in the calculation

How do I create a BFC

  1. floatValues are not fornoneThe current element creates a BFC as soon as the float is set
  2. positionValues are not forstaticOnce positioning is set, the current element creates a BFC
  3. displayThe value is not the default, as long as display is set, the current element creates a BFC
  4. overflowValues are not forvisibleAs long as overflow is set, the current element creates a BFC

                                            
overflow: hidden;

                                        Copy the code

BFC application scenario

Solve margin overlap problem

Margin is maximized when all elements have a margin set. To keep margins from overlapping, you can add a parent element to the child element and set the parent element to BFC

<div class="box" id="box"> <p>Lorem ipsum dolor sit.</p> <div style="overflow: hidden;" > <p>Lorem ipsum dolor sit.</p> </div> <p>Lorem ipsum dolor sit.</p> </div>Copy the code

Encroach on the position of floating elements



Set the non-floating element to BFC

<style> .one { float: left; width: 100px; height: 100px; background-color: pink; } .two { height: 200px; background-color: red; /* Set BFC */ overflow: hidden; } </style> <div class="one"></div> <div class="two"></div>Copy the code

Remove the floating

BFC principle 4: When calculating the height of the BFC, floating elements are also involved in the calculation

Of course, there are other best practices for cleaning up floats, but this is just analyzing the scenario.

<style> .one { background-color: pink; /* Set BFC */ overflow: hidden; } .two { float: left; } </style> <div class="one"> <div class="two">hello world</div> </div>Copy the code