关于css:css基础之布局

1次阅读

共计 2310 个字符，预计需要花费 6 分钟才能阅读完成。

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 用于二维布局，即如果在一个方向上排列内容项用 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;
  }

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

正文完