面试总结css

box-sizing有哪些属性

标准盒子模型
box-sizing:content-box;
width = 内容的宽度
height = 内容的高度

IE盒子模型
box-sizing:border-box;
width = border + padding + 内容的宽度
height = border + padding + 内容的高度

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

清除浮动的几种方法

.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    zoom: 1;
}


.box{
  overflow: hidden;
}

水平垂直剧中

  /* 已知宽高 */
.box {
    width:100px;
    height:100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
  } 

/* 未知宽高 HTML5 */
.center {
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
/* flex */
.fatch{
    display: flex;
    align-items: center;
    justify-content: center;
}
.child{

}

flex

任何一个容器都可以指定为 Flex 布局。
display: flex;
行内元素也可以使用 Flex 布局。
display: inline-flex;
容器的属性
-flex-direction
-flex-wrap
-flex-flow
-justify-content
-align-items
-align-content

/* 排列方向 */
flex-direction: row/* 行 */ | row-reverse | column/* 柱 */ | column-reverse;
/* 是否换行 */
flex-wrap: nowrap/* 不换行 */ | wrap/* 换行 */ | wrap-reverse;
/* 排列方式和是否换行的合并写法 */
flex-flow:'' /*<flex-direction> || <flex-wrap>*/; 
/*X轴对齐方式*/
justify-content: flex-start | flex-end | center | space-between/* 空间-之间 */ | space-around/* 空间-围绕 */;
/*Y轴对齐方式*/
align-items: flex-start | flex-end | center | baseline | stretch/* 伸展 */;
/* Y轴多行对齐方式 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

省略号

white-space: nowrap;    /*不让换行*/
overflow:hidden;    /*不让溢出*/
text-overfolw: ellipsis;    /*溢出省略号*/

CSS3

border-radius 圆角
border-shadow 盒阴影

transform
移动
transform: translate(x轴移动距离, y轴移动距离) // 原点在左上角
旋转
transform: rotate(angle) // 括号内填写旋转角度
缩放
transform: scale(宽度的倍数, 高度的倍数)
倾斜
transform: skew(相对于x轴角度, 相对于y轴角度)
transition
transition: 指定需要变化的属性（例如width）,完成时间, 转速曲线, 延迟执行的时间

@keyframes 和 animation

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
} 

参考：https://www.jianshu.com/p/e01b3801c639