前端知识（一）

方框水平垂直中心问题

1.使用定位（三种实现方法） 2.使用JavaScript 3.使用flex布局（最推荐）4.使用 display :table-cell

定位实施代码（固定宽度和高度，需要知道具体值）

 .box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: aqua;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);  // 基于CSS3 或者成为你自己的计算 margin
      margin: auto;            //   margin-top:-100px ; margin-left:-100px ; 一个半宽高

  }
 body{
   position: relative;
 }

定位实施代码 (固定宽度和高度，无需知道具体值)：

 .box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: aqua;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
 body{
   position: relative;
 }

JS实施代码：

 let HTML = document.documentElement, 
        winW = HTML.clientWidth,
        winH = HTML.clientHeight,
        boxW = box.offsetWidth,
        boxH = box.offsetHeight;
        box.style.position = "absolute";
        box.style.left = (winW - boxW) / 2 + "px";
        box.style.top= (winH - boxH) / 2 + "px";

用flex布局时无需使用它。 父相子绝 了

在父元素中

 html,
  body{
    height: 100%;
    overflow: hidden;
  }
body{
  display: flex;
  justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
  }

如果使用table-cell(固定宽度和高度是必需的，自定义不能是百分比。) （理解）

.father{       // 使用父元素
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    /*必须具有固定的宽度和高度*/
    width: 500px;
    height: 500px;
}
 .box{
    width: 200px;
    height: 200px;
    background-color: aqua;
    display: inline-block;
  }

几种经典布局

圣杯布局

在中间内容中，两侧的两列可以等比缩小。 靠近中间center

[外链图片传输失败,源站可以具有防盗链机制。,建议保存图片并直接上传。(img-YsjWBvYm-1589012129707)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200509143648895.png)]

以下贴纸使用relative的position 和 margin调位置， 重点是，left的margin-left=-100%是直接到center的左上部分 需要理解和消化

Css:

 html,
  body {
    height: 100%;

  }

  .container {
    height: 100%;
    padding: 0 200px;
  }

  .left,
  .right {
    width: 200px;     // css中等表达尽可能小，影响速度。,性能不好
    /*为了显示 看效果 */
    min-height: 200px;
    background-color: lightblue; 

    /* margin-left: -200px;  //这真的很难理解 在左边这样写是可以的。
    position: relative;
    right: -200px; */

  }
  .center{
    width: 100%;
    word-wrap: break-word; // 文字大于div宽度将自动换行。
    min-height: 400px;
    background-color: lightsalmon;

  }
  .left,.right,
  .center{
    float: left;
  }
  .left{
    margin-left: -100%;  
    // （1） 页面无法打开，container在极限范围内，所以我们使用。 margin-left 向左移动（移动到末尾将自动弹起）到上排。
    position: relative;
    left: -200px;
    // ② 然后使用left 向左调200px 在左侧完成
  }
  .right{
    margin-right: -200px;
  }

html:

双飞翼布局

flex布局（高级、方便）

也可以通过定位来解决。

定位就是 中间元件margin ： 0 200px 两边都是200px 中间适应就足够了， 然后使用两边 left：0 和right：0 过来把它放在两边 ，此解决方案是第二个flex的难度

移动响应布局开发的三种场景

• media (media和rem比较常规)
• rem
• flex
• vh/vw
• …

课后作业

1.使用css，让一个div消失在视野中，使用想象力

2.请说明z-index它是如何工作的，使用范围？

1. 文档流
2. 定位

3.谈谈你对HTML5的理解

4.如何制作div里面的文本垂直居中，文本的大小根据屏幕大小调整？

5.无论其他因素如何，以下哪项具有更高的渲染性能
.bax a{ // 性能不好，因为您必须查询两次。
}

a{
} //因为css在查询模式下，选择器从右向左查询，性能良好。