When we look at the actual rendering, we need to pay attention to two concepts: the box model (object) and the format context (environment) layout is based on the concept of document flow and the box model

In normal flow, all boxes (inline boxes, block-level boxes) belong to their own formatting context, which controls how elements are laid out.

Formatting context: How do margins, borders, and padding of elements interact with other blocks in the same context block formatting context Inline formatting context Flex Formatting Contexts (Flex, Grid)

display

Outer display types determine how that element looks in the streaming layout (block level, inline elements, inline block elements, inline, block, Inner display types control the layout of its children (e.g. flow layout, grid or Flex)

.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
  writing-mode: vertical-rl   |   horizontal-tb;
}
Copy the code

The display: None element does not take up the space that it should display. Display: None + fixed Implement popup window

<! doctype html><head>
  <style>
    body {
      min-height: 200vh;
      margin: 0;
    }

    button {
      padding:.5em .7em;
      border: 1px solid #8d8d8d;
      background-color: white;
      font-size: 1em;
    }

    .top-banner {
      padding: 1em 0;
      background-color:  rgba(0.0.0.0.5);
    }

    .top-banner-inner {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
/ * pop-up * /
    .modal {
      display: none;
    }
/* Popover de is used to cover up the rest of the page and keep the user focused */
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0.0.0.0.5);
    }

    .modal-body {
      position: fixed;
      top: 3em;
      bottom: 3em;
      right: 20%;
      left: 20%;
      padding: 2em 3em;
      background-color: white;
      overflow: auto;
    }

    .modal-close {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <header class="top-banner">
    <div class="top-banner-inner">
        <button id="open">open</button>
    </div>
  </header>
  <div class="modal" id="modal">
    <div class="modal-backdrop"></div>
    <div class="modal-body">
      <button class="modal-close" id="close">close</button>
      <h2>Popup window title</h2>
      <p>message</p>
      <form>
        <p>
          <label for="email">Email address:</label>
          <input type="text" name="email"/>
        </p>
      </form>
    </div>
  </div>

  <script type="text/javascript">
    const openBtn = document.getElementById('open');
    const closeBtn = document.getElementById('close');
    const modal = document.getElementById('modal');

    openBtn.addEventListener('click'.function(event) {
        event.preventDefault();// Prevents the element from default behavior
        modal.style.display = 'block';// Displays pop-ups
    });

    closeBtn.addEventListener('click'.function(event) {
        event.preventDefault();
        modal.style.display = 'none';
    });

  </script>
</body>


Copy the code

Element: Box

The box-sizing attribute defines how the total width and height of an element should be calculated. Value: the content – box | padding – box | border – box

The default value is Content-box, the standard box model. Width and height only include the width and height of the content, excluding the border, padding, and margin.

.box {width: 350px; border: 10pxsolid black; }Copy the code

The actual render width in the browser (including the border) will be 370px, so if the two child elements split the width of the parent element, 30%+70% will end up larger than the parent element

An inline element set position: Absolute automatically converts to a block element IE renders the main element as an inline element instead of a block-level element. So in CSS we need to fix it

Block-level elements

  1. Always start with a new line
  2. Width, height, margin, and padding can be controlled
  3. Can hold inline elements and other block elements
  4. The vertical distance between boxes of the same level will be determined by margin, and the vertical distance between two adjacent block-level boxes will be folded according to the margin folding principle.
  5. The outer left edge of each box will coincide with the left edge of the containing block. If the order is right-to-left, the outer right edge of the box coincides with the right edge of the containing block
  6. The width defaults to 100% of the parent element’s content

top:0; Left: the default width after 0 is the parent width left:50%, the width is forced to be half of the parent element

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div></div>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
Copy the code

Inline elements

  1. The width defaults to the width of its own content
  2. Inline elements can only hold text or other inline elements.
  3. On one line with the elements in adjacent rows (the element is split into two rows if the parent is not sufficient for the child)
  4. Width and height are invalid. Single horizontal padding and margin can be set

Horizontal padding-left, padding-right, margin-left, margin-right all produce margin effects; But vertical padding-top, padding-bottom, margin-top, margin-bottom doesn’t produce margin effects.

<span></span>
<u></u>
<ins></ins>
<s></s>
<del></del>
<i></i>
<em></em>
<b></b>
<strong></strong>
<a></a>
Copy the code

Inline block elements

  1. That is, block-level elements that do not occupy a row
  2. You can set the width, height, margin, padding, and alignment attributes instead of having a few special tags for inline elements
  3. The default width is the width of its own content
  4. And adjacent inline blocks on one line, but there is a gap between them, (the parent is not enough children to the next line)
<span>... </span><a>.</a>
<img/>
<textarea>.</textarea>
<button>.</button>
<input>
<br>
<label>.</label>
<select>.</select>
<canvas>.</canvas>
<progress>.</progress>
<cite>.</cite>
<code>.</code>
<strong>.</strong>
<em>.</em>
<audio>.</audio>
<video>.</video>
Copy the code

BFC

The box model was originally defined in the front end, but elements affect the layout of other elements. This is where the BFC comes in, where the elements are separated from the regular flow and a new BFC is created to form a separate space, never affecting the elements outside

The conditions for triggering the BFC are as follows

  • Root element or element containing root element: display: flow-root list-item
  • Float element: Float of the element is not None
  • Absolute positioning element: The position of the element is absolute, sticky, and fixed
  • The display of inline block elements is inline-block
  • Table cells All table cells of the table-* property

Table -cell (default value for HTML table cells) Table caption HTML table title defaults to this value.) Anonymous table cell elements (display elements are table, table-row, Table -row-group, table-header-group, table-footer-group (default HTML attributes for table, row, tbody, thead, tfoot, respectively)

  • Contain element attributes: Layout, Content, strict
  • Overflow values are not visible block elements
  • Elastic elements (display is a direct child of flex or inline-flex elements)
  • Grid elements (display is grid or a direct child of the inline-grid element)
  • Multi-column containers (elements with column-count or column-width not auto, including column-count 1)
.container {
  column-count: 3;
}
Copy the code
  • The element attribute column-span is set to all: the element spans all columns

Usage scenarios

The child elements are set to float

Child elements are set to float, will from the parent element, the height of the parent element may collapse (parent element size affected by child elements) reason: the floating child elements from the document flow, was to create a new queue, below the average queue (parent) can’t touch it, can’t detect its existence cannot be he open method: The container that triggers the BFC is a completely isolated container on the page, and the elements in the container never affect the outside elements. To ensure this rule, floating children must be involved when calculating the height of the parent element.

The core of the floating layout is to take the elements out of the normal flow and position them using width/height and margin/padding. Absolute location is based on the nearest non-static location parent object, while fixed is relative to the HTML root node location. Both locations are out of the ordinary flow

So if the parent element is relative and the child element is absolute, the same problem occurs as float: the parent object collapses in height and the child element cannot hold up the parent object.

Another way: for the element clearfix after the float element, use the pseudo-class :before parent element class attribute value contains clearfix

    .clearfix:before,.clearfix:after { 
      content:".";
      display:table;
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }
Copy the code

Clear float, my understanding is to pull back document flow

Margin includes collapse and overlapping collapse

Margin takes the maximum value in the vertical direction, including collapse: BFC overlapping collapse is triggered for the container: BFC is triggered for the container by wrapping elements with the container

CSS3 multi-column properties

Display: the grid

See another blog post on how to implement a grid using a float

Display: grid This element becomes a grid container, and its children become grid elements.

All grid elements must be direct child nodes of the grid container

Define grid track

New property defines grid track: fr the weight of each column supports function repeat

grid-template-rows: 1fr 1fr; // equivalent to grid-template-rows:repeat(2.1fr );
grid-template-columns: 2fr 1fr 1fr 3fr; // Is equivalent to grid-template-columns: 2fr repeat(2.1fr ) 3fr;
Copy the code
<! doctypehtml>
<head>
  <style>
  :root {
    box-sizing: border-box;
  }

  *,
  ::before.::after {
    box-sizing: inherit;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 0.5 em;
  }

  .grid > * {
    background-color: darkgray;
    color: white;
    padding: 2em;
    border-radius: 0.5 em;
  }
  </style>
</head>
<body>
  <div class="grid">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
  </div>
</body>

Copy the code

Implicit grid

In the actual DOM, the grid is automatically expanded if there are more elements than there are grids. This is the default size of the implicit grid:

grid-auto-rows: 1fr;
grid-auto-colums: 1fr;
Copy the code

Specifies the position of the element

grid-column: 1 / 3;

Add to the previous code

 .a{
        grid-column: 1 / 3;
  }
Copy the code

The page changes to

Supplementary grammar

Named grid line

.container {
    display: grid;
    grid-template-columns: [left-start] 2fr
                           [left-end right-start] 1fr
                           [right-end];
    grid-template-rows: repeat(4, [row] auto);
    grid-gap: 1.5 em;
    max-width: 1080px;
    margin: 0 auto;
  }

  header.nav {
    grid-column: left-start / right-end;
    grid-row: span 1;
  }

  .main {
    grid-column: left;
    grid-row: row 3 / span 2;
  }

  .sidebar-top {
    grid-column: right;
    grid-row: 3 / 4;
  }
Copy the code

Named grid region

The grid area must form a rectangle. As a name, a grid is left empty

.container {
    display: grid;
    grid-template-areas: "title title"
                         "nav ."
                         "main aside1"
                         "main aside2";
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-gap: 1.5 em;
    max-width: 1080px;
    margin: 0 auto;
  }
Copy the code

A query

CSS Check whether the browser supports features. The rollback style is outside the feature query

 @supports (display: grid) {
      .portfolio {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px.1fr));
        grid-auto-rows: 1fr;
        grid-gap: 1em;
        grid-auto-flow: dense; }} // or yes@supports not(display: grid) {}@supports (display: grid) or (display: table){} 
     @supports (display: grid) and (display: table){} 

Copy the code

Set different sizes

Give some elements more than one grid area

.portfolio .featured {
      grid-row: span 3;
      grid-column: span 3;
    }

Copy the code

before 后

This change is the default grid-auto-flow:row;

Display: flex

Traditional layouts are based on a box-like model and rely on display properties + position properties + float properties. In 2009, the W3C proposed the Flex layout

Write a menu bar using the elastic box

First, a simple example

/* The external container is set to elastic */
    .site-nav {
      display: flex;
      padding:.5em;
      background-color: #5f4b44;
      list-style-type: none;
      border-radius:.2em;
    }

    .site-nav > li {
      margin-top: 0;
    }

    .site-nav > li > a {
      display: block;
      padding:.5em 1em;
      background-color: #cc6b5a;
      color: white;
      text-decoration: none;
    }
    /* The left margin of all blocks */
    .site-nav > li + li {
      margin-left: 1.5 em;
    }
   /* Set the left margin of the last block to auto to make it fill the container to the right */
    .site-nav > .nav-right {
      margin-left: auto;
    }
Copy the code

Basic knowledge of

Display: Flex This element becomes an elastic container, and its children become elastic children. A Flex container has two axes, the main axis and the cross axis, that are in different directions. Item spindle size: The length that the child elements occupy along the main axis. Float, clear, vertical-align child elements are invalid.

.box{
  display: flex;
}

.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* WebKit-kernel browsers must be prefixed with -webkit,Safari */
  display: flex;
}
Copy the code

attribute

Container attribute

Flex-flow attributes: flex-direction+flex-wrap

The default value is row. Nowrap flex-direction Specifies the direction of the main axis. Flex-direction :row; // The default controls child elements from left to right column, row-reverse, column-reverse

In a vertical elastic box, flex’s shrink property does not work

By default, items are aligned on the axis. If there is more than one line, this property defines how to wrap a line. Nowrap does not wrap a line, wrap the next line below, wrap the next line above. Flex-shrink does not work. The element is no longer shrunk and is simply folded

Spindle context-content and cross align-items

Spacing can also be understood as the alignment on the main axis, controlling the equal spacing of elements along the main axis when they are not fully filledThe align-content attribute value is the same as justify-content, which defines the alignment of multiple intersecting axes, that is, in the case of multiple lines.

Child elementsThe align-self attribute is providedOverrides the align-item attribute

Child element attribute

Float, clear, vertical-align child elements are invalid. Elastic child elements fill the available width like block-level elements, but elastic child elements do not necessarily fill the width of their elastic container

Elastic child elements have the same height, which is determined by their content. Align -items and align- Content on the control sub-axis start with stretch

By setting the margin of the elastic child element to auto, you can center the child element relative to the elastic container.

Order attribute

Define the order of items. The smaller the value is, the more advanced the value is. The default value is 0

Flex properties

The flex attribute is the shorthand flex-basis element size reference value. The width or height of the element depends on flex-direction PX, em, and percentage flex-grow. If the box model of a child element is occupied, the container width may be left blank. If the box model of a child element is occupied, the growth factor will be assigned to the child element as a weight. 0 means no growth

Flex implements web layout

<! doctypehtml>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before.::after {
      box-sizing: inherit;
    }

    body {
      background-color: #709b90;
      font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
      margin-top: 1.5 em;
    }

    .container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .site-nav {
      display: flex;
      padding:.5em;
      background-color: #5f4b44;
      list-style-type: none;
      border-radius:.2em;
    }

    .site-nav > li {
      margin-top: 0;
    }

    .site-nav > li > a {
      display: block;
      padding:.5em 1em;
      background-color: #cc6b5a;
      color: white;
      text-decoration: none;
    }

    .site-nav > li + li {
      margin-left: 1.5 em;
    }

    .site-nav > .nav-right {
      margin-left: auto;
    }

    .tile {
      padding: 1.5 em;
      background-color: #fff;
    }

    .flex {
      display: flex;
    }

    .flex > * + * {
      margin-top: 0;
      margin-left: 1.5 em;
    }

    .column-main {
      flex: 2;
    }

    .column-sidebar {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .column-sidebar > .tile {
      flex: 1;
    }

  
    .login-form h3 {
      margin: 0;
      font-size:.9em;
      font-weight: bold;
      text-align: right;
      text-transform: uppercase;
    }

    .login-form input:not([type=checkbox]):not([type=radio]) {
      display: block;
      margin-top: 0;
      width: 100%;
    }

    .login-form button {
      margin-top: 1em;
      border: 1px solid #cc6b5a;
      background-color: white;
      padding:.5em 1em;
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>Ink</h1>
    </header>
    <nav>
      <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
    <main class="flex">
      <div class="column-main tile">
        <h1>Team collaboration done right</h1>
        <p>Thousands of teams from all over the
          world turn to <b>Ink</b> to communicate
          and get things done.</p>
      </div>
     
      <div class="column-sidebar">
        <div class="tile">
        
        <form class="login-form">
            <h3>Login</h3>
            <p>
              <label for="username">Username</label>
              <input id="username" type="text"
                name="username"/>
            </p>
            <p>
              <label for="password">Password</label>
              <input id="password" type="password"
                name="password"/>
            </p>
            <button type="submit">Login</button>
          </form>

        </div>
        <div class="tile centered">
          <small>Starting at</small>
          <div class="cost">
            <span class="cost-currency">$</span>
            <span class="cost-dollars">20</span>
            <span class="cost-cents">.00</span>
          </div>
          <a class="cta-button" href="/pricing">
            Sign up
          </a>
        </div>
      </div>
    </main>
  </div>
</body>

Copy the code