CSS面试题总结

一、CSS盒模型

通过box-sizing来切换盒模型类型，默认为content-box

盒模型主要有两种：border-box[IE盒模型]与content-box[W3C盒模型]

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

content-box：width表示：content

二、垂直居中方式

定位方式

1.定位+负外边距

.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.定位+自动外边距

.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的区别
✨transition（过渡）
指的是一个属性从一个值过渡到另一个值
✨animation（动画）
指的是在一段时间内各种属性进行变化从而达到一个动画的效果
✨transform（变换）
指的是一个整体的位置阀省变化

参考

超强整理