First, vertical center layout

 

Absolute positioning layout

  1.  
        .parent {
            position: relative;
        }        .child {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
Copy the code

2. The margin negative spacing

       .child{
            width:200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
Copy the code
  1. Transforms deformation
.child { width: 200px; height: 200px; position:absolute; left:50%; /* Locate parent 50% */ top:50%; transform: translate(-50%,-50%); /* own 50% */}Copy the code

 

Flex layout

  1.  
       .parent {
            display: flex;
            justify-content:center;
            align-items:center;
        }
Copy the code
  1.  
        .parent {
            display: flex;
        }        .child {
            margin: auto
        }
Copy the code

 

The table layout

The parent element sets the Teable-cell element, which simulates the parent and child structure with a three-tier structure

.parent {
            display: table;
            width: 200px;
            height: 200px;
        }        .child {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }        .box {
            display: inline-block;
        }
Copy the code

 

The grid layout

  1.  
.parent {
            display: grid;
        }        .child {
            justify-self: center;
            align-self: center;
        }
Copy the code
  1.  
.parent {
            display: grid;
        }        .child {
            margin: auto;
     }
Copy the code

 

Second, adaptive layout

 

Fixed width on the right, adaptive on the left

 

 

Float layout implementation steps:

 

  1. Set the child element to the same height, float the left element to the left, and set a fixed width of 100px
  2. The right element uses margin-left to adjust position
    <style>
        .container > div {
            height: 200px;
        }
        .left {
            background-color: #ce5a4b;
            float: left;
            width: 100px;
        }
        .right {
            background-color: #499e56;
            margin-left: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

Flex implementation:

  1. The parent element sets display: flex, and the left element sets a fixed width
  2. Set Flex :1 to the right element to fill the rest of the space
    <style>
        .container {
            display: flex;
        }
        .left {
            background-color: #ce5a4b;
            height: 200px;
            width: 100px;
        }
        .right {
            background-color: #499e56;
            height: 200px;
            flex: 1;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

 

The upper height is fixed and the lower height is adaptive

 

 

The realization method of absolute positioning:

 

  1. Set the height and box-sizing properties of the container element so that the padding is calculated into the container element
  2. Set the height of the top element and place it in the header of the Container using absolute positioning
  3. Set the padding-top of the container element to the height of the top element and the height of the bottom element to 100%
    <style>
        .container {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }
        .top {
            height: 100px;
            background: #ce5a4b;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
Copy the code

Common layout implementation: implementation steps:

  1. Set the height and box-sizing properties of the container element so that the padding is calculated into the container element
  2. Set the height of the top element and use margin to move the element to the top of the container element
  3. Set the padding-top of the container element to the height of the top element and the height of the bottom element to 100%
    <style>
        .container {
            height: 500px;
            padding-top: 100px;
            box-sizing: border-box;
        }
        .top {
            height: 100px;
            background: #ce5a4b;
            margin: -100px 0 0;
        }
        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
Copy the code

 

Three, three column layout

Seven layouts for a three-column layout: float, absolute positioning, Grail, twin wings, Flex, table, and grid

 

Float layout

1. Set the float property to make it separate from the document flow. Set the left column to float:left, and set the right column to float: right 2. Set margin-left and margin-right for the middle element. The reason for setting margin is that the middle element will be overwritten when the height of the middle element exceeds the left and right sides 3. To avoid affecting other elements, clear the float for the parent element

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background: #ce5a4b;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: #499e56;
        }
        .main {
            margin-left: 120px;
            margin-right: 220px;
            height: 200px;
            background: #f8cf5f;
        }
        .container::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
Copy the code

Disadvantages: When using only need to be careful must clear float

 

The position layout

Implementation steps

  1. Set the container to position: relative because the absolute position element is the parent element of the first postion that is not static.
  2. Left position left, right position right.
  3. Main uses absolute positioning by setting left and right and spreading the sides apart.
    <style>
        .container {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 300px;
            background-color: #ce5a4b;
        }
        .main {
            position: absolute;
            left: 120px;
            right: 220px;
            height: 300px;
            background-color: #f8cf5f;
        }
        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

Disadvantages: Absolute positioning is out of the document flow, meaning that all of the following child elements are also out of the document flow, resulting in poor effectiveness and usability

 

Float and BFC work with the Grail layout

Implementation steps

  1. Floats the left, center, and right columns by float.
  2. Set the left margin-left to -100%, and the left column moves to the top of the first line. Then set the right margin-left to a negative value of its width: -200px, and the right column will move to the left and center column
  3. Give the container a padding that is exactly equal to the width of the left and right columns
  4. Add the relative layout to the left and right columns, and then move them outward by setting the left and right values.
    <style>
        .container {
            overflow: hidden;
            padding: 0 220px 0 120px;
        }
        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }
        .main {
            width: 100%;
            background-color: #f8cf5f;
        }
        .left {
            width: 100px;
            margin-left: -100%;
            left: -120px;
            background-color: #ce5a4b;
        }
        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
            right: -220px;
        }
    </style>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
Copy the code

 

Twin wing layout

Implementation steps

  1. Floats the left, center, and right columns by float.
  2. Set the left margin-left to -100%, and the left column moves to the top of the first line. Then set the right margin-left to a negative value of its width: -200px, and the right column will move to the left and center column
  3. Margin: 0 220px 0 120px; And set Overflow: Hidden to be a BFC
  4. To avoid affecting other elements, clear the float for Main
    <style>
        .container {
            overflow: hidden;
        }
        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }
        .main {
            width: 100%;
        }
        .main::after {
            content: '';
            display: block;
            clear: both;
        }
        .left {
            width: 100px;
            background-color: #ce5a4b;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
        }
        .content {
            height: 100%;
            margin: 0 220px 0 120px;
            overflow: hidden;
            background-color: #f8cf5f;
        }
    </style>
    <div class="container">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
Copy the code

Similar to the Grail layout, but with a different solution to the problem of partially blocking the middle bar

 

Flex layout

Implementation steps

  1. Set container to a Flex container display: flex
  2. Set the width of main to 100% and left and right to 200px and 100px respectively
  3. To prevent left and right from shrinking, give them flex-shrink: 0
  4. Use the ORDER attribute to sort the three parts of the DOM structure: left: order: 1, main: order: 2, and right: Order: 3
    <style>
        .container {
            display: flex;
        }
        .main {
            background-color: #f8cf5f;
            width: 100%;
            height: 300px;
            order: 2;
        }
        .left {
            background-color: #ce5a4b;
            width: 100px;
            height: 300px;
            margin-right: 20px;
            flex-shrink: 0;
            order: 1;
        }
        .right {
            background-color: #499e56;
            width: 200px;
            height: 300px;
            flex-shrink: 0;
            margin-left: 20px;
            order: 3;
        }
    </style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

Extremely flexible (and there are other implementations) and requires browser compatibility

 

Table – cell layout

Implementation steps

  1. Set all three columns as table cells display: table-cell
  2. Left and right set width: 100px and width: 200px, respectively. Container set width: 100%
  3. At this point, the left and right are squeezed to the sides, so set the min-width separately to make sure they are not squeezed.
<style> .container { width: 100%; display: table; } .container > div { display: table-cell; height: 300px; } .content { height: 100%; margin: 0 20px; background: #f8cf5f; } .left { width: 100px; min-width: 100px; background-color: #ce5a4b; } .right { width: 200px; min-width: 200px; background-color: #499e56; } </style> <body> <div class="left"></div> <! <div class="content"></div> </div> <div class="right"></div> </body>Copy the code

This layout allows the height of the three columns to be uniform, but does not allow main to be first rendered

 

Grid layout

Implementation steps

  1. Set the container to display: grid
  2. Set the height of the three columns: grid-template-rows: 300px
  3. Grid-template-columns: 100px auto 200px; grid-template-columns: 100px;
    <style>
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;
            grid-template-columns: 100px auto 200px;
        }
        .left {
            background-color: #ce5a4b;
            margin-right: 20px;
        }
        .main {
            background-color: #f8cf5f;
        }
        .right {
            background-color: #499e56;
            margin-left: 20px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

Extremely easy to use, the code is brief, but compatibility is poor

 

Four, many row contour height

 

Using background images

    <style>
        .container {
            background: url("column.png") repeat-y;
            width: 960px;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 220px;
        }
        .main {
            float: left;
            width: 480px;
        }
        .right {
            float: left;
            width: 220px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

 

Implement multi-column layout using positive padding and negative margin hedging

Implementation steps:

  1. Background fills in the padding, not the margin. Margin is collapsible and can be set to negative values.
  2. Float: left. With float, the element leaves the document flow and floats to the nearest document flow element. The effect here is to place three div elements side by side.
  3. overflow:hidden; Setting the overflow property to Hidden causes the parent container to have a BFC effect, eliminating the effects of float. At the same time, as needed, the contents are intercepted to fit the fill box and the portions that are outside the container are hidden.
<style> .container { overflow: hidden; }. Container >div {/** * padding-bottom sets a larger positive value. * margin-bottom sets the negative value of the absolute value. **/ padding-bottom: 10000px; margin-bottom: -10000px; float: left; width: 30%; } .left { background-color: #ce5a4b; } .main { background-color: #f8cf5f; } .right { background-color: #499e56; } </style> <body> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> </body>Copy the code

 

Layout Flex implements contour height

Implementation idea:

  1. The parent element sets display:flex, flex box layout, and the default value is the same height layout
    <style>
        .container {
            display: flex;
        }
        .left {
            width: 200px;
            background-color: #ce5a4b;
        }
        .main {
            flex: 1;
            height: 400px;
            background: #f8cf5f;
        }
        .right {
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

 

Table -cell layout

1. Parent element set dispaly:table, table layout naturally has the feature of equal height.

    <style>
        .container {
            display: table;
        }
        .left {
            display: table-cell;
            width: 300px;
            background-color: #ce5a4b;
        }
        .main {
            display: table-cell;
            width: 300px;
            height: 400px;
            background: #f8cf5f;
        }
        .right {
            display: table-cell;
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

 

The grid layout

    <style>
        .container {
            display: grid;
            grid-auto-flow: column;
        }
        .left {
            background-color: #ce5a4b;
        }
        .main {
            background-color: #f8cf5f;
            height: 300px;
        }
        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

 

Five, product font layout

 

 

Inline or float layout

Implementation steps:

  1. The height and width of the three blocks are determined;
  2. Margin: 0 auto; In the middle.
  3. The next two blocks are inline-block or float without newlines
  4. Use margin to center the position of the left elements (if margin-left is the width, you can center them)

Implementation method 1:

<style> .container > div { height: 300px; width: 300px; } .top { margin: 0 auto; background-color: #f8cf5f; } .left { display: inline-block; // float: left; margin-left: 150px; background-color: #499e56; } .right { display: inline-block; // float: left; background-color: #ce5a4b; </style> <body> <div class="container"> <div class="top"> </div> <div class="left"> </div> <div class="right"> </div> </body>Copy the code

Implementation method two:

<style>. Container >div {height: 300px; width: 300px; } .top { margin: 0 auto; background-color: #f8cf5f; } .left { display: inline-block; // float: left; margin-left: -600px; background-color: #499e56; } .right { display: inline-block; // float: left; margin-left: 50%; background-color: #ce5a4b; </style> <body> <div class="container"> <div class="top"> </div> <div class="right"> </div> <div class="left"> </div> </body>Copy the code

Disadvantages: Small gaps with inline-block

 

Full screen type layout

Implementation steps:

  1. The div above is 100% wide and the div below is 50% wide, then use float or inline to render them inline
<style> .container>div { height: 200px; } .top { width: 100%; background-color: #f8cf5f; } .left { // display: inline-block float: left; width: 50%; background-color: #499e56; } .right { // display: inline-block float: left; width: 50%; background-color: #ce5a4b; </style> <body> <div class="container"> <div class="top"> </div> <div class="left"> </div> <div class="right"> </div> </body>Copy the code

 

6. Waterfall flow layout

 

 

Multi – way of the columns

Implementation steps:

  1. Set column-count and column-gap in waterfall container
  2. Break-inside :avoid is set to item to prevent the text block from breaking up into separate columns so that the contents of the item list do not cross columns and destroy the overall layout.
  3. In order for the layout to be responsive, you can adjust the number of columns by setting the column-count of the Waterfall stream container at different screen sizes using the media query property
<style> .container { -moz-column-count: 3; /* Firefox */ -webkit-column-count: 3; /* Safari and Chrome */ column-count: 3; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; width: 70%; margin: 2em auto; } .item { padding: 2em; margin-bottom: 2em; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; background: #ce5a4b; color: #fff; text-align: center; } .item .content-lar { height: 200px; } .item .content-mid { height: 100px; } .item .content-sma { height: 50px; } @media screen and (max-width: 800px) { .container { column-count: 2; /* two columns on larger phones */ } } @media screen and (max-width: 500px) { .container { column-count: 1; /* two columns on larger phones */ } } </style> <body> <div class="container"> <div class="item"> <div Class ="item_content content-sma"> 1 I Max </div> </div> <div class="item_content content-sma"> 2 I Max </div> <div class="item"> <div class="item_content content-mid"> 3 I medium </div> </div> <div class="item"> <div Class ="item_content content-sma"> 4 I am the smallest </div> </div> <div class="item_content content-mid"> 5 I am medium </div> <div class="item"> <div class="item_content content-lar"> 6 I Max </div> </div> <div class="item" Class ="item_content content-sma"> 7 I minimum </div> </div> <div class="item"> <div class="item_content content-lar"> 8 I maximum </div> <div class="item"> <div class="item_content content-lar"> 9 I Max </div> </div> <div class="item"> <div Class ="item_content content-sma"> 10 </div> <div class="item_content content-mid"> 11 I am medium </div> <div class="item"> <div class="item_content content-mid"> 12 I am medium </div> </div> <! -- more items --> </div> </body>Copy the code

 

Flex layout

Implementation steps:

  1. The waterfall stream container sets dispaly: Flex and uses Flex-Flow to control the column and allow it to wrap
  2. Explicitly set the height property, of course, in addition to the px value, you can also set 100vh, so that the container height is the same as the browser window height (note: can not be explicitly set, without explicit Settings, container will not be able to wrap item list)
  3. In order for the layout to have a responsive effect, different height values can be set with the help of the media query property display
<style> .container { height: 800px; display: flex; flex-flow: column wrap; width: 70%; margin: 2em auto; } .item { padding: 2em; margin-bottom: 2em; break-inside: avoid; background: #f60; color: #fff; text-align: center; margin: 10px; } .item .content-lar { height: 200px; } .item .content-mid { height: 100px; } .item .content-sma { height: 50px; } @media screen and (max-width: 1100px) { .masonry { height: 800px; } } @media screen and (max-width: 800px) { .masonry { height: 1100px; } } @media screen and (max-width: 600px) { .masonry { height: 1300px; } } @media screen and (max-width: 460px) { .masonry { height: 1600px; </style> <body> <div class="container"> <div class="item"> <div class="item_content content-lar"> </div> <div class="item"> <div class="item_content content-sma"> 2 I minimum </div> </div> <div class="item"> <div Class ="item_content content-mid"> 3 I am medium </div> </div> <div class="item_content content-sma"> 4 I am the smallest </div> <div class="item"> <div class="item_content content-mid"> 5 I am medium </div> </div> <div class="item"> <div Class ="item_content content-sma"> 6 I Max </div> </div> <div class="item_content content-sma"> 7 I Max </div> <div class="item"> <div class="item_content content-lar"> 8 I Max </div> </div> <div class="item"> <div </div> <div class="item_content content-sma"> 10 I am the smallest </div> <div class="item"> <div class="item_content content-mid"> 11 I medium </div> </div> <div class="item"> <div Class ="item_content content-mid"> 12 </div> </div> <! -- more items --> </div> </body>Copy the code