前言：今天看到一篇前端妹子的面试总结，前端妹子一直说自己懒。顿时让我感觉到无地自容啊。2016年毕业，计算机行业，接触前端是2014 年吧，要说总结，真的是除了在学校里做的几个本的笔记外就没有了啦。从事前端工作两年多了，一点总结都没有，也是一直处于原生开发，react和vue的文档看了又看，却一直没有实现过一个小项目。每次面试都不理想，对象也说没见过我总结，总结和笔记才是成长的必要条件。这里就把前端妹子提的那几个前端面试的问题总结一下。赶紧的追！
1. 常用的几种布局方式
- 固定布局
- 流式布局（自适应布局）
- 弹性布局（伸缩布局）
- 定位布局
- 浮动布局
- 响应式布局（媒体查询）
固定布局、流式布局、定位布局、和浮动布局都比较简单。都可以查看W3C。简单的我是这个理解这几个的。如下：
固定布局的固定说的是盒子的宽高都是固定的。margin，padding等。
流式布局的流式是指的盒子的宽高和margin，padding是百分比。所以也称为百分比布局。有以下几点需要注意
* 百分比是基于元素父级的大小计算得来的；
* 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
* 边框不能用百分比设置
定位布局指的是，绝对定位和相对定位以及固定定位。这个可查看W3C。
浮动定位是只float:left;和float:right;要记得清浮动。
这页面中的布局，现在我都是综合几种布局一块来实现的，那种以哪一种的布局方式为主要形式，此页面就可以说是哪一种的布局页面。
下面主要的是谈谈弹性布局（flex-box）当然关于flex-box的文章很多，我写在这里只是为了写给自己的，我的理解有误的话，也欢迎有人来提出。可点击查看阮一峰老师的文章
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
兼容性
所以说在pc端用的还广泛，毕竟有的企业，还是在兼容性方面要求的比较严格，但是手机端flexBox实现的还不错，可以考虑写一个弹性布局的手机app项目。
定义
任何一个容器都可以指定为Flex布局。
.box {
display:flex;
}行内元素也可以制定为Flex布局
.box {
display: inline-flex;
}Webkit内核的浏览器，必须加上-webkit前缀。
.box {
display: -webkit-flex; /* Safari */
display: flex;
}注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器的属性
flex-direction：row | row-reverse | column | column-reverse;//决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap//默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow:<flex-direction> || <flex-wrap>;//是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content:flex-start | flex-end | center | space-between | space-around;//属性定义了项目在主轴上的对齐方式。
具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items:flex-start | flex-end | center | baseline | stretch;//定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content//定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目的属性
order: <integer>//定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: <number>//定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink:<number>;//定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis:<length> | auto//定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]//是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self: auto | flex-start | flex-end | center | baseline | stretch;//允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
以上是菜鸟教程的文档，我就照搬过来了，菜鸟教程有相应的比较好图片解说。
总结： 重申一下这个概念，有助于对文档的理解：
轴线：项目排在一条线上（这条线就是轴线）
主轴：主轴并不一定是水平轴，flex-direction：row则代表主轴是水平轴，那么交叉轴就是垂直轴，
flex-direction:column则代表主轴是垂直轴，那么交叉轴就是水平轴。
align-content：多根轴线才会起效果，就是项目在主轴方向上排了多列。
justify-content：主轴上的项目的排列对齐方式
justify-content：交叉轴上的项目的排列对齐方式
面试题：
（1）.Flex项目移动到顶部
如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过justify-content设置；如果它是水平的方向通过align-items设置。
（2）.Flex项目移到左边
flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
（3）.Flex项目移动右边
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }（4）.水平垂直居中
在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。
（5）.Flex项目实现自动伸缩
您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }上面几条是我看了几遍才懂，正在努力集中注意力。懒时间长了，注意力都难集中了。
2. 实现水平垂直居中的几种方法
- 用inline-block和text-align及vertical-align来实现：这种方法适合于未知宽度高度的情况下。（最基本的方法）
- 用相对绝对定位和负边距实现上下左右居中（已知宽度和高度）
.img{
height: 200px;
width: 200px;
position: relative;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;//负边距是宽度和高度的一半
}- 使用table-cell，inline-block实现水平垂直居中：适合高度宽度未知的情况（模拟表格）
<style>
#container{
display: table-cell;
text-align: center;
vertical-align: middle;
height: 300px;
background: #ccc;
}
#center-div{
display: inline-block;
}
</style>-使用css3中的transform来时实现水平垂直居中：适合高度宽度未知的情况
<style>
#container{
position: relative;
height: 200px;
background: #333;
}
#center-div{
position: absolute;//绝对定位中的transform
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>-使用Flexbox来实现水平垂直居中；适合宽度高度未知情况，但是要注意兼容性
.box{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: #009f95;
}
3.css3动画的一些属性
2D转换（transform的属性方法）
-translate()通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
-rotate()通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
-scale()通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
-skew()通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
-matrix()方法把所有 2D 转换方法组合在一起。
-matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。3D转换
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。transform-origin：改变元素中心点的位置
- transiton过渡
transition: property duration timing-function delay;
transition-property: none|all|property;//过渡的元素名称
transition-duration: time;（time是毫秒计的）//过渡的时间
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);//过渡的速度曲线
transition-delay: time;//过渡效果开始之前延迟4.CSS实现宽度自适应100%,宽高16:9的比例的矩形。
.rect {
width: 100%;
padding-bottom: 56.25%;
border: 1px solid #000;
}讲一下其原理，我们来看W3C对应边距采用不同值得定义
padding的值如果用百分比的话是依据于父元素宽度。