css

布局方式

• 弹性盒子flex布局
• 定位布局：position: absolute/relative/ fixed
• 响应式布局（media query）
• 静态布局

盒模型:box-sizing

• 低版本IE盒子模型：border-box:border+padding+content 
• 标准盒子模型：content-box:content（宽度=内容的宽度）

css实现三角形

•   {
    width:0px;
    height:0px;
    border:10px solid;
    border-left:transparent transparent red;}
  

BFC 块级格式化上下文

• 触发条件

• body根元素

• float除none以外

• overflow除visible以外

• positionc值absolute/fixed

• display值inline-block/table-cell/flex

• 解决办法

• clear:both

• 伪类——注意区分伪元素

• 父元素设置添加浮动或者inline-block——导致margin不可用

animation和transition和transform

• transform：

• translate 移动

• scale 放大缩小

• skew 倾斜

• rotate 旋转

• animation： 可以结合@keyframes实现不需要触发时间的循环动画

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

• transition：需要触发的伪类或者js事件

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

• 区别：

  　　　　1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

  　　　　2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

  　　　　3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

  　　　　4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

  　　　　5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

flex

• 容器属性

• display:flex

• flex-direction：（水平）row｜row-reverse｜（垂直）column｜column-reverse

• flex-warp：（是否换行）nowarp｜warp｜warp-reverse（第一行在下面 由下往上）

• flex-flow：（flex-direction和flex-warp合并的属性）row nowarp

• align-item：（纵向）flex-start｜flex-end｜center｜baseline｜stretch（占满)

• align-content：（多纵向才起作用）flex-start｜flex-end｜center｜space-between｜space-around ｜stretch（占满)

• justify-content：（横向）flex-start｜flex-end｜center｜space-between｜space-around

• 项目属性

• order：排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow：剩余空间所占的比例

• flex-shrink：空间不足的时候的缩小比例

• flex-basic：

• flex：flex和flex-shrink和flex-basic的合称属性

• align-self：auto | flex-start | flex-end | center | baseline | stretch; 可继承或者覆盖父属性的align-items.默认的auto为继承，如果没有父元素，则等同于stretch

垂直居中（不知道宽高的）

• transform

•   .div{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50% -50%);
        -webkit-transform:teanslate(-50% -50%);
        -moz-transform:teanslate(-50% -50%);
    }
  

• flex

•   .div{
        display:flex;
        align-items:center;
        justify-content:center;
    }
  

• table(IE8以下不支持)

• .parent{ display:table } .child{ diaplay:table-cell; vertical-align:center; }