Layout of CSS Foundation

Time:2021-12-15

CSS layout: float, position, flex, transform, grid,:: After:: before

Let’s talk about BFC first

Block Formatting Contexts
BFC is an independent layout environment, in which the element layout is not affected by the outside world. It is regarded as an isolated independent container. The elements in the container will not affect the outside elements in the layout, and BFC has some characteristics that ordinary containers do not have.
Generally speaking, BFC can be understood as a closed large box. The elements inside the box will not affect the outside no matter how many rivers and seas are overturned.

BFC can be triggered by some conditions to meet layout requirements or solve some problems;
Layout of CSS Foundation
How to create a BFC
1. The value of float is not none.
2. The value of position is not static or relative.
3. The values of display are inline block, table cell and flex
4. Overflow values other than visible (hidden, auto, scroll)

(1) two container margins in the same BFC will overlap, so we can set two different BFCs
(2.) the BFC feature stipulates that “the area of BFC will not overlap with the floating container, and the other will be covered after the adjacent element float. Set oveflow: hidden for the adjacent element to generate BFC
(3) when we do not set the height for the parent node and set the floating for the child node, the height collapse will occur;
BFC is used to avoid the problem of margin overlap / floating parent element height collapse of child elements. When calculating the height of BFC, the floating elements also participate in the calculation and give the parent element overflow: hidden;

Two column layout

  <div class="main1">
    <div class="box-m1 m1-left">
        <p>leftleftleftleftleftleftleft</p>
    </div>
    <div class="box-m1 m1-right">
      <p>rightrightrightrightrightright</p>
    </div>
   
  </div>

The first is float and absolute and float + BFC, and the following is float + BFC

.main1 {
      word-break: break-all;
    }
    .m1-left {
      float: left;
      margin-right: 20px;
      background-color: red;
    }
    .m1-right {
      overflow: hidden; /* The left element will float over the right element, so the right element will become BFC*/
      zoom: 1;
      background-color: gray;
    }

The second flex ie10 and above are OK

    .main1 {
      display: flex;
      word-break: break-all;
    }
    .m1-left{
      margin-right: 20px;
      background-color: red;
    }
    .m1-right{
      flex: 1;
      background-color: gray;
    } 

The third grid is based on grid

    .main1 {
      display:grid; 
      grid-template-columns:auto 1fr; 
      grid-gap:20px;
      word-break: break-all;
    }
     .m1-left{
      margin-right: 20px;
      background-color: red;
    }
    .m1-right{
      background-color: gray;
    }

Flexbox and grid

Flexbox is used for one-dimensional layout and grid is used for two-dimensional layout, that is, if content items are arranged in one direction, flex is used,
If you want to create the entire layout in two dimensions (including rows and columns), you should use CSS grid, such as 9-house grid, etc
Another core difference between the two is that flexbox is content-based and grid is layout based

Three column layout

1 floating 2 absolute positioning 3 flexbox 4. display:table 5. grid 6. Grail layout 7 Dual wing layout
Flex: 1 can be set on the center.
Grid: 200px left and right middle adaptive

  .main1 {
      display: grid; 
      width: 100%; 
      grid-template-columns: 200px auto 200px; 
    }

Other schemes are not listed. After all, flexbox and grid are popular now

Vertically and horizontally centered elements

margin | absolute-transform:translate

<div class="box1">
    Horizontal and vertical adaptive layout
  </div>
  .box1 {
      width: 200px;
      margin: 50% auto;
      border: 1px solid yellowgreen;
    }
  .box1 {
      position: absolute;
      top: 50%;
      right: 50%;
      width: 100px;
      height: 100px;
      background-color: pink;
      transform: translate(-50%,50%);
    }

flex

<div class="box2">
    <div class="inner">
      Horizontal and vertical adaptive layout
    </div>
  </div>
.box2{
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
/*table*/
.box2{
      width: 500px;
      height: 200px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
   }
/*grid*/
.box2{
     width: 100vw;
     height: 100vh;
     display: grid;
     align-items:center;
     justify-content: center;
  }

Viewport units

According to CSS3 specification, viewport units mainly include the following four:

1. VW: 1vw is equal to 1% of the viewport width.

  2. VH: 1vh is equal to 1% of the viewport height.

  3. Vmin: select the smallest of VW and VH.

  4. Vmax: select the largest of VW and VH.

VH and VW: relative to the height and width of the viewport, not the parent element (the CSS percentage is relative to the height and width of the nearest parent element containing it). 1vh is equal to 1 / 100 of the viewport height and 1vw is equal to 1 / 100 of the viewport width.

For example: Browser height 950px, width 1920px, 1 VH = 950px / 100 = 9.5 Px, 1vw = 1920px / 100 = 19.2 px.

Vmax is relative to the larger of the width or height of the viewport. The largest one is divided equally into 100 units of Vmax.

Vmin is relative to the smaller of the width or height of the viewport. The smallest one is equally divided into 100 units of Vmin.

What are viewports?
On the desktop side, the viewport refers to the visible area of the browser on the desktop side; On the mobile side, it involves three viewports: layout viewport, visual viewport and ideal viewport.

The “viewport” in the viewport unit, and the desktop refers to the visual area of the browser; The mobile terminal refers to the layout viewport in the viewport, and the “viewing area” refers to the size of the viewing area inside the browser, i.e. window innerWidth/window. Innerheight size, excluding the size of the browser area of the taskbar title bar and the bottom toolbar..