CSS创建三栏布局方案

image.png

有几种解决方案呢？

1. float方案

 
    

      

      

      

        

          浮动解决方案：三栏布局
        
      
    

实现原理：
左右栏分别浮动在窗口两边，且已经脱离文档流，中间块(处于文档流中)受左右浮动影响被卡在中间无法继续向左右伸展已达到自适应。
缺点：

1. dom元素需要遵循，左-右-中的书写顺序，否则会出现中间内容铺满整行，右边元素下沉的情况。
2. 当中间高度超出的情况会出现中间区域溢出。

优化方案：
清除浮动或创建BFC

    

      

      

      

        

          浮动解决方案：三栏布局
        
      
    

2. 绝对定位方案

 
      

        

        

        

          

            绝对定位解决方案
          
        
      

实现原理：
使元素脱离文档流，进行绝对定位。
缺点：
由于容器脱离了文档流，导致子元素也必须脱离文档流

3. flex布局方案

在 Flexbox 模型中，有三个核心概念：
– flex，需要布局的元素
– flex容器
– 排列方向（direction），决定了 flex 项的布局方向

image.png

   
     

       

       

           

             flex解决方案
           
         
       

     

缺点：
浏览器兼容性不太好，em...

4. table布局

      

          

          

              

                table布局解决方案
              
            
          

      

优点：
兼容性很好，设置简单
缺点：

• 无法设置栏边距，左中右模块间无间隔
• 对SEO不够友好
• 当一个格高度增加，其余的格也会被动增加高度

5. 网格布局

先了解下网格布局的基本定义吧！
Grid Container：设置了 display: gird 的元素。 是所有grid item的直接父项。
重要属性：

1. display将元素定义为 grid contaienr，并为其内容建立新的网格格式化上
   下文。
2. grid-template-columns / grid-template-rows:使用多个值来定义网格的列和行。这些值表示每个网格的大小

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Grid Item:Grid 容器的孩子（直接子元素）。
解决方案：