1. css 垂直居中

1. inline元素

   • height和line-height一致

2. block元素

   1. 絕對定位（當已知子元素的寬高）

      • 利用父元素相對定位，子元素絕對定位，並且處置、水平方向個偏移50%

      • 子元素利用負值margin偏移自身寬度、長度的一半

   2. translate()屬性（不知子元素的寬高）

      • 利用父元素相對定位，子元素絕對定位，並且處置、水平方向個偏移50%

      • 子元素transform: translate(-50%, 50%)

   3. flex:align-item

   4. grid

   5. display: table-cell

// 1. 絕對定位（當已知子元素的寬高）
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 300px;
  margin-left: -100px;
  margin-top: -150px;
}
​
// 2. translate()屬性（不知子元素的寬高）
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%)
}
​
// 3. flex
div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
​
// 4. grid
div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}
​
// 5. table
.parent {
    display: table-cell;
    height: 200px;
    width: 200px;
    background-color: orange;
    text-align: center;
    vertical-align: middle;
}
.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: blue;
}
​
// 6. other
div.parent {
  font-size: 0;
  text-align: center;
   &::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
   }
}
div.child{
 display: inline-block;
 vertical-align: middle;
}
 
    Copied!
  
 

#2. css固定頂部,餘下佔據100%

• 父容器display: flex; 頂部部分height: xx px;餘下flex: 1;

• 絕對定位佈局：父容器100%，主要子部分margin-top: xx px;剩下子元素使用absolute+left/top定位的能力，進行佈局。

• 父容器padding-top:xx px,頂部部分margin-top:- xx px;餘下height: 100%;

三欄佈局：

<div class="container">
  <div class="left">1</div>
  <div class="main">2</div>
  <div class="right">3</div>
</div>
​
/* 1. flex佈局 */
.container{
 display:flex;
 justify-content: center;
 height: 200px;
 background: #eee;
}
.left {
  width: 200px;
  background-color: red;
  height: 100%;
 }
.main {
  background-color: yellow;
  flex: 1; /*重點*/
}
.right {
  width: 200px;
  background-color: green;
}
​
/* 2.絕對定位佈局 */
.container {
 position: relative;
 background:#eee;
 height:200px;
}
.main {
 width: 100%;
 margin: 0 120px; /* 兩邊算mian中的位置 */
 background-color: yellow;
}
.left {
 position: absolute;
 left: 0;
 top: 0;
 width: 100px;
 height: 100%; /* 重要：absolute不會佔據空間，需要主動設定height佔滿 */
 background-color: red;
}
.right {
 position: absolute;
 right: 0;
 top: 0;
 width: 100px;
 height: 100%;
 background-color: green;
}
​
/* 3.父容器+padding，子容器-margin */
.container {
 padding: 0 120px;
 background:#eee;
 height:200px;
}
.main {
 width: 100%;
 background-color: yellow;
}
.left {
 margin-left: -100px;
 background-color: red;
}
.right {
 margin-left: -100px;
 background-color: green;
}
 
    Copied!
  
 

#3. css三角形

margin/padding順序是：上右下左；

三角形設定未隱形邊框，方向是（方向指的是箭頭方向）：下左上右（相反）

.box{
    width:0px;
    height:0px;
    border: 50px solid;
  /*獲得紅色向右的箭頭*/
    border-color:blue green orange red;
}
 
    Copied!
  

更多：https://mp.weixin.qq.com/s/e_gXXJTFocNxDaG0U_iB_g

#4. 清除浮動

@mixin clearfix {
   &:after {
    content: "";
    display: table;
    clear: both;
   }
}
 
    Copied!
  
 

#5. 其他

/*
  linear-gradient： 方向：0deg = to top。
  https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
*/
background: linear-gradient(135deg, #30D2FF, #4526F6);
​
/*
  offset-x | offset-y | blur-radius | spread-radius | color
  https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);