# CSS中不可不知道的布局-----实践篇 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

参考文献：juejin.cn/post/684490…

一.水平居中

1.对于行内元素，可以使用text-align进行布局

如果子元素是块级元素，为其设置 display: inline-block; 也🆗

 <div class="parent"> <a class="son">水平居中</a></div>
.parent{
    background-color: aquamarine;
    text-align:center;
    width:100%;
}
.son{
   background-color: coral;
    width:100px;
}

• 这种方式text-align是给父元素
• 子元素必须是行内布局
• 子元素的width必须小于text-align：center的父元素才会生效

2.对于块级元素，可以通过：margin：0 auto设置，这样子元素在水平方向上会均分剩余空间

 <div class="parent"> <div class="son">水平居中</div></div>
 .parent{
    background-color: aquamarine;
    
    width:100%;
}
.son{
   background-color: coral;
    width:100px;
    margin:0 auto;
}

• 子元素必须定宽且宽度必须小于父元素

3.子元素使用绝对定位，其top、right、bottom、left的值是相对于父元素的，其margin或者transform是相对于自身尺寸的

• 这样可以很好地兼容行内元素和块级元素
• 需要给定宽度
• 但是造成脱离文档流
• 父元素设置高，否则看不到父元素背景

.parent{
    background-color: aquamarine;
    height: 100px;
    position: relative;
    width:300px;
}
.son{
   background-color: coral;
   position:absolute;
    width:100px;
    left:50%;
    transform:translateX(-50%) ;
}

4.父元素设为flex布局

.parent{
    background-color: aquamarine;
   display:flex;
   justify-content: center;
}
.son{
   background-color: coral;
 
 
}

二.垂直居中

1.line-height

 <div class="parent"> <aclass="son">垂直居中</a></div>
 .parent{
    background-color: aquamarine;
    height: 200px;
  line-height: 200px;
}
.son{
   background-color: coral;
   height: 100px;
}

给定高度值，line-height与height等高
对行内布局元素有效

<div class="parent"> <div class="son">垂直居中</div></div>
.parent{
    background-color: aquamarine;
    height: 200px;
  line-height: 200px;
}
.son{
   background-color: coral;
   display: inline-block;
   height: 100px;
 
 
}

2.vertical-align

vertical-align的百分比值是相对于line-height计算的

• 需要添加font-size: 0; 才可以完全的垂直居中
• line-height也必须有

<div class="parent"> <img class="son" src="E:\ver.PNG" alt="垂直居中"></div>
 .parent{
    background-color: rgb(223, 127, 255);
    height: 200px;
  line-height: 200px;
  font-size: 0;
}
.son{
   background-color: coral;
   vertical-align: middle;
   height:150px;
}

3.tabel-cell

• 需要为父元素设置高度，不设置高度子元素自动撑开 看不出效果
• 宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效

 .parent{
    background-color: aquamarine;
    height: 200px;
 display: table-cell;
vertical-align: middle;
}
.son{
   background-color: coral;
   vertical-align: middle;
}

4.绝对定位

4.1 top相对于父元素,transform相对于自己

 .parent{
    background-color: aquamarine;
    height: 100px;
 position: relative;
}
.son{
   background-color: coral;
   position: absolute;
   top:50%;
   transform: translateY(-50%);
}

4.2 上下为0，让margin：auto 0;撑开

• 练习了父元素需要有height，否则就会脱离文档流

 .parent{
background-color: aquamarine;
  height: 100px;
 position: relative;
}
.son{
   background-color: coral;
   position: absolute;
  top:0;
  bottom: 0;
  margin:auto 0;
  height: 50px;
}

5.flex

5.1单个元素

 .parent{
background-color: aquamarine;
display: flex;
align-items: center;
height: 100px;
}
.son{
   background-color: coral;
}
--------------------------------------------------------
 .parent{
background-color: aquamarine;
display: flex;
height: 100px;
}
.son{
   background-color: coral;
   align-self: center;
}
--------------------------------------------------------
 .parent{
background-color: aquamarine;
display: flex;
height: 100px;
}
.son{
   background-color: coral;
  margin: auto 0;
}

5.2多个元素

    <div class="parent"> <div class="son">垂直居中</div><div class="son">垂直居中</div><div class="son">垂直居中</div></div>
.parent{
background-color: aquamarine;
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
}
.son{
   background-color: coral; 
}

三.水平垂直居中

相当于是水平与垂直居中的组合

1.text-align: center;水平居中，同时line-height和vertical-align垂直居中

 <div class="parent"> <img src="E:\to_job\exercise\css\ver.PNG" class="son"><div >垂直居中</div></div>
 .parent{
background-color: rgb(255, 127, 221);
height: 300x;
line-height: 300x;
 text-align: center;
font-size: 0;
}
.son{
   background-color: coral;
   height:150px;
   vertical-align: middle;
}

感觉没有垂直居中😂,可能是多了一个div的原因吧

2.table-cell

 .parent{
    background-color: aquamarine;
    height: 200px;
    width: 200px;
 display: table-cell;
vertical-align: middle;
}
.son{
   background-color: coral;
    width: 50px;
    margin: 0 auto;

3.绝对定位

3.1 top/left相对于父元素，margin相对于自己

 .parent{
    background-color: aquamarine;
   height: 200px;
    position: relative;
}
.son{
   background-color: coral;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

3.2 margin：auto自动撑开

 .parent{
    background-color: aquamarine;
   height: 200px;
    position: relative;
}
.son{
   background-color: coral;
    position: absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   margin: auto;
   height: 50px;
   width: 50px;
}

4.vh

 .parent{
    background-color: aquamarine;
    overflow: hidden;
}
.son{
   background-color: coral;
   margin: 50vh auto;  
   transform: translateY(-50%);
   width: 100px;
## }

5.flex

 .parent{
background-color: aquamarine;
display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.son{
   background-color: coral;
}
---------------------------------------------------------
 .parent{
background-color: aquamarine;
display: flex;
    justify-content: center;
    height: 100px;
}
.son{
   background-color: coral;
   align-self: center;
}
------------------------------------------------------
 .parent{
background-color: aquamarine;
display: flex;
    height: 100px;
}
.son{
   background-color: coral;
   margin：auto;
}

四.两栏布局

4.1 左边固定右边自适应

<div class="parent">  
        <div class="left">left</div>
        <div class="right"><div class="ri">right</div></div>
    </div>

1.float+width

.left{
   background-color: coral;
  width:150px;
  float: left;
}
    .right{
        background-color: rgb(191, 32, 167);
    }

2.float+margin-left,右边元素margin-left=左边宽度

.left{
   background-color: coral;
  width:150px;
  float: left;
}
    .right{
        
       background-color: rgb(191, 32, 167);
        margin-left: 150px;
    }

3.float+负margin-left,右边父元素设置100% 子元素margin-left=左边宽度

.left{
   background-color: coral;
  width:150px;
  float: left;
}
    .right{
       float: right;
       width: 100%;
        margin-left: -150px;
    }
    .ri{
        background-color: rgb(191, 32, 167);
        margin-left: 150px;
    }

4.float+overflow:通过BFC达到自适应。这里因为没有设置高度，不加overfloew:hidden也达到了同样的效果

.left{
   background-color: coral;
  width:150px;
  float: left;
}
    .right{   
       background-color: rgb(191, 32, 167);
       overflow: hidden;
    }

5.table布局，利用单元格自动分配达到自适应

根据内容大小自适应

 .parent{
    background-color: aquamarine;
    display: table;
    
}
.left{
   background-color: coral;
  width:150px;
 display: table-cell;
}
    .right{   
       background-color: rgb(191, 32, 167);
      display: table-cell;
    }

6.利用绝对定位：父相对子绝对 左固定右从右向左自适应

 .parent{
    background-color: aquamarine;
    position: relative;
    
}
.left{
   background-color: coral;
  width:150px;
 position: absolute;
 top:0;
 left:0;
}
    .right{   
       background-color: rgb(191, 32, 167);
       position: absolute;
 top:0;
 left:150px;
 right: 0;
    }

7.利用flex布局：flex均分父元素的剩余空间

 .parent{
    background-color: aquamarine;
    display: flex;
}
.left{
   background-color: coral;
  width:150px;
}
    .right{   
       background-color: rgb(191, 32, 167);
     flex:1;
    }

8.利用grid布局

 .parent{
    background-color: aquamarine;
    display: grid;
    grid-template-columns: 100px auto;   
}
.left{
   background-color: coral;
}
    .right{   
       background-color: rgb(191, 32, 167);
    }

4.2 左边自适应右边固定

1.float+负的margin

 .parent{
    background-color: aquamarine;
    padding-left: 150px;
}
.left{
   background-color: coral;
   float: left;
   width:100%;
   margin-left: -150px;
  
}
    .right{   
       background-color: rgb(191, 32, 167);
    float:right;
 width: 150px;
    }

2.用右浮动+左边idden

 .parent{
    background-color: aquamarine;
}
.left{
   background-color: coral;
}
    .right{   
       background-color: rgb(191, 32, 167);
    float:right;
 width: 150px;
    }
</style>
    <div class="parent">  
        <div class="right"><div class="ri">right</div></div>
        <div class="left">left</div>
    </div>

3.定位布局：父相对+子绝对+top+left+right

 .parent{
    background-color: aquamarine;
   position: relative;
}
.left{
   background-color: coral;
 position: absolute;
 top:0;
 left:0;
 right: 150px;
}
    .right{   
       background-color: rgb(191, 32, 167);
       position: absolute;
 top:0;
 right:0;
 width: 150px;
    }

4.ble布局：根据左边内容长度自适应

 .parent{
    background-color: aquamarine;
    display: table;   
}
.left{
   background-color: coral;
  display: table-cell;
}
    .right{   
       background-color: rgb(191, 32, 167);
       width:100px;
       display: table-cell;
    }

5.flex布局

 .parent{
    background-color: aquamarine;
    display: flex;   
}
.left{
   background-color: coral;
   flex:1;
}
    .right{   
       background-color: rgb(191, 32, 167);
       width:100px;
    }

6.grid布局

 .parent{
    background-color: aquamarine;
    display: grid;
    grid-template-columns: auto 100px;   
}
.left{
   background-color: coral;
}
    .right{   
       background-color: rgb(191, 32, 167);
    }

3.左边不定宽，右边自适应

1.float+overflow:hidden

 .parent{
    background-color: aquamarine;
}
.left{
   background-color: coral;
   float:left;
}
    .right{   
       background-color: rgb(191, 32, 167);
     overflow: hidden;
    }

2.flex布局

 .parent{
    background-color: aquamarine;
   display: flex;
}
.left{
   background-color: coral;
}
    .right{   
       background-color: rgb(191, 32, 167);
       flex:1;
    }

3.grid布局

 .parent{
    background-color: aquamarine;
   display: grid;
   grid-template-columns: auto 1fr;
}
.left{
   background-color: coral;
}
    .right{   
       background-color: rgb(191, 32, 167);
    }

4.左右两边都不定宽

table布局

 .parent{
    background-color: aquamarine;
   display: table;
}
.left{
   background-color: coral;
   display: table-cell;
  
}
    .right{   
       background-color: rgb(191, 32, 167);
       display: table-cell;
    }

五.三栏布局

1.最后一列自适应

1.float+margin

 <div class="parent">  
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right"><div class="ri">right</div></div>
    </div>
    
    .left{
   background-color: coral;
    width: 100px;
    float: left;
  
}
.middle{   
       background-color: rgb(22, 224, 59);
      
       width: 150px;
       float: left;
    }
    .right{   
       background-color: rgb(191, 32, 167);
       margin-left: 250px;
    }

2.float+overflow

.left{
   background-color: coral;
    width: 100px;
    float: left;
  
}
.middle{   
       background-color: rgb(22, 224, 59);
      
       width: 150px;
       float: left;
    }
    .right{   
       background-color: rgb(191, 32, 167);
       overflow: hidden;
    }

3.绝对定位

 .parent{
    background-color: aquamarine;
   position: relative;
}

.left{
   background-color: coral;
   position: absolute;
    width: 100px;
   top:0;
   left:0;
  
}
.middle{   
       background-color: rgb(22, 224, 59);
       position: absolute;
      top:0;
       width: 150px;
       margin-left: 100px;;
        
    }
    .right{   
      
       position: absolute;
      margin-left: -250px;
       top:0;
       right: 0;
       width: 100%;
       
    }

    .ri{
        background-color: rgb(191, 32, 167);
        margin-left: 250px;
    }

4.table布局

.parent{
    background-color: aquamarine;
   display: table;
}

.left{
   background-color: coral;
    width: 100px;
    display: table-cell;
  
}
.middle{   
       background-color: rgb(22, 224, 59);
      
       width: 150px;
       display: table-cell;
    }
    .right{   
       background-color: rgb(191, 32, 167);
       display: table-cell;
    }

5.flex布局

 .parent{
    background-color: aquamarine;
   display: flex;
}

.left{
   background-color: coral;
    width: 100px;
     
  
}
.middle{   
       background-color: rgb(22, 224, 59);
      
       width: 150px;
       
    }
    .right{   
       background-color: rgb(191, 32, 167);
      flex:1;
    }

6.grid布局

 .parent{
    background-color: aquamarine;
   display: grid;
   grid-template-columns: 100px 150px auto;
}
.left{
   background-color: coral;
}
.middle{   
       background-color: rgb(22, 224, 59);      
    }
    .right{   
       background-color: rgb(191, 32, 167);    
    }

2.中间自适应

1.float+margin

<div class="parent">  
        <div class="left">left</div>
        <div class="right"><div class="ri">right</div></div>
        <div class="middle"><div class="mi">middle</div></div>
    </div>
    
    .left{
   background-color: coral;
    width: 100px;
    float: left;
  
}
 .parent{
    background-color: aquamarine;
}
.left{
   background-color: coral;
    width: 100px;
    float: left;
}
.middle{   
    margin-left: -100px;
    margin-right: -150px;
    width: 100%; 
    float: left;
    }
.right{   
    background-color: rgb(191, 32, 167);
    float:right;
    width: 150px;
    }
.mi{
    margin-left: 100px;
    margin-right: 150px;
    background-color: rgb(22, 224, 59);
    }

2.float+overflow:中间自适应，随内容长度而变化

<div class="parent">  
        <div class="left">left</div>
        <div class="right"><div class="ri">right</div></div>
        <div class="middle"><div class="mi">middle</div></div>
    </div>
 .parent{
    background-color: aquamarine;
}
.left{
   background-color: coral;
    width: 100px;
    float: left;
}
.middle{   
    
    float: left;
    overflow: hidden;
    }
.right{   
    background-color: rgb(191, 32, 167);
    float:right;
    width: 150px;
    }

3.绝对定位

<div class="parent">  
        <div class="left">left</div>
        <div class="middle"><div class="mi">middle</div></div>
        <div class="right"><div class="ri">right</div></div>
    </div>

  .parent{
    background-color: aquamarine;
    position: relative;
}
.left{
   background-color: coral;
   position: absolute;
   width: 100px;
   top:0;
   left:0;
}
.middle{   
       background-color: chartreuse;
       position: absolute;
       top:0;
    left: 100px;
      right: 150px; 
      【不写绝对位置，写成margin-left: -100px;margin-right: -150px; 也🆗】
    }
    .right{   
      background-color: brown;
       position: absolute;
       top:0;
       right: 0;
       width:150px;
    }

4.table布局：中间根据内容自适应

 .parent{
    background-color: aquamarine;
   display: table;
}

.left{
   background-color: coral;
    width: 100px;
    display: table-cell;
  
}
.middle{   
       background-color: rgb(22, 224, 59);
       display: table-cell;
    }
    .right{   
       background-color: rgb(191, 32, 167);
       display: table-cell;
       width: 150px;
    }

5.flex布局

 .parent{
    background-color: aquamarine;
   display: flex;
}
.left{
   background-color: coral;
    width: 100px;
}
.middle{   
       background-color: rgb(22, 224, 59);
       flex:1; 
    }
    .right{   
       background-color: rgb(191, 32, 167); 
      width: 150px;
    }

6.grid布局

 .parent{
    background-color: aquamarine;
   display: grid;
   grid-template-columns: 100px auto 150px;
}
.left{
   background-color: coral;
}
.middle{   
       background-color: rgb(22, 224, 59);      
    }
    .right{   
       background-color: rgb(191, 32, 167);    
    }

7.双飞翼布局：用margin-right 和margin-left来填充左右两边固定元素

 <div class="parent"> 
        <div class="middle"><div class="mi">middle</div></div> 
        <div class="left">left</div>
        <div class="right"><div class="ri">right</div></div>
    </div>
.parent{
    background-color: aquamarine;
}
.left{
   background-color: coral;
   width: 100px;
   float: left;
   margin-left: -100%;/* 使元素上移一层 */
}
.middle{   
   float:left;    
   width:100%;    
    }
.mi{  
    background-color: chartreuse;
    margin-left: 100px;
    margin-right: 150px;
    }
.right{   
    background-color: brown;
    margin-left: -150px;
    float: left;
    width:150px;
    }

8.圣杯布局：采用border-boxing,用padding填充

.parent{
    background-color: aquamarine;
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 150px;
}
.left{
   background-color: coral;
   position: relative;
   width: 100px;
   float: left;
   left: -100px;
   margin-left: -100%;/* 使元素上移一层 */
}
.middle{
    background-color: chartreuse;   
   float:left;    
   width:100%;    
    }
 
.right{   
    background-color: brown;
    margin-left: -150px;
    float: left;
    width:150px;
    }
        .right::after{/*清除浮动*/
        clear: both;
    }

六.等宽布局

1.多列

 <div class="parent"> 
        <div class="middle">1</div> 
        <div class="middle">2</div>
        <div class="middle">3</div>
        <div class="middle">4</div>
        <div class="middle">5</div>
    </div>

1.float

.middle{
    margin-right: 2px;
    background-color: chartreuse;   
   float:left;    
   width:19%;    
    }
 

2.table

.parent{
     display: table;
     border-spacing: 20px;  /*设置间距*/
}
.middle{
    background-color: chartreuse;   
    display:table-cell;
    }

3.flex

.parent{
     display: flex; 
}
.middle{
  background-color: chartreuse;   
  flex:1;
  margin-right: 1%;;
    }

4.grid

.parent{
     display: grid; 
     grid-template-columns: repeat(5,1fr);
}
.middle{
  background-color: chartreuse;   
  margin-right: 1%;;
    }

2.九宫格布局

1.table实现

 <div class="parent"> 
        <div class="row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="row">
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="row">
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>
<style>
.parent{
    height: 300px;
    width: 600px;
     display: table; 
     
}
 .item{
    background-color: chartreuse;   
  border: 1px seashell solid;
    display: table-cell;
 }
    .row{
        display: table-row;
    }
</style>

2.flex实现

.parent{
    height: 300px;
    width: 600px;
     display: flex; 
     background-color: chartreuse; 
     flex-direction: column;
}
 .item{
  border: 1px seashell solid;
  flex:1;
 }
 .row{
        display: flex;
        flex:1;
    }

3.grid实现：貌似有点bug,下面空白了些

.parent{
    height: 100px;
    width: 300px;
     display: grid; 
     background-color: chartreuse; 
     grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr);  
}
 .item{
  border: 1px seashell solid;  
 }