理解transform：matrixmatrixtransform中有几个属性方法skew(35deg)/*slope*/scale(1,0.5)/*zoom*/rotate(45deg)/*rotation*/translate(30px,15px)/*displacement*/其实求旧像素位置(x,y)和新像素位置(x',y')之间的关系可以用一个矩阵来表示。transform的matrix()方法写法如下：transform:matrix(a,b,c,d,e,f);新旧像素位置转换如下：$\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}*\begin{bmatrix}x\\y\\1\end{bmatrix}=\begin{bmatrix}ax+cy+e\\bx+dy+f\\0+0+1\end{bmatrix}\begin{bmatrix}←x'\\←y'\\←1\end{matrix}$假设变换：matrix(A,0,0,B,a,b);然后$\begin{bmatrix}A&0&a\\0&B&b\\0&0&1\end{bmatrix}*\begin{bmatrix}x\\y\\1\end{bmatrix}=\begin{bmatrix}Ax+a\\By+b\\1\end{bmatrix}\begin{matrix}←x'\\←y'\\.\end{matrix}$位移translate(a,b)==matrix(1,0,0,1,a,b)x'=x+ay'=y+bscale(A,B)==matrix(A,0,0,B,0,0)x'=A*xy'=B*y旋转rotate(θdeg)==matrix(cosθ,sinθ,-sinθ,cosθ,0,0)x'=xcosθ-ysinθy'=xsinθ+ycosθ拉伸偏斜(αdeg,βdeg)==矩阵(1,tan(β),tan(α),1,0,0)x'=tan(α)*yy'=tan(β)*xmatrix3dmatrix3d的坐标系与数学中的不同新旧像素位置的转换如下：$\begin{bmatrix}a&d&g&j\\b&e&h&k\\c&f&i&l\\0&0&0&1\end{bmatrix}*\begin{bmatrix}x\\y\\z\\1\end{bmatrix}=\begin{bmatrix}x'\\y'\\z'\\1\end{bmatrix}$3D变换中的角度是逆时针旋转rotateX(angle)rotateY(angle)rotateZ(angle)缩放scale(A,B,C)==matrix3d(A,0,0,0,0,B,0,0,0,0,C,0,0,0,0,1)x'=A*xy'=B*yz'=C*z理解Flex布局英文知识CSS3Flexbox(FlexibleBox)wrap（包裹）Reverse（反向）Stretch（拉伸）两端对齐：多余的空白只分布在元素的中间（space-between）独立间距：子项两边被等量包围widthsthatdonotinterferencedspace-aroundevenlyspaced:space-evenlyonbothsidesofthechilditem(space-evenly)收缩（shrink）方向（fraction）作用于弹性容器flex-directionrow|行反转|栏目|列反转；flex-wrapnowrap|包装|wrap-reverse;flex-flow<'flex-direction'>||<'flex-wrap'>调整内容flex-start|弹性端|中心|间隔|环绕空间|空间均匀；对齐项目拉伸|弹性启动|弹性端|中心|基线；对齐内容拉伸|弹性启动|弹性端|中心|间隔|空间均匀；对flexchildorder采取行动/整数值，默认值为0/flex-grow;/number，可以是小数，默认为0/flex-shrink；/数字，默认值为1/flex-basis|汽车;/默认值为自动/flexnone|汽车|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]align-selfauto|弹性启动|弹性端|中心|基线|拉紧;学习玩https://flexboxfroggy.com/#zh-cn理解Grid布局的作用grid-template-columns在grid容器上垂直划分：[line1]80px[ln2]1.0fr[ln3]33.3%[end];水平分割grid-template-rows:repeat(3,80px[col]);区域名称grid-template-areas:.container{grid-template-areas:"grapegrapegrape""lobsterfarmingFishFarming""LobsterFishFarming""WatermelonWatermelonWatermelon";}.putao{grid-area:Grape;}abbreviationgrid-template.container{grid-template:"Grape葡萄葡萄"1fr"龙虾养鱼养鱼"1fr"龙虾养鱼养鱼"1fr"西瓜西瓜西瓜"1fr/1fr1fr1fr;}列间距grid-column-gap:10px;行间距grid-row-gap:10px;缩写grid-gap:垂直对齐justify-items:stretch|开始|结束|ce输入；水平对齐align-items:stretch|开始|结束|中心;缩写place-items:/;水平分布justify-contentstretch|开始|结束|中心|间隔|环绕空间|空间均匀；垂直分布align-content:stretch|开始|结束|中心|间隔|环绕空间|空间均匀；缩写place-content:/;grid-auto-columns和grid-auto-rows：指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小，当网格项多于网格中的单元格或网格项被放置在显式网格之外时，一个隐式轨道被创建。网格自动流行|栏目|排密|columndense缩写grid/[auto-flow&&dense?]<网格自动列>？作用于网格子项grid-column-startgrid-column-end缩写grid-columngrid-row-startgrid-row-end缩写grid-row.item-b{grid-column:2/spanverticalline3;grid-row:第一行开始/span3;}等价于：.item-b{grid-column-start:2;grid-column-end：跨越垂直线3；grid-row-start：第一行的开始；grid-row-end:span3;}网格区域justify-self:stretch|开始|结束|中心;对齐自我：拉伸|开始|结束|中心;缩写place-self/;边玩边学http://cssgridgarden.com/#zh-cn一个PostCSS插件，让CSS网格变得傻傻的简单https://github.com/sylvainpol...水平和垂直居中只适用于固定宽度和高度的居中元素：absolute+negativemarginabsolute+marginautoabsolute+calc居中元素不确定宽高适用：absolute+transformwriting-modelineheighttablecss-tableflexgridcss居中例程在作参考：理解CSS3transform中的Matrix（矩阵）好了，CSS33Dtransform变换，不过就是这样！display:flex布局教程display:grid布局教程水平布局总结-github
