css基础之布局

css的布局：float，position，flex、transform，grid，::after::before

两栏布局

  
    
        leftleftleftleftleftleftleft
    
    
      rightrightrightrightrightright

第一种float and absolute and float+BFC 下面是float+BFC

   .main1 {
      word-break: break-all;
    }
    .m1-left {
      float: left;
      margin-right: 20px;
      background-color: red;
    }
    .m1-right {
      overflow: hidden; /*左侧元素会因为浮动盖在右侧元素上，因此要将右侧元素变成BFC*/
      zoom: 1;
      background-color: gray;
    }

第二种flex IE10及以上其他没毛病

    .main1 {
      display: flex;
      word-break: break-all;
    }
    .m1-left{
      margin-right: 20px;
      background-color: red;
    }
    .m1-right{
      flex: 1;
      background-color: gray;
    }

第三种grid 基于网格

    .main1 {
      display:grid; 
      grid-template-columns:auto 1fr; 
      grid-gap:20px;
      word-break: break-all;
    }
     .m1-left{
      margin-right: 20px;
      background-color: red;
    }
    .m1-right{
      background-color: gray;
    }

Flexbox 和Grid

Flexbox用于一维布局，Grid用于二维布局，即如果在一个方向上排列内容项用flex，
如果要在两个维度（包括行和列）中创建整个布局，那么应该使用CSS Grid，如9宫格等
两者之间的另一个核心差异是Flexbox基于内容，而Grid基于布局

三栏布局

1浮动 2绝对定位 3.flexbox 4.display:table 5.grid 6.圣杯布局 7.双飞翼布局
其中flex:1设置在center上即可。
grid：左右留出200px 中间自适应

  .main1 {
      display: grid; 
      width: 100%; 
      grid-template-columns: 200px auto 200px; 
    }

其他方案不列举了，毕竟现在都流行Flexbox 和Grid

垂直水平居中元素

margin | absolute-transform:translate

 
    水平垂直自适应布局

  .box1 {
      width: 200px;
      margin: 50% auto;
      border: 1px solid yellowgreen;
    }
  .box1 {
      position: absolute;
      top: 50%;
      right: 50%;
      width: 100px;
      height: 100px;
      background-color: pink;
      transform: translate(-50%,50%);
    }

flex

  
    
      水平垂直自适应布局

.box2{
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
/*table*/
.box2{
      width: 500px;
      height: 200px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
   }
/*grid*/
.box2{
     width: 100vw;
     height: 100vh;
     display: grid;
     align-items:center;
     justify-content: center;
  }

视口单位(Viewport units)

根据CSS3规范，视口单位主要包括以下4个：

  1.vw：1vw等于视口宽度的1%。

  2.vh：1vh等于视口高度的1%。

  3.vmin：选取vw和vh中最小的那个。

  4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。