CSS base box model

The CSS box model is the basis for page layout.

When laying out a document, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standards, the CSS Basic Box Model. CSS determines the size, location, and properties of these boxes (such as color, background, border size…). .

Each box is made up of four parts, or areas, which are: Content area, padding area, border area, and margin area respectively correspond to width, height, padding, border, and margin.

Notice the CSS property box-sizing.

  1. content-boxW3C box model is the default. If you set the width of an element to100px, then the content area of this element will have100pxWidth, and the width of any borders and inner margins is added to the width of the last drawn element. In other words,Final box width height >= set width height.
  2. border-box(IE box model) tells the browser: you want to set the border and inner margin values to be included inwidthInside. That is, if you take an element ofwidthSet to100pxThen this100pxIt’s going to be includedborder 和 padding, the actual width of the content area iswidthMinus (border + paddingThe value of). In most cases, this makes it easier to set the width and height of an element.

Look at the following example.

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
Copy the code
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
Copy the code

The result shows that the total width and height of the border-box should not exceed the specified width and height, while the size of the Content-box is uncertain and affected by the border and padding.

Layout and include blocks

The size and position of an element is often affected by its containing blocks. For attributes such as width, height, padding, margin, and the absolute positioning element offset (such as position being set to absolute or fixed), the calculated value of these values when we assign a percentage value to them, It’s computed by the inclusion block of the element.

position

The process of determining an element’s containing block is entirely dependent on the element’s Position property. Let’s look at the Position property first.

  1. staticThis keyword specifies the normal layout behavior of the element, that is, the current layout position of the element in the general flow of the document. At this timetop.right.bottom.left 和 z-indexAttribute is invalid.
  2. relativeUnder this keyword, the element is placed where it was when it was unpositioned, and then repositioned without changing the page layout (thus leaving the element blank where it was when it was unpositioned).position:relative 对 table-*-group.table-row.table-column.table-cell.table-captionElement is invalid.
  3. absoluteDoes not reserve space for elements, by specifying the element’s not relative to the neareststaticLocate the offset of the ancestor element to determine the element position. Absolutely positioned elements can be set to margins (margins) and will not be merged with other margins.
  4. fixedInstead of reserving space for elements, you specify elements relative to the screen viewport (viewport) to specify the element position. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page.fixedProperty creates a new cascading context. The ancestor of the elementtransformProperties ofnoneWhen, the container byviewportInstead ofThe ancestors.
  5. stickyThe box position is calculated from the normal flow (this is called the position in the normal flow) and then positioned relative to the element in the flow with the flow root (BFC) and containing block (the nearest block-level ancestor element). In all cases (even when the element being located is table), the location of that element has no effect on subsequent elements. When element B is stickily positioned, the positions of subsequent elements are determined in the same way as when element B was not positioned.position: stickyThe effect on the table element is the same as position: relative.Viscous positioning can be thought of as a mixture of relative and fixed positioning. The element is positioned relative before crossing a specific threshold, and then fixed.It can be very convenient to achieve the top of the IOS list title effect.
  <head>
    <style>
      #box {
        height: 5000px;
      }
      #sti {
        position: sticky;
        top: 100px;
      }
      p {
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      <p>hello div</p>
      <div id="sti">sti</div>
    </div>
  </body>
Copy the code

Determine containing block

The process of determining an element’s containing block depends entirely on the element’s position property:

  1. ifpositionProperties forstatic 或 relativeThe containing block is the nearest by itAncestor block element(inline-block,block,list-item), or BFC(table,flex,grid) of the content area.
  2. ifpositionProperties forabsoluteThe containing block is the nearest by itpositionThe value is notstatic(That is, the value is zerofixed.absolute.relative 或 sticky) is composed of the inner margin area of the ancestor element.
  3. ifpositionAttributes arefixed, you can think of the containing block as the viewport.

Note: The contain block in which the root element (< HTML >) resides is a rectangle called the initial contain block, which can be thought of as a viewport. .

Calculates the percentile value based on the contained block

If an attribute is assigned a score, its calculated value is calculated from the element’s contain block. These attributes include box model attributes and offset attributes:

  1. To calculate the percentile in height top and bottom, use the value containing the height of the block. If the height of the containing block changes according to its contents, and the position property of the containing block is given a relative or static value, then these values are evaluated to 0, meaning that the containing block itself can determine the height before the percentage calculation of the child elements takes effect.

    The.con parent element does not set the height, the.c1 child element sets the height to 500px, and the.c2 child element sets the height to a percentage.

<head>
<style>
    .con {
      background-color: red;
    }
    .c1 {
      background-color: cyan;
      height: 500px;
    }
    .c2 {
      background-color: green;
      height: 100%;
    }
  </style>
  </head>
  <body>
    <div class="con">
      <div class="c1"></div>
      <div class="c2"></div>
    </div>
  </body>
Copy the code
  1. To calculatewidth.left.right.padding.marginThese attributes are made up of the containing blockswidthProperty to calculate its hundred point value.

Thank you for reading, welcome to follow my public account Yunying Sky, take you to interpret the front-end technology.

Reference:

  1. This section describes the CSS basic subrack and box model
  2. Layout and include blocks