preface

In our front-end development, we often encounter the problem of page layout of different scenes, and page frame construction is the basis of front-end development, but also a very important part. This paper first summarizes the basic process of page development. On this basis, it combs the common CSS layout schemes, including horizontal and vertical center, single column layout, two column layout, holy Grail layout, twin wings layout, iso-height layout and sticky band layout.

The full text summary

1 Layout idea of page development process

1.1 Determine the page layout

Common type width:

  • Zhihu 960 px
  • Taobao 1000 px.
  • Netease 1200 px.
  • Jingdong 1210 px.
  • Tencent’s 1400

1.2 Overall page layout

  1. Analyze the row module first and then the column module.
  2. If there are multiple modules in a row, make sure they are in the same parent module. Column modules generally use floating, specific coordinates, there is a cascading concept of the need to use positioning.

1.3 Layout of single Modules

  1. Instantiate the box by giving the module the width and height of the background color.
  2. Then analyze the text attributes of the module, background and other attributes.

CSS writing order:

  • Position properties (position, top, right, Z-index, display, float, etc.)
  • Size (width, height, padding, margin)
  • Text (font, line-height, letter-spacing, color-text-align, etc.)
  • Background (background, border, etc.)
  • Others (animation, transition, etc.)
  1. A general module is composed of two parts: title and content.
  2. If the box itself has a width and height, using padding needs to be calculated, and using margin sometimes causes the problem of margin merging collapse.

1.4 Line spacing calculation

The line spacing is divided into four lines: top line, middle line, baseline, baseline.

Line spacing isDistance from baseline to baseline, set to line height.

2 Horizontally and vertically centered layout

There are two common methods for horizontal and vertical centering of inline elements:

  • Text-align: center
  • Vertical center: Height=line-height

Block-level elements are centrally divided into:

  • The center element is fixed in width and height
  • The width and height of the center element are not fixed

2.1 Fixed width and height

Common code

<head>
<meta charset="utf-8">
<title>Common code</title>
<style>
    .father{
         width: 500px;
         height: 300px;
         border: 1px solid red;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color:red;
    }
</style>
</head>
<body>
  <div class="father">
        <div class="son"></div>
    </div>
</body>
Copy the code

(1) margin

  • Margin: 0 auto

  • Vertical center: margin-top

.son {
  /* Horizontal center */
  margin: 0 auto;
  /* Vertically centered (parent height - child height)/2*/
  margin-top:100px;
}
Copy the code

(2) Absolute + negative margin

  • The child element is positioned absolutely, and the parent element is positioned relative
  • The child element moves 50% based on the parent element, and then -margin moves back half of itself
 .father {
      position: relative;
   }
 .son {
     position: absolute;
     /* Horizontal center */
     left: 50%;
     margin-left: -50%;
     /* Vertical center */
     top: 50%;
     margin-top: -50%;
 }
Copy the code

(3) absolute + margin auto

  • The child element is positioned absolutely, and the parent element is positioned relative
  • The distance in each direction of the child element is set to 0, and margin is set to auto
.father {
     position: relative;
 }
 .son {
     position: absolute; 
     margin: auto; 
     /* Horizontal center */
     left: 0;
     right: 0;
     /* Vertical center */
     top: 0;
     bottom: 0;
 }
Copy the code

2.2 Unfixed width and height

A method without fixed width is one that can override the fixed width above

  • The child element is positioned absolutely, and the parent element is positioned relative
  • Use -translatex to move back half of itself

(1) absolute + transform

 .father{
     position: relative;
 }
 .son{
     position: absolute;
     /* Horizontal center */
     left: 50%;
     transform: translateX(-50%);
     /* Vertical center */
     top: 50%;
     transform: translateY(-50%);
 }
Copy the code

(2) css-table

  • Horizontally centered: parent element text-align:center+ child element display:block
.father{
    text-align: center;
}
.son {
    display: inline-block;
}
Copy the code
  • Display :table-cell+vertical-align: middle
.father{
    display: table-cell;
    vertical-align: middle;
}
Copy the code

(3) flex

  • Horizontal center: parent element display: flex+justify-content: center
  • Display: flex+align-items: center
.father {
   display: flex;
   /* Horizontal center */
   justify-content: center;
   /* Vertical center */
   align-items: center;
}
Copy the code

3 Single-column layout

3.1 Common Layout

Head, content, bottom

<head>
<meta charset="utf-8">
<title>Single column layout - Normal layout</title>
<style>
    .header{
       margin:0 auto; 
       max-width: 960px;
       height:100px;
       background-color:pink;
    }
    .container{
       margin: 0 auto;
       max-width: 960px;
       height: 500px;
       background-color: aquamarine;
    }
    .footer{
       margin: 0 auto;
       max-width: 960px;
       height: 100px;
       background-color:skyblue;
    }
</style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
Copy the code

3.2 The content is centered

The content area (center) is 960px, and margin:0 Auto is used to achieve horizontal center

<head>
<meta charset="utf-8">
<title>Normal layout - Center content</title>
<style>
    .header{
        margin:0 auto;
        height:100px;
        background-color:pink;
    }
    .content{
        margin: 0 auto;
        height: 500px;
        width:960px;
        background-color: aquamarine;
    }
    .footer{
        margin: 0 auto;
        height: 100px;
        background-color: skyblue;
    }
</style>
</head>
<body>   
    <div class="header"></div>
    <div class="center">
         <div class="content"></div>
    </div>
    <div class="footer"></div>
</body>
Copy the code

4. Two-column layout

The so-called two column layout refers to: left fixed width, right adaptive.

4.1 float

Float :left: normal fluid BFC and floating element do not intersect, along the floating element to form its own closed context.

<head>
<meta charset="utf-8">
<title>Two-column layout -float</title>
<style>
    .left {
        width: 300px;
        background-color: pink;
        float: left;
        height:500px;
    }
    .right {
        width:100%;
        background-color: aquamarine;
        height:500px;  
    }
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">Fixed width</div>
         <div class="right">The adaptive</div>
    </div>
</body>
Copy the code

4.2 the flex

The parent element opens the elastic space, the left box sets the fixed width, and the right box flex: 1

<head>
<meta charset="utf-8">
<title>Two-column layout - Flex</title>
<style>
   .warp{
       display:flex;
  }
  .left {
       width: 300px;
       background-color: pink;
       height:500px;
  }
 .right {
       background-color: aquamarine;
       height:500px;  
       flex:1
}
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">Fixed width</div>
         <div class="right">The adaptive</div>
    </div>
</body>
Copy the code

5. Three-column layout

5.1 What is the three-column layout

  • Fixed left and right, adaptive in the middle
  • The middle bar precedes the document stream to ensure priority loading.

  • There are three implementation schemes: Flex layout, Grail layout, and twin wing layout
  • The Grail originated from an article in a List Part, and the twin wings originated from Taobao UED, inspired by page rendering.

5.2 the flex layout

  • Place the middle box at the beginning of the HTML to ensure that it is loaded first
  • Use the Flex Order property to determine the order of the three boxes, left, middle, and right
  • Left box and right box fixed width, middle box Flex :1

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Flex layout</title>
<style>* {margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        background: gray;
        display: flex;
    }
    .left{
        width:200px;
        height: 600px;
        background: pink;
        order: -1
    }
    .center{
        height: 600px;
        background: aquamarine;
        width:100%;
        flex:1
        order:1
    }
    .right{
        width:200px;
        height: 600px;
        background: skyblue;
        order:2
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">Middle hahahahahahahahahahahahahahahahahahahaha middle</div>
    <div class="left">On the left</div>
    <div class="right">right</div>	
</div>
</body>
</html>
Copy the code

5.3 Layout of the Grail

  • All three boxes are set to float

  • Left box goes negative margin-left:100%, right box goes negative its width

  • Large box padding left and right box width

  • Left and right boxes relative to each other. Left, right. – Go back

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>The holy grail layout</title>
<style type="text/css">* {margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        /* the width of the left and right boxes */
        padding-left:200px;
        padding-right:200px;
    }
    .left{
        /* all boxes are set to float */
        float:left;
        width:200px;
        height: 600px;
        /* * * * */
        margin-left: -100%;
        background: pink;
        /* 5 relative position, go back */
        position:relative;
        left: -200px;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        /*/ * */
        margin-left: -200px;
        background: skyblue;
        /* 6 relative position, go back */
        position:relative;
        right: -200px;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="center">Middle hahahahahahahahahahahahahahahahahahahaha middle</div>
        <div class="left">On the left</div>
        <div class="right">right</div>	
    </body>
</html>
Copy the code

5.4 Dual-wing Layout

  • All three boxes are set to float

  • Left box goes negative margin-left:100%, right box goes negative its width

  • Adjust the center box margin

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Twin wing layout</title>
<style type="text/css">* {margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
    }
    .left{
        /* all boxes are set to float */
        float:left;
        width:200px;
        height: 600px;
        /* * * * */
        margin-left: -100%;
        background: pink;
    }
    .content{
        /* 4, adjust the middle box margin */
        margin-left:200px;
        margin-right:200px;
        background-color: yellowgreen;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        /* * * * * * * * * * * * * * * * * * * * * * *
        margin-left: -200px;
        background: skyblue;
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">
        <div class="content">Middle hahahahahahahahahahahahahahahahahahahaha middle</div>
    </div>
    <div class="left">On the left</div>
    <div class="right">right</div>	
</body>
</html>
Copy the code

Grail layout summary of the double wing layout:

  • Float :left, div content is not covered
  • The holy grail is to add relative positioning in the middle, with left and right attributes
  • Set margin-left and margin-right to the nested div

6 contour layout

An isometric layout is a layout in which the children are the same height as their parents.

6.1 Positive inside margin + negative margin

Positive padding + negative margin, padding and margin cancel each other out

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Contour layout - positive inside margin + negative margin</title>
<style type="text/css">* {margin:0;
            padding:0;
     }
     .left..right {
            width:50%;
            float:left;
            text-align:center;
            background-color:aquamarine;
            /* Setting a positive inner margin will stretch the background color */
            padding-bottom:9999px;
            /* Set a negative margin to push the border inward */
            margin-bottom: -9999px;
     }
     .right{
             background-color: pink;	 
     }
     .container {
            width:1200px;
            margin:0 auto;
            /* Enable BFC restricted content */
            overflow:hidden;
     }
</style>
</head>
<body>
 <div class="container">
     <div class="left">111111111111</div>
     <div class="right">333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333</div>
 </div>
</body>
</html>
Copy the code

6.2 the table layout

Disadvantages: Using a table layout has some limitations on setting some properties

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Contour layout - Table layout</title>
<style type="text/css">* {margin:0;
    padding:0;
 }
 .center..left..right {
    width:33.3%;
    text-align:center;
    display: table-cell;
    background-color:aquamarine;
 }
.container {
    display:table;
    width:1200px;
    margin:0 auto;
 }    
</style>
</head>
<body>
 <div class="container">
      <div class="left">111111111111</div>
      <div class="center">22222222222222222222222222</div>
      <div class="right">333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333</div>
  </div>
</body>
</html>
Copy the code

6.3 the flex layout

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Contour layout - Flex layout</title>
<style type="text/css">* {margin:0;
    padding:0;
 }
 .center..left..right {
    text-align:center;
    background-color:aquamarine;
    flex:1
 }
 .container {
    display:flex;
    /* flex-direction: row; * /
    width:1200px;
    margin:0 auto;
 }
</style>
</head>
<body>
 <div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333</div>
</div>
</body>
</html>
Copy the code

6.4 the grid layout

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>The grid layout</title>
<style>* {margin:0;
    padding:0;
 }
 .center..left..right {
    text-align:center;
    background-color:aquamarine;
    flex:1
}
 .container {
    display:grid;
    grid-auto-flow: column;
    width:1200px;
    margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333, 333333333333333333333333333333333333333333333333</div>
</div>
</body>
</html>
Copy the code

7 Adhesive tape layout

When main is long enough, footer follows it. When the main element is short (smaller than the screen width, for example), the footer element can be taped to the bottom of the screen.

7.1 the negative margin – bottom

Implementation approach: use an element outside the footer content wrapped up, set up the negative margin – bottom, he was equal to the height of the footer.

<html>
<head>
<meta charset="UTF-8">
<title>Margin-bottom</title>
 <style>
/* Wrap an element outside the footer with a negative margin-bottom that is exactly the height of the footer */
html.body {
     margin: 0;
     padding:0;
     text-align:center;
}
#wrap{
      min-height:100%;
      background-color: pink;	
      margin-bottom: -30px;
}
#footer.#main{
      height: 30px;
} 
#footer{
     background-color: aquamarine;
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            main<br/>
            main<br/>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>
Copy the code

7.2 Use negative margin-top for footer

<html>
<head>
<meta charset="UTF-8">
<title>Paste layout - use negative margin-top on footer</title>
<style>
    html.body {
	height: 100%;
	margin: 0;
	text-align:center;
   }
     #wrap{
        width: 100%;
        min-height:100%;
        background-color: pink;	
    }
     /* The content area needs to be partially cleared to prevent content from being covered */
     #main{
        padding-bottom: 30px;
    }
     /* The minimum height of the wrap content is 100%, then pull the footer 30px up through the margin-top. * /
     #footer{
        width: 100%;
        height: 30px;
        background-color: aquamarine;
        margin-top: -30px;
    } 
</style>
</head>
<body>
   <div id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
  </div>
  <div id="footer">footer</div>
</body>
</html>
Copy the code

7.3 the flex

<html>
<head>
<meta charset="UTF-8">
<title>Adhesive tape layout - Flex</title>
<style>
 html.body {
    margin: 0;
    padding:0;
    text-align:center;
}
 #warp{
	height:100%;
	display: flex;
	flex-direction: column;
 }
 #main{
	background-color: pink;	
	flex:1;
 } 
 #footer{
	background-color: aquamarine;
	height: 30px;
 }
</style>
</head>
<body>
   <div id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
      <div id="footer">footer</div>
   </div>
</body>
</html>
Copy the code

conclusion

This article ends here, because my experience level is limited, unavoidably will have the flaw, welcome to correct this. Writing is not easy, behind the continuous output is the accumulation of countless days and nights, your praise is the power to continue writing, thank you for your support!