css学习笔记-三栏式布局

最新推荐文章于 2023-06-23 19:33:50 发布

sunxiaolinlinx

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量246

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sunxiaolinlinx/article/details/107816726

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

flexbox 布局

父元素的display属性设置为flex布局，然后左右元素设定宽度，中间自适应原始宽度设置为100%，如果顺序不对，使用使用order属性重新排序。

 .box{
            background-color: wheat;
            display: flex;
            height: 350px;
            width:600px;
        }
        .left{           
            background-color: teal;
            height: 100%;
            width:100px;
        }
        .center{      
            background-color: tomato;
            height: 100%;
            flex-grow: 1;
        }
        .right{            
            background-color: violet;
            height: 100%;
            width:100px;            
        }

<div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>       
    </div>

在这里插入图片描述

采用float浮动

,左右大小固定，中间自适应

 .box{
            background-color: wheat;
            height: 350px;
            width:600px;
        }
        .left{           
            background-color: teal;
            height: 300px;
            width:100px;
            float: left;
        }
        .center{      
            background-color: tomato;
            height: 320px;
            margin:0 100px;
        }
        .right{            
            background-color: violet;
            height: 300px;
            width:100px; 
            float: right;           
        }

<div class="box">
        <div class="left"></div>
        
        <div class="right"></div>     
        <div class="center"></div>  
    </div>

在这里插入图片描述

这种布局方式，dom 结构先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

绝对定位布局

左右元素设置position设置为绝对定位，便脱离的文档流，然后中间元素的margin-left和margin-right设置为左右元素的宽度。

.box{
            background-color: wheat;
            height: 350px;
            width:600px;
            position: relative;
        }
        .left{           
            background-color: teal;
            height: 300px;
            width:100px;
            position: absolute;
        }
        .center{      
            background-color: tomato;
            height: 320px;
            margin:0 100px;
        }
        .right{            
            background-color: violet;
            height: 300px;
            width:100px; 
            position: absolute;
            right: 0;          
        }

<div class="box">
        <div class="left"></div>          
        <div class="right"></div> 
        <div class="center"></div>      //或者设置right的top为0
 </div>

圣杯布局

两边固定宽度，中间自适应，dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。
三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。
然后设置 center 的宽度为 100%(实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行
在这里插入图片描述
通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行

然后给父元素左右margin设置为左右元素宽度，这样，结果就是中间元素占据一整行，左右元素在父元素padding部分浮动。

这样比其他的大一点

.box{
            background-color: wheat;
            height: 350px;
            width:600px;    
            padding: 0 100px;       
        }
        .left{           
            background-color: teal;
            height: 300px;
            width:100px;
            float: left;
            margin-left: -100%;
            position: relative;
             right: 100px;
        }
        .center{      
            background-color: tomato;
            height: 320px;
            float: left;
            width: 100%;
           
        }
        .right{            
            background-color: violet;
            height: 300px;
            width:100px; 
            float: left;  
            margin-left: -100px ;
            position: relative;
             left: 100px;
        }

<div class="box">
        <div class="center"></div>  
        <div class="left"></div>         
        <div class="right"></div>         
    </div>

双飞翼布局

1、三个部分都设定为左浮动，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行；
2、通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行；
3、center 部分增加一个内层 div，并设 margin: 0 100px；

 .box{
            background-color: wheat;
            height: 350px;
            width:600px;    
                
        }
        .left{           
            background-color: teal;
            height: 300px;
            width:100px;
            float: left;
            margin-left: -100%;
     
        }
        .center{      
          
            height: 320px;
            float: left;
            width: 100%;
           
        }
        .center_c{
            margin:0 100px;
            background-color: tomato;
            height: 100%;
        }
        .right{            
            background-color: violet;
            height: 300px;
            width:100px; 
            float: left;  
            margin-left: -100px ;
           
        }

<div class="box">
        <div class="center">
            <div class="center_c"></div>
        </div>  
        <div class="left"></div>         
        <div class="right"></div>         
    </div>

它与圣杯布局很像，也是全部往左浮动，但是在中间div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。与圣杯布局相比，少了position:relative，多了一个div。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200805162808595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnhpYW9saW5saW54,size_16,color_FFFFFF,t_70)

## BFC+float不会与浮动区域重叠
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200805163302893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnhpYW9saW5saW54,size_16,color_FFFFFF,t_70)

.box{
background-color: wheat;
height: 350px;
width:600px;

    }
    .left{           
        background-color: teal;
        height: 300px;
        width:100px;
        float: left;
        overflow: hidden;
 
    }
    .center{      
        background-color: tomato;
        height: 320px;
        overflow: hidden;       
    }
    .right{            
        background-color: violet;
        height: 300px;
        width:100px; 
        float: right;;  }

```