CSS各种主流布局详解笔记和案例代码

居中布局

水平居中布局

水平居中是指子元素在当前父级元素中的位置是相对水平居中的

  • 方案一 inline-block + text-algin
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
 <style>
        .parent{
            border: 3px solid red;
            height: 200px;
            width: 400px;
            /* text-align:为文本内容设置对齐方式
               left:左对齐
               right:右对齐
               center:居中对齐 
             */
            text-align: center;
        }
        .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
            /* 本来child是一个div,不是一个文本内容
                display:inline-block是把元素表现为外在inline,内在block
                而外在的inline就是属于文本性质
                所以这个时候应该遵循上面的text-align属性
                而不设置为inline是因为inline的width和height会丢失
             */
            display: inline-block;
        }
    </style>

总结第一种方案
浏览器兼容性好
但是text-align会有继承效果,也就是child里面的内容元素也是相对child是居中的。解决办法就是child的style中重写text-align值

  • 方案二 table/block + margin
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
 <style>
        .parent{
            border: 3px solid red;
            height: 200px;
            width: 400px;
        }
        .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
             /* display: block; */
            display: table;
            margin: auto;
        }
    </style>

总结第二种方案
只需要对子元素进行设置
如果子元素脱离文档流,margin属性就会失效,这个时候无法使用此方法
脱离文档流的情况:开启float,position:fixed和position:absolute时候

  • 方案三 absolute + transform
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
 <style>
        .parent{
            border: 3px solid red;
            height: 200px;
            width: 400px;
            /* 开启定位后,下面的absolute才会生效
               position无论是absolute,fixed,relative都是表示开启定位
             */
            position: relative;
        }
        .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
            /* absolute是相当于最近一级开启定位的父级元素 */
            position: absolute;
            /* 相对开启了relative定位的parent元素,左移一半 */
            left: 50%;
            /* 向右平移自身的一般,让自己中间对准parent的中间 */
            transform: translateX(-50%);
        }
    </style>

总结第三种方案
父级元素无论是否脱离文档流都无所谓
transform兼容性不好

垂直居中布局

垂直居中是指子元素在当前父级元素中的位置是相对垂直居中的

  • 方案一 table-cell + vertical-align
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
  .parent{
            border: 3px solid red;
            height: 400px;
            width: 400px;
            /* 
                vertical-align是用来设置文本内容的
             */
            vertical-align: middle;
            /* 
            然后display:table-cell是类似的一种文本,所以也能够实现内容的居中
            display:table是设置当前元素为<table>效果
            display:table-cell是设置当前元素为<td>
             */
            display: table-cell;
        }
   .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
        }

总结方案一
浏览器兼容性比较好

  • 方案二 absolute + transform
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
     .parent{
            border: 3px solid red;
            height: 400px;
            width: 400px;
            position: relative;
           
        }
     .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
        }

总结方案二
和之前一样的啦,就是兼容性不好,transform是CSS3中的内容了
不过是真的好用,父级元素是否脱离文档流都不影响子元素的垂直居中,可以正常的使用。我也喜欢用这种方式进行居中

附加一个垂直居中,不是布局哈

<div class="A">
        hhh
</div>
  .A{
        border: 3px solid black;
        height: 200px;
        width: 200px;
        line-height: 200px;
        }

水平和垂直同时居中布局

其实也就是前面的两种,给他同时居中在一起

  • 方案一 水平方向:table + margin,垂直方向:table-cell + vertical-align
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
    <style>
        .parent{
            border: 3px solid red;
            height: 400px;
            width: 400px;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
    </style>
  • 方案二 水平方向:absolute + transform,垂直方向:absolute + transform
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
<style>
        .parent{
            border: 3px solid red;
            height: 400px;
            width: 400px;
            position: relative;
        }
        .child{
            border: 3px solid black;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50% , -50%);
        }
</style>

总结
方案二更好,但是兼容性不好

多列布局

就是多个元素进行一行的列排列

两列布局(一列定宽,一列自适应,一般是左定,右自适应)

  • 方案一 float + margin
 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
  </div>
    .box{
         background: palegreen;
     }
    .left,.right{
         height: 200px;
    }
    .left{
         width: 200px;
         background-color: red;
         /* 脱离文档流 */
         float: left;
        } 
    .right{
         background: black;
         color: blue;
         /* 消除左列定宽的影响 */
         margin-left: 200px;
    }

总结方案一
简短简单,但是margin要和定宽的值一样
不浮动和浮动的在一起会产生兼容性的问题
right中的元素使用清除浮动会往下平移

  • 方案二 float + margin(升级版)
 <div class="box">
        <div class="left"></div>
        <div class="right-fix">
            <div class="right"></div>
        </div>
  </div>
  .box{
            background: palegreen;
      }
  .left,.right{
            height: 200px;
    }
  .left{
           width: 200px;
           background-color: red;
           /* 脱离文档流 */
           float: left;
           /* 提高层级 */
           position: relative;
    } 
        /* margin-left是为了提上去
           padding-left和box-sizing是为了抵消margin-left的影响
         */
  .right-fix {
            float: right;
            width: 100%;
            margin-left: -200px;
            padding-left: 200px;
            box-sizing: border-box;
     }
  .right{
            background: black;
            color: blue;
    }

总结第二种方案
确实让一行左右都是浮动,解决空隙问题,同时right标签中子元素使用clear属性也不会挤压到下面,但是比较繁琐

  • 方案二 float + overflow
 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
  </div>
   .box{
            background: palegreen;
        }
    .left,.right{
        height: 200px;
    }
    .left{
       width: 200px;
       background-color: red;
       float: left;
    } 
 
    .right{
        background: black;
        color: blue;
        /* overflow就是开启BFC
           BFC就是一种块级格式化上下文
           一块独立渲染区域,内部元素的渲染不会影响边界内的元素
           但是这里只能通过overflow或者float:right开启
           在这里补充,开启BCF的情况有
           float不是none时候
           position是absolute或者fixed的时候
           display是flex,inline-flex,inline-block,table-cell,table-caption
           overflow不是visible时候
           根元素
        */
        overflow: hidden;
    }

总结方案二
方便,但是overflow会让内容溢出会隐藏,同时也会有空白

  • 方案三 display的相关的table
 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
  </div>
  .box{
      background: palegreen
      /* table会自动等宽的分配宽度给子table-cell
         而这个时候,left都定宽,所以剩下的都给right
       */
      display: table;
      /* tableLayout 属性用来显示表格单元格、行、列的算法规则。
          列宽由表格宽度和列宽度设定 */
      table-layout: fixed;
      width: 100%;
  }
  .left,.right{
      height: 200px;
      display: table-cell;
  }
  .left{
     width: 200px;
     background-color: red;
  } 

  .right{
      background: black;
      color: blue;
  }

总结,受到表格的影响

三列布局(两个挨着的定宽,变上一个自适应)

  • 方案一 float + margin
<div class="box">
    <div class="left"></div>
    <div class="center">
      中间
    </div>
    <div class="right"></div>
</div>
 .box{
      background: palegreen;
      width: 100%;
  }
  .left,.right,.center{
      height: 200px;
  }
  .left{
     width: 200px;
     background-color: red;
     float: left;
  } 
  .center{
      width: 200px;
      background-color: yellow;
      float: left;
  }
  .right{
      background: black;
      color: blue;
      margin-left: 400px;
  }
  • 方案二 float + overflow
<div class="box">
    <div class="left"></div>
    <div class="center">
      中间
    </div>
    <div class="right"></div>
</div>
 .box{
      background: palegreen;
      width: 100%;
  }
  .left,.right,.center{
      height: 200px;
  }
  .left{
     width: 200px;
     background-color: red;
     float: left;
  } 
  .center{
      width: 200px;
      background-color: yellow;
      float: left;
  }
  .right{
      background: black;
      color: blue;
      overflow: hidden;
  }
  • 方案三 display属性的table
<div class="box">
    <div class="left"></div>
    <div class="center">
      中间
    </div>
    <div class="right"></div>
</div>
.box{
    background: palegreen;
    width: 100%;
    display: table;
    table-layout: fixed;
}
.left,.right,.center{
    height: 200px;
    display: table-cell;
}
.left{
   width: 200px;
   background-color: red;

} 
.center{
    width: 200px;
    background-color: yellow;
    
}
.right{
    background: black;
    color: blue;
   
}

圣杯布局(特殊的三列布局,两边等宽,中间自适应)

  • 方案一
<body>
    <!-- 这个结构是因为,浮动在前,后面的元素可以挤压上来,而浮动在后,自身不能去挤压前面 -->
 <div class="left"></div>
 <div class="right"></div>
 <div class="center"></div>
</body>
<style>
  .left,.center,.right{
      height: 300px;
  }
  .left,.right{
      width:300px;
     
  }
  .left{
      background-color: blue;
      float: left;
  }
  .center{
      background-color: yellow;
      margin-left: 300px;
      margin-right: 300px;
  }
  .right{
      background-color: palegreen;
      float: right;
  }
</style>

总结方案一
虽然能够实现要求,但是这里的html结构顺序不好,我们应该先让中间的内容展现出来,所以请看方案二

  • 方案二
<body>
    <div class="box">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
  .box{
      height: 300px;
      /* left的宽度 */
      margin-left: 300px;

      /* right的宽度 */
      margin-right: 300px;
  } 
  .left,.center,.right{
      height: 300px;
      float: left;
  }
  .left,.right{
      width:300px;
  }
  .left{
      background-color: blue;
      margin-left: -100%;
      position: relative;
      left: -300px;
  }
  .right{
      background-color: palegreen;
      margin-left: -300px;
      position: relative;
      right: -300px;
  }
  .center{
      width: 100%;
      background-color: yellow;
  }

双飞翼布局

就是改进过的圣杯布局

<body>
    <div class="box">
        <div class="center">
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
<style>
    .box{
        height: 300px;
    } 
    .left,.center,.right{
        height: 300px;
        float: left;
    }
    .left,.right{
        width:300px;
    }
    .left{
        background-color: blue;
        /* 相对于父级,直接100%的话,刚好能到前面与center的margin-left重合 */
        margin-left: -100%;
        
    }
    .right{
        background-color: palegreen;
        /* 前面的left已经前进100%了,而left自己占了300px 
           对于right而言,自己也前进300px
           而这个时候,只要在前进自己的宽度就可以实现最总效果
        */
        margin-left: -300px;
    }
    .center{
        width: 100%;
        background-color: yellow;
    }
    .inner{
        height:300px;
        background-color: hotpink;
        /* 预留的左右的位置 */
        margin-right: 300px;
        margin-left: 300px;
    }
  </style>

等分布局(每一列的宽度一样)

待更新

等高布局(每一列的高度一样)

待更新

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页