What are the layout techniques for html pages?

html layout technology includes: 1. Floating layout technology, relatively compatible, but it will affect the layout when the page width is not enough; 2. Absolute positioning layout technology; 3. Flex elastic layout technology, good adaptability, high flexibility Automatic expansion; 4. table-cell table layout technology; 5. grid grid layout technology.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

html page layout technology

1. Floating layout technology

    
    
    



    

        

        

        

            浮动布局
        
  
    
    

Floating layout The compatibility is relatively good, but floating has more impact. When the page width is not enough, it will affect the layout.

2. Absolute positioning layout technology

    
    
    



    

        

        

            绝对定位布局
        
        

    

Absolute positioning layout is fast, but the effectiveness is relatively poor because it is separated from the document flow.

3. Flex elastic layout technology

    
    
    



    

        

        

            flex布局
        
        

    

Good adaptability, the height can be automatically expanded

4.Table-cell table layout Technology

    
    
    



    

        

        

            表格布局
        
        

    

The compatibility is good, but sometimes the height cannot be fixed because it will be held up by the content.

5. Grid layout technology

    
    
    



    

        

        

            网格布局
        
        

    

Recommended tutorials: html video tutorial, css video tutorial

The above is the detailed content of What are the layout techniques for html pages?. For more information, please follow other related articles on the PHP Chinese website!