CSS的常见布局方式

Css中目前常见的布局方式有：文档流布局，定位布局，浮动布局，flex布局，grid 网格布局
#1：文档流布局（display 属性） 、 定位布局（ position 属性）、 浮动布局（float属性）基于盒模型布局
#2：flex布局基于轴线布局
#3：grid布局基于单元格布局

三者的相同点与不同点？

相同点：三种布局方式都是便于网页的设计与开发，取长补短，顺应web发展趋势。
1：盒模型布局相对于table布局更加灵活(div方式一边读一边加载，而table就要等到整个table完成后才一次性载入)，SEO更加友好
2：flex布局相对于盒模型布局更加灵活(我们不能只使用一个属性来实现垂直居中布局，flex可以)
3：grid布局与flex布局有一定的相似性，也存在重大区别，属于进阶布局

不同点： 广度：盒模型布局和flex布局属于一维布局，grid布局属于二维布局
深度：盒模型布局属于基础布局方式，flex属于过渡型布局方式，grid属于高级布局方式

常用的 CSS 布局

介绍了 CSS 的布局方式之后，我们来看一下常用的 CSS 布局有哪些

1：等分布局

① float+百分比

    
    


    
    

      

        
Html Css 01
      
      

        
Html Css 02
      
      

        
Html Css 03
      
      

        
Html Css 04
      
    

② Flex

    
    


    
    

      

        
Html Css 01
      
      

        
Html Css 02
      
      

        
Html Css 03
      
      

        
Html Css 04
      
    

③ table

    
    


    
    

      

        
Html Css 01
      
      

        
Html Css 02
      
      

        
Html Css 03
      
      

        
Html Css 04
      
    

2：等高布局

① float

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等，可用控制台查看。
兼容性较好

    
    


    
    

      

        
left
      
      

        
Html Css
        
Html Css
      
    

② flex

设置flex布局之后，在侧轴上的排列方式默认为stretch，也就是未设置高度时，默认占满了整个容器的高；

    
    


    
    

      

        
left
      
      

        
Html Css
        
Html Css
      
    

③ table

table 的特性为每列等宽，每行等高可以用于解决此需求

    
    


    
    

      

        
left
      
      

        
Html Css
        
Html Css
      
    

3：顶部、底部定高，中间自适应

① position定位

    
    


    
    
    

        

        

          
Html Css
          

        
        

    

顶部、底部定高，中间自适应（无法紧贴底部改进版本）

    
    


    
    

        

        

          
Html Css
          

        
        

    

顶部、底部定高且固定，中间自适应（变形版本）

    
    


    
    

        

        

          
Html Css
          

        
        

    

② Flex布局（推荐）

    
    


    
      

        

        

          
Html Css
          

        
        

      

4: 左侧导航定宽、右侧内容自适应

① position定位

② float + margin

③Flex布局

④ float + BFC

⑤ 标准浏览器方法（推荐）

这种方法对IE7及之前版本无效，若不考虑IE7及其之前版本则推荐使用标准方法

5: 左右固定，中间自适应三栏布局（又名：圣杯布局）

圣杯是西方表达“渴求之物"的意思，不是一种对页面的形象表达。
双飞翼据考源自淘宝UED，应该是一种页面的形象的表达

圣杯布局是讨论「三栏液态布局」的实现，来历是Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，In Search of the Holy Grail · An A List Apart Article它主要讲述了网页中关于最佳圣杯的实现方法。

所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。

① float + 负margin

    
    
 

    

        
Html Css
        
Html Css
        
Html Css
    

② 左右固定，中间自适应三栏布局 （改进版本 又名：双飞翼布局）

其实双飞翼布局是为了解决圣杯布局的弊端提出的，上面的圣杯布局的代码存在一个问题，当你将浏览器宽度缩短到一定程度，使得中间子元素的宽度比左右子元素宽度小的时候，这时候布局就会出现问题。所以首先，这提示了我们在使用圣杯布局的时候一定要设置整个容器的最小宽度。

双飞翼布局和圣杯布局的区别？（参考地址）

1：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
2：不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
3：双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

注：如果总宽度小于左边元素或者右边元素的时候，还是会有问题

    
    
 

    

        

            

                Html Css
            
        
        
Html Css
        
Html Css
    

③ flex布局（推荐）

    
    
    


    

        
Html Css
        
Html Css
        
Html Css
    

6: 多列等高布局

https://juejin.im/post/5b0fb34151882515662238fd
我们在写页面的时候，经常会遇到多栏布局的情况，内容的多少影响栏目的高低，这样在排版布局以及给用户的体验不是很好

① 使用负margin-bottom和正padding-bottom对冲实现

7: 文字、div 水平垂直居中

① 固定宽高，单行文字水平居中

    
    


    

        
Html Css
    

② 固定宽高，单行文字垂直居中

    
    


    

        
Html Css
    

③ 固定宽高，多行文字水平垂直居中

3-1：vertical-align:middle方式

    
    


    

        
Html Css Html CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml Css
    

③ 宽高固定，多行文字水平垂直居中

3-2： Flex方式
display:table方式不推荐使用，影响原有布局

    
    


    

        
Html Css Html CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml Css
    

④ 宽高不固定，多行文字水平垂直居中

    
    


    

        
Html Css Html CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml CssHtml Css
    

⑤ 子元素宽高固定，div水平居中

⑥ 子元素宽高固定，div垂直居中

⑦ 子元素宽高不固定，div水平垂直居中

    
    


    

        

            
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。