[Front-end] Adaptive Layout Method summary, front-end Adaptive Layout

[Front-end] Adaptive Layout Method summary, front-end Adaptive Layout

Fixed column adaptive

Implementation Code:

<! DOCTYPE html> 
　　
The left and right columns are fixed and adaptive in the middle

 

 

 
  
Method 1: float floating

 
The floating method uses float: left, float: right, and float to separate the left and right elements from the document stream. The intermediate elements are normally in the normal document stream, you can use margin to specify the left and right margins to locate them.
<! DOCTYPE html> 
　　

  

 
   
Method 2: Use absolute positioning

  
The absolute positioning method uses absolute to locate the left and right sides. Because absolute positioning disconnects the left and right sides from the document stream, the back center will naturally flow to them and then use the margin attribute, set the width of the left and right elements to make the middle elements adaptive to the screen width.
<! DOCTYPE html> 
　　

   

 
    
Method 3: Use negative margin)

   
The principle of the Holy Grail layout is the margin negative value method. To use the Holy Grail layout, you first need to include a div outside the center element, including the div. You need to set the float attribute to form a BFC and set the width, and the width must be used with the negative margin value of the left Block. For details, refer to here. Here is a detailed explanation of the Holy Grail layout.
<! DOCTYPE html> 
　　

    

 
     
Method 4: Use flex (new feature of css3)

    
<! DOCTYPE html>