1. CSS box model

Reference: rookie tutorial,www.runoob.com/css/css-box…

  • All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout.
  • The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.
  • The box model allows us to place elements in the space between other elements and the borders of surrounding elements.
  • The following picture illustrates the Box Model:

2. Width and height of DOM nodes

  • Box width = Content width + left/right Padding + left/right Border + left/right margin
  • Box height = Content height + Padding + Border + margin

3. Two box models

There are two box models according to the width and height of CSS properties

  • Standard box model
    • Width = Content Width
    • Height = Content Height
  • IE Box model
    • Width = Content Width + left/right Padding + left/right Border
    • Height = Content Height + Padding + Border

4. Calculate the width and height

Standard box model

.fWrap {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 20px;
    background-color: #895;
}
Copy the code

Box-sizing: border-box effect:

.fWrap {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 20px;
    background-color: #895;
    box-sizing: border-box;
}
Copy the code

Box-sizing can change the box model,

  • Box-sizing: Content-box Standard box model
  • Box-sizing: border-box IE

5. JS position

5.1 clientWidth

Standard box model, IE box model:

  • ClientWidth = Content Width + left/right Padding
  • ClientHeigh = Content Height + upper and lower Padding
  • ClientTop: The thickness of the border on an element, usually 0 when no border thickbase is specified
  • ClientLeft: border – left

5.2 offsetWidth

Standard box model, IE box model:

  • OffsetWidth = Content Width + left/right Padding + left/right Border = clientWidth + left/right Border
  • OffsetHeith = Content Height + Padding + Border = clientHeight + Border
  • OffsetTop:
    • DOM standard mode (document.documentElement) : The distance between the outer edge of the border on the current element and the inner edge of the border on the nearest positioned parent. The distance to the top and left of the body if neither parent is located
    • IE weird mode: Offset position with reference to parent element
  • offsetLeft:
    • DOM standard mode (document.documentElement) : The distance between the outer left border of the current element and the inner left border of the nearest positioned parent. The distance to the top and left of the body if neither parent is located
    • IE weird mode: Offset position with reference to parent element

5.3 scrollWidth

Standard box model, IE box model:

  • ScrollWidth: Gets the true width of the content layer of the specified tag (width of the visible area + width of the hidden area)
  • ScrollHeight: Gets the true height of the content layer of the specified tag (height of the visible area + height of the hidden area)
  • ScrollTop: The distance from the top of the content layer to the top of the viewable area 
    / / standard model document. The documentElement / / IE quirks mode document. The body / / compatibility processing let scrollHeight = document. The documentElement. ScrollTop || document.body.scrollTop; conosle.log('scrollHeight', scrollHeight);Copy the code

5.4 getBoundingClientRect

Gets the set of positions of an element relative to the window

  • El.getboundingclientrect (). Top Distance from the window
  • El.getboundingclientrect (). Right Distance from the right side of the window
  • El.getboundingclientrect (). Bottom Distance from the bottom of the window
  • El.getboundingclientrect (). Left The distance from the left side of the window