Layout is essential in front-end development. This article will introduce some CSS layouts that are often tested in interviews:

  • Two-column layout (fixed left and adaptive right)
  • Three-column layout (left and right fixed center adaptive)
    • Fluid layout (floating)
    • BFC three-column layout
    • Twin wing layout
    • The holy grail layout
    • flex
    • The table layout
    • Absolute positioning layout
    • Grid Layout

One, two column layout

Fixed on the left, adaptive on the right

1. Set the floating function.

You need two div implementations, one div to set the float and the width, and the other div to set nothing

If you want to set something to the right block, you can do either of the following:

  • Left float left and set width right Set margin-left to the left width can also be done
  • Left set left float and width right, right set over-flow: Hidden also works
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> 2 columns layout -- float</title> <style> div{height:300px; } .left{ width:200px; background-color:gray; float:left; } .main{ background-color:pink; /* margin-left:200px; */ /* Or overflow:hidden; */ } </style> </head> <body> <div class = 'left'></div> <div class = 'main'></div> </body> </html>Copy the code

2. Achieve relative and absolute positioning.

You need three divs, one of which is the parent container and contains two child elements. Set the width of the top child element to left and the width of the bottom child element to right:0. The parent container is positioned relative to it because the child element that it sets absolute positioning can be moved relative to it; Absolute positioning of the top child makes the bottom child on the same line as it.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> position:relative; height:300px; } .left{ position:absolute; width:300px; background-color:blue; height:100%; } .main{ background-color:yellow; position:absolute; left:300px; right:0; height:100%; } </style> </head> <body> <div class = 'outer'> <div class = 'left'></div> <div class = 'main'></div> <div> </body> </html>Copy the code

3. Through the elastic box Flex

You need three divs, one of which is the parent container and contains two child elements. The parent element sets display:flex; The top child sets the width and the bottom child sets Flex :1

    div{
        height:300px;
    }
    .parent{
        display:flex;
    }
    .left{
        flex:0 0 100px;
    }
    .right{
        flex:1 1 auto;
    }
Copy the code

Two, three column layout

Fixed left and right, adaptive in the middle

1. Fluid layout (floating)

Principle: The left and right modules float to the left and right respectively, and set the margin value of the middle module to make the width of the middle module self-adaptive

Disadvantages: The main content cannot be loaded first, which can affect the user experience when the page has too much content

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> 3 column layout -- float</title> <style> div {height: 200px; } .left { float: left; width: 100px; } .right { float: right; width: 100px; } .center { margin-left: 100px; margin-right: 100px; } </style> </head> <body> <div class="left" style="background-color:rgb(6, 235, 44)"></div> <div class="right" style="background-color:rgb(9, 134, 236)"></div> <div class="center" style="background-color:red"></div> </body> </html>Copy the code

2.BFC layout in three columns

How it works: The BFC rules say that BFC regions do not overlap with floating elements, so we can use this to achieve a 3-column layout

Disadvantages: The main content module cannot be loaded first, which can affect the user experience when there is too much content on the page. So in order to solve this problem, there is the following layout scheme to introduce the layout of the twin wings

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> < BFC</title> <style> div {height: 200px; } .left { float: left; width: 100px; } .right { float: right; width: 100px; } .center { overflow: hidden; } </style> </head> <body> <div class="left" style="background-color:rgb(6, 235, 44)"></div> <div class="right" style="background-color:rgb(9, 134, 236)"></div> <div class="center" style="background-color:red"></div> </body> </html>Copy the code

3. Dual-wing layout

How it works: Add a container element to Center, and set the margin of center away from the sidebar, leaving the left and right floating on both sides

Advantages: The main content modules can be loaded first, so the user experience is not affected when there is too much content on the page.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> width: 100%; } .center { margin-left: 100px; margin-right: 100px; height: 100px; } .right { float: left; margin-left: -100px; /* width: 100px; height: 100px; } .left { float: left; margin-left: -100%; /* Margin based on the percentage of parent elements */ width: 100px; height: 100px; } </style> </head> <body> <div class="container"> <div class="center" style="background-color:red"></div> </div> <div class="left" style="background-color:rgb(6, 235, 44)"></div> <div class="right" style="background-color:rgb(9, 134, 236)"></div> </body> </html>Copy the code

4. Grail layout

And the difference with the flying wing layout: like the flying wing layout, there are some differences in the details, compared to the flying wing layout, the HTML structure is relatively simple, but the style definition is slightly more complex, but also the priority to load the content body.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> 100px; margin-right: 100px; } .center { float: left; width: 100%; height: 100px; } .left { float: left; margin-left: -100%; position: relative; left: -100px; width: 100px; height: 100px; } .right { float: left; margin-left: -100px; position: relative; right: -100px; width: 100px; height: 100px; } </style> </head> <body> <div class="container"> <div class="center" style="background-color:rgb(9, 134, 236)"></div> <div class="left" style="background-color:red"></div> <div class="right" style="background-color:rgb(6, 235, 44)"></div> </div> </body> </html>Copy the code

5.flex

Display :flex; Set the flex of the child element;

The Flex attribute is a short form of the flex-grow, Flex-shrink, and Flex-basis attribute:

  • Flex-grow: The amount that the project will scale against other flexible projects
  • Flex-shrink: Specifies the amount by which a project will shrink relative to other flexible projects
  • Flex-basis: The default length of the project

Advantages: You can write center first, let it load first, and then use the order attribute to place it in the middle

.container{ display:flex; width:100%; height:100px; } .left{ flex:0 0 100px; }. Right {flex:0 0 100px; order:2 } .center{ flex:1 1 auto; order:1 } <div class="container"> <div class="center" style="background-color:rgb(9, 134, 236)"></div> <div class="left" style="background-color:red"></div> <div class="right" style="background-color:rgb(6, 235, 44)"></div> </div>Copy the code

6. The table layout

Disadvantages: Can’t set column spacing

.container{
    display:table;
    width:100%;
}
.left,.center,.right{
    display:table-cell;
}
.left{
    width:100px;
    height:100px;
}
.right{
    width: 100px;
    height:100px;
}

<div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div> 
Copy the code

7. Absolutely positioned layout

Advantages: Simple and practical, and the main content can be loaded first.

.container{
    position:relative;
}
.center{
    margin-left:100px;
    margin-right:100px;
    height:100px;
}
.left{
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
}
.right{
    position:absolute;
    right:0;
    top:0;
    width:100px;
    height:100px;
}

<div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div> 
Copy the code

8. Grid Layout

grid-template-columns: 100px auto 100px; The column property used to set the grid container is essentially the width of the column. When we need to display several columns, we can set several values. This property can take a specific value like 100px, or it can take a percentage value indicating the width of the container. The percentages set by grid-template-columns are calculated based on the width of the container if the width is not set up all the way back to the parent container to the body element. grid-template-rows: 100px; The row property used to set the grid container is the height of the row and is similar to the grid-template-columns property

.container{     
    display: grid;            
    grid-template-columns: 100px auto 100px;                     
    grid-template-rows: 100px;                
    }    

     <div class="container">
    <div class="left" style="background-color:red"></div>
    <div class="center" style="background-color:rgb(9, 134, 236)"></div>
    <div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>
Copy the code

conclusion

Personally, I prefer to use Flex layout. I feel it is very convenient to use and I can do most of the layout.