前言：今天看到一篇前端妹子的面试总结，前端妹子一直说自己懒。顿时让我感觉到无地自容啊。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的值如果用百分比的话是依据于父元素宽度。