1.px、em、rem的区别？
px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。
2.说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
1.定位
2.尺寸
3.浮动
4.最初的布局——table
5.两栏布局（浮动和定位）
6.三栏布局（flex，圣杯和双飞翼：https://www.jianshu.com/p/f9bcddb0e8b4）
7.移动端的布局（媒体查询，flex弹性盒子（https://github.com/laizimo/zimo-article/issues/13），rem适配（http://www.cnblogs.com/lyzg/p/4877277.html））
8.grid布局
摘自：https://segmentfault.com/a/1190000011358507
3.实现水平垂直居中的几种方法？
1.flex方式（适用于居中元素元素宽高未知），但是这种方式仅限于body里面只有一个子元素，如果body里面有多个div不行
<body>
<img src="images/myPage/avatar2.png">
</body>
<style>
html,body{
height: 100%;/*需要注意的是，要使图片在屏幕上水平垂直居中，必须设置html和body的高度为100%，*/
}
body {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
background: #aaa;
}
</style>
2.绝对定位和负边距（适用于居中元素的宽高是固定的）
img{
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px; /*图片宽度的一半*/
margin-top: -80px; /*图片高度的一半*/
}
3.CSS3的transform属性（适用于居中元素元素宽高未知）
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 100px;
border: 50px solid #fff;
background: #000;
}
4.margin:auto
img{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
4.关于transform、transition、animate的区别
1.transform
transform属性是静态属性。它其实只是一个静态属性，需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样，只是一个静态样式而已。它可以让元素偏移、伸缩、变形、旋转等。
具体的给设计师改变元素样式用的属性则有以下五个：
translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。
2.transition,它属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
<div class="transform"></div>
.transform{
width:100px;
height:100px;
background: red;
transition: all 1s ease-out;
}
.transform:hover{
transform:rotate(360deg);
}
3.Animation
<style>
.context{
width:100px;
height:100px;
background: blue;
left:0;
position:absolute;
}
@keyframes move{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
.context:hover{
animation: move 0.5s infinite alternate;
}
</style>
<div class="context">
<div class="sub-context"></div>
</div>
网友评论