一、CSS盒模型

通過(guò)box-sizing來(lái)切換盒模型類型，默認(rèn)為content-box

盒模型主要有兩種：border-box[IE盒模型]與content-box[W3C盒模型]

border-box：width表示：content+padding+border

content-box：width表示：content

二、垂直居中方式

定位方式

1.定位+負(fù)外邊距

.outer{  
  width:200px; 
  height:200px; 
  border:1px solid red;  
  position:relative; 
}   
.inner{  
  width:50px; 
  height:50px; 
  border:1px solid green;  
  position:absolute; 
  top:50%; 
  left:50%; 
  margin-top:-25px; 
  margin-left:-25px; 
}

2.定位+transform

.outer{  
  width:200px; 
  height:200px; 
  border:1px solid red;  
  position:relative; 
}   
.inner{  
  width:50px; 
  height:50px; 
  border:1px solid green;  
  position:absolute;   /**relative也可以*/ 
  top:50%; 
  left:50%; 
  transform: translate(-50%,-50%); 
}

3.定位+自動(dòng)外邊距

.outer{  
  width:200px; 
  height:200px; 
  border:1px solid red;  
  position:relative; 
}   
.inner{  
  width:50px; 
  height:50px; 
  border:1px solid green;  
  position:absolute; 
  top:0; 
  bottom:0; 
  left:0; 
  right:0; 
  margin:auto; 
}

flex布局

.outer{  
 width:200px; 
 height:200px; 
 border:1px solid red;  
 display:flex; 
 justify-content:center; 
 align-items:center; 
}   
.inner{  
 width:50px; 
 height:50px; 
 border:1px solid green; 
}

.outer{  
  width:200px; 
  height:200px; 
  border:1px solid red;  
  display:flex; 
}   
.inner{  
  width:50px; 
  height:50px; 
  border:1px solid green;  
  margin:auto; 
}

table

.outer {  
  display:table; 
  text-align:center; 
  width:400px; 
  height:400px; 
  border:1px solid #000; 
} 
.inner {  
  display:table-cell; 
  vertical-align:middle; 
  border:1px solid #000; 
}

grid布局

.outer{  
  width:200px; 
  height:200px; 
  border:1px solid red;  
  display:grid; 
}   
.inner{  
  width:50px; 
  height:50px; 
  border:1px solid green; 
  align-self: center; 
  justify-self: center; 
}

三、transition，animation和transform的區(qū)別
?transition（過(guò)渡）
指的是一個(gè)屬性從一個(gè)值過(guò)渡到另一個(gè)值
?animation（動(dòng)畫(huà)）
指的是在一段時(shí)間內(nèi)各種屬性進(jìn)行變化從而達(dá)到一個(gè)動(dòng)畫(huà)的效果
?transform（變換）
指的是一個(gè)整體的位置閥省變化

參考

超強(qiáng)整理