关于css:css基础之布局

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

两栏布局

  <div class="main1">
    <div class="box-m1 m1-left">
        <p>leftleftleftleftleftleftleft</p>
    </div>
    <div class="box-m1 m1-right">
      <p>rightrightrightrightrightright</p>
    </div>
   
  </div>

第一种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

 <div class="box1">
    程度垂直自适应布局
  </div>

  .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

  <div class="box2">
    <div class="inner">
      程度垂直自适应布局
    </div>
  </div>

.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大小，不蕴含任务栏标题栏以及底部工具栏的浏览器区域大小。。