css系列 - 掘金

1. 布局方式

1.1 圣杯布局

圣杯布局: 中间的优先渲染，独立的左中右结构

具体实现圣杯布局的步骤：

让左右浮动在一行显示，相对定位
让中间模块的middle宽度为100%
让左边的色块移动到middle前面，margin-left:-100%
让右边的色块移动到middle的后面，margin-left:-宽度
给三个小块的父元素加一个内填充的属性padding,为的是填充挤到中间
给左边的块移动到左边left:-200px, 给右边的块移动到右边right:-200px

效果图：

<header>header</header>
   <div class="container">
      <div class="middle">midlle</div>
      <div class="left">left</div>
      <div class="right">right</div>
   </div>
<footer>footer</footer>

header, footer {
   height: 100px;
   width: 100%;
   background-color: antiquewhite;
}
.container {
   height: 200px;
   padding-left: 200px;
   padding-right: 300px;
}
.container > div {
   float: left;
   position: relative;
   height: 100%;
}
.left {
   width: 200px;
   height: 200px;
   background-color: burlywood;
   margin-left: -100%;
   left: -200px;
}
.right {
   width: 300px;
   height: 200px;
   background-color: burlywood;
   margin-left: -300px;
   right: -300px;
}
.middle {
   width: 100%;
   height: 200px;
   background-color: #b0f9c2;
}

1.2 双飞翼布局

具体实现双飞翼布局的步骤：

给左，中，右加浮动，在一行显示
给middle宽度为100%
让左边的模块移动middle的左边 margin-left:-100%
让右边的模块移动middle的右边 margin-left:-自己宽度
给middle里面的容器添加外间距 margin: 左右

效果：

<div class="main">
    <div class="middle">
			<div class="middle-inner">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

.main>div { 
    float:left;
    position: relative;
    height: 300px; 
}
.middle { 
    width: 100%;
    background-color: lightgreen 
}
.left { 
   width:200px;
   margin-left:-100%;
   background-color:#b0f9c2 
}
.right { 
   width: 200px;
   margin-left:-200px;
   background-color:pink 
}
.middle-inner{
   margin:0 200px; 
   background-color: burlywood; 
   height:300px;
}

1.3 三栏布局

三栏布局： 中间列自适应宽度，旁边两侧固定宽度

效果图：

第一种方式 --- 定位

<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>

.outer1 {
   position: relative;
}
.outer1 .left {
   position: absolute;
   width: 100px;
}
.outer1 .middle {
   margin: 0 200px 0 100px;
}
.outer1 .right {
   position: absolute;
   width: 200px;
   top: 0;
   right: 0;
}
注意：左右分别使用绝对定位，中间设置外边距

第二种方式 --- flex布局

<div class="outer outer2">
   <div class="left">2-left</div>
   <div class="middle">2-middle</div>
   <div class="right">2-right</div>
</div>

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}

第三种方式 --- 浮动原理

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
   <div class="middle">3-middle</div>
</div>

.outer3 .left{
   float: left;
   width: 100px;
}
.outer3 .right {
   float: right;
   width: 200px;
}
.outer3 .middle {
   margin: 0 200px 0 100px;
}

1.4 两栏布局

两栏布局：左右两栏，左边固定，右边自适应

效果图：

第一种方式 --- 浮动

<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>

.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}

第二种方式 --- flex

<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px;
   /* flex-grow: 0;
   flex-shrink:0;
   flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

注意：flex: 0 0 200px是flex: flex-grow flex-shrink flex-basis的简写

第三种方式 --- position

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>

.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}

第四种方式 --- position again

<div class="outer outer4">
    <div class="left">4-left</div>
    <div class="right">4-right</div>
</div>

.outer4 {
    position: relative;
}
.outer4 .left {
    width: 200px;
} 
.outer4 .right {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
}

1.5 水平垂直居中

对以下dom水平垂直居中

<div class="box" id="box">
   石小明
</div>

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.box {
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    border: 1px solid lightblue;
    background: lightcyan;
}

第一种：定位

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -25px;
}

注意：上面的方式是一定要知道具体的宽高。但下面的方式是知道宽高，但是没有用到宽高。

第二种：flex

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

注意：这种方式也是兼容性不是很好

第三种：JavaScript

let html = document.documentElement,
winW = html.clientWidth,
winH = html.clientHeight,
boxW = box.offsetWidth, // offsetWidth带边框
boxH = box.offsetHeight;

box.style.position = 'absolute';
box.style.left = (winW - boxW) / 2 + 'px';
box.style.top = (winH - boxH) / 2 + 'px';

第四种：table-cell

body {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

1.6 flex布局均匀分布后换行问题

ul下有多个li，每三个li排一列，多余的换行显示。代码如下：

display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;

当li不是3的整数倍时，会出现下图问题：

解决方案：

在ul的底部新增li，个数为数组总长度%3的余数即可

<li class="item" style="border: none;" v-for="(ite, idx) in list.length%3" :key="idx"></li>

2. 基本概念

2.1 BFC

什么是BFC

BFC全称 Block Formatting Context 即块级格式上下文，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

如何触发BFC

float不为 none
overflow的值不为 visible
position 为 absolute 或 fixed
display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
BFC的区域不会与float的元素区域重叠
BFC内部的元素会在垂直方向上放置
BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

清除浮动：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷
避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

3. 常见兼容方法

3.1 清除浮动的方法

添加新元素

<div class="parent">
  <div class="child"></div>
  <!-- 添加一个空元素，利用css提供的clear:both清除浮动 -->
  <div style="clear: both"></div>
</div>

使用伪元素

/* 对父元素添加伪元素 */
.parent::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
}

触发父元素BFC

/* 触发父元素BFC */
.parent {
  overflow: hidden;
  /* float: left; */
  /* position: absolute; */
  /* display: inline-block */
  /* 以上属性均可触发BFC */
}