1. Introduction

(The article is a summary of learning, which may not be too detailed, but just a review of important knowledge points)

1. What is the layout?

Layout is dividing the page into blocks and arranging them left, middle, right, top, middle, and bottom

2. There are two types of layout

(1) Fixed width layout, generally 960px, 1000px, 1024px width

(2) not fixed width layout, mainly by the principle of document flow

In fact, there is a third type of layout: responsive layout, which is not fixed width on the mobile phone, fixed width on the PC side

2. The float layouts

To put block-level elements on a line, use a float layout

(1) Add to child element

Float: left; Width: XXPX;Copy the code

(2) Add.clearfix to the parent element

.clearfix::after{
   content:"";
   clear:both;
   overflow:hidden;
}
Copy the code

Note: Leave some space or the last element unset to width;

Ie6/7 has double margin issues: margins for IE6/7 are reduced by half

margin-left:20px;
_margin-left:10px
Copy the code

3. The flex layout

Flex layouts are divided into Containers and Items

1. The container properties

(1) Change the container to flex

.container{ display:flex; }Copy the code

(2) Change the spindle direction

.container{
   flex-direction:row/row-reverse/column/column-reverse;
}
Copy the code

(3) Line break

.container{
   flex-wrap:wrap/no-wrap/wrap-reverse;
}
Copy the code

(4) Spindle alignment

.container{
   justify-content:center/flex-start/flex-end/space-between/space-around;
}
Copy the code

(5) Secondary axis alignment

.container{
   align-items:center/flex-start/flex-end;
}
Copy the code

2. The items property

(1) the order

Who’s in the front? The smaller the back, the higher the front

(2) the flex – turns up

(3) the flex – the shrink

4. The grid layout

(1)

Container: Five rows and three columns

 .container {  
            display: grid;
            grid-template-columns: 40px 50px auto 50px 40px;
            grid-template-rows: 60px 100px 50px;
 }
Copy the code

Items: This is the header

.a {
            grid-column-start: 1;
            grid-column-end: 6;
            grid-row-start: 1;
            grid-row-end: 2;

 }
Copy the code

(2) Header, aside, main, AD, footer

container

    .container {
            display: grid;
            grid-template-rows: 60px auto 60px;
            grid-template-columns: 300px auto 200px;
            border: 1px solid red;
            grid-template-areas:
             "header header header "
             "aside main ad" 
            ". footer footer "; 
           min-height: 100vh; 
           /* grid-gap: 10px; */ 
           grid-row-gap: 10px; 
           grid-column-gap: 10px; 
       }
Copy the code

items

.a {
       grid-area: header;
 }                
.b {
       grid-area: aside;
 }                
.c {    
       grid-area: main;
}               
 .d {            
       grid-area: ad; 
}               
 .e {           
       grid-area: footer
}
Copy the code