面试题总结

1、请用css使一个div垂直居中

方法1：table-cell

html结构：

<div class="box box1">
    <span>垂直居中</span>
</div>

css：

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

方法2：display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

方法3：绝对定位和负边距

.box3{position:relative;}
.box3 span{
    position: absolute;
    width:100px;
    height: 50px;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-25px;
    text-align: center;
}

2、请解释一下为什么要清除浮动？写出两种能清除浮动的方法

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

在父元素的最后加一个冗余元素并为其设置clear:both
此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。
采用伪元素，这里我们使用:after。添加一个类clearfix：
在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题

3、介绍一下css盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

4、css中box-sizing可以设置哪些属性？

content-box
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框
border-box
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit
规定应从父元素继承 box-sizing 属性的值

5、css中可以隐藏元素常用的方法？

visibility: hidden
是许多人在隐藏某个HTML元素时的首选。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
设置visibility: visible可以使隐藏的元素变为可见。
opacity: 0
这是一个CSS3属性，设置opacity: 0可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition和animate。
通常可以使用opacity属性来制作元素的淡入淡出效果。
设置opacity:1可以使透明元素变得可见。
position: absolute
最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流，处于普通文档之上，并给它设置一个很大的left负值定位，使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素，因此它们可以很好的被隐藏起来。
在制作一些元素的直线动画时，使用这种技术是最好的方法。
要使元素再次变得可见，可以增大left的值，使元素出现在屏幕上。
display: none
display: none也是一个非常老的技术，它是position: absolute和visibility: hidden; 的折中方法，元素会变得不可见，并且不会再占用文档的空间。
display: none在制作手风琴效果时十分有用。
将元素设置为display: block或其它值可以使元素再次可见。

6、css3transform和animation区别

transform 描述的是元素静态样式
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。必须是鼠标移上或者点击执行属性变化，鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果，否则会很生硬。
旋转：transform:rotate(-45deg);
缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)
移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。
倾斜：transform:skew(45deg,0);
实现动画效果的：transition animation
transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。
为了使transition生效，需要做这么几件事：
1）两个样式：一个是最初的样式，一个是最终的样式，transition可以实现这两种演示见的转换过程。
2）transition属性:
transition使用4个属性控制：
要以动画展示哪些属性（transition-property）:可以使用all关键字
动画过程有多久(transition--duration),
控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），
动画是否延迟执行（transition-delay）等
可以使用快捷方法来定义上述属性：

.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc;  
}

3）触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。

animation
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。
创建动画有两个步骤：
1).定义动画：主要指定义关键帧

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}

2)将动画应用到元素上
可以使用一下css属性定义动画：

.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
    animation-delay:.5s;
    animation-iteration-count:infinite;  
    animation-direction:alternate
}

animation-name:和当初定义的动画名称相对应；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间长度；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字：infinate(无限运行)；
animation-direction:alternate; alternate(奇数次超前运行，偶数次后退运行).如希望动画从黄色到蓝色，并且再重复一次，使用alternate关键字就能够防止从蓝色突变为黄色
animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。

前端面试题总结一css篇