css布局

一、两栏布局：左侧定宽，右侧自适应

1. 左侧脱离标准文本流，右侧让出左侧宽度

        1.1 浮动+margin

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: azure;
}
.right {
  margin-left: 200px;
  height: 300px;
  background-color: rgb(194, 209, 209);
}

        1.2 定位+定位

.left {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: azure;
}
.right {
  position: absolute;
  left: 200px;
  right: 0;
  height: 300px;
  background-color: rgb(194, 209, 209);
}

        1.3 浮动+BFC：BFC的区域不会与浮动元素发生重叠

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: azure;
}
.right {
  /* 给正常元素添加BFC属性，正常元素就不会被遮挡，且环绕浮动元素排开 */
  overflow: hidden;
  height: 300px;
  background-color: rgb(194, 209, 209);
}

 2. flex布局

.miniPanel {
  display: flex;
}
.left {
  width: 200px;
  height: 200px;
  background-color: azure;
}
.right {
  flex: 1;
  height: 300px;
  background-color: rgb(194, 209, 209);
}

二、三栏布局：两侧定宽，中间自适应

1. 双飞翼布局

        实现步骤： 

                1 center内容放在最前面（优先渲染），并由center_wrap包裹

                2 设置left、right、center_warp的左浮动与宽度

                3 设置center的左右外边距（为两侧流出空间）

                4 设置left的左边距为-100%（百分数是根据父元素的宽度调整）

                5 设置right的左边距为 -right的宽度

      <div class="center_wrap"><div class="center"></div></div>
      <div class="left"></div>
      <div class="right"></div>

/* 去掉注释得完整效果 */
.center_wrap {
  float: left;
  width: 100%;
}
.center {
  /* margin: 0 300px; */
  height: 500px;
  background: rgb(223, 178, 178);
}
.left {
  float: left;
  /* margin-left: -100%; */
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}
.right {
  float: left;
  /* margin-left: -300px; */
  width: 300px;
  height: 200px;
  background-color: rgb(206, 175, 135);
}

        第二步后效果： 

        完整效果：

2. 定位+margin

.center {
  margin: 0 300px;
  height: 500px;
  background: rgb(223, 178, 178);
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 200px;
  background-color: rgb(206, 175, 135);
}

3. flex布局 

.miniPanel {
  display: flex;
}
.left {
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}
.center {
  flex: 1;
  height: 500px;
  background: rgb(223, 178, 178);
}
.right {
  width: 300px;
  height: 200px;
  background-color: rgb(206, 175, 135);
}

三、居中布局

1. 水平居中

（1）行内元素水平居中 =》父元素 text-align: center;

（2）定宽块级元素水平居中 =》margin:0 auto;

（3）不定宽块级元素水平居中 =》display: inline-block;父元素 text-align: center;

（4）flex布局

2. 垂直布局

（1）单行文本 p span =》  line-height 为元素height

（2）块级元素 =》子绝父相，top: 0; bottom: 0; margin: auto;

（3）flex布局

3. 水平垂直布局

 定位+translate：可不定宽高（子元素被撑开）

.father {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: antiquewhite;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: aquamarine;
}

定位+margin负位置：要定宽高

.father {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: antiquewhite;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

定位+margin:auto：要定宽高

.father {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: antiquewhite;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

flex布局

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

 另外工作记录：登录页面水平垂直布局，意外解决了键盘弹出遮挡输入框的问题。

 要补充：

        BFC块级上下文 ：参考 详解BFC：块级格式化上下文_bfc块级格式化上下文-优快云博客

        元素的排版顺序 -- 标准文档流 浮动 定位