布局

dispaly：block,inline,inline-block

默认block ——div,p,h1-h6,ul,form,ol .....
默认inline ——span,em,i,a,label,cite.....

position : static | relative | absolute | fixed

** 1、relative **

• 仍在文档流中
• 参照物是元素本身

** 2、absolute **

• 默认宽度是内容宽度
• 脱离文档流

** 3、fixed **

• 默认宽度是内容宽度
• 脱离文档流
• 参照物为视窗

实例：
1、遮罩层

 <div class="mask"></div>

 css代码
 .mask{
     position:fixed; 
     top:0; left:0; 
     z-index:999; 
     width:100%; height:100%;
     background-color:#000; opacity:0.3;
 }

2、三行自适应布局

<div class="head">head</div>
<div class="body">body</div>
<div class="foot">foot</div>

<style>
.head{
    position: absolute; 
    top: 0; left: 0;
    width: 100%;
    height: 100px;
}
.body{
    position: absolute; 
    top: 100px; left: 0; bottom: 100px; right: 0;
    width: 100%;
}
.foot{
    position: absolute; 
    bottom: 0; left: 0;
    width: 100%;
    height: 100px;
}

float: left | right | none | inherit

• 默认宽度是内容宽度
• （半）脱离文档流：对元素脱离文档流，对内容在文档流
• 向指定的方向一直移动

clear : both | left | right | none | inherit

• 增加空白元素

• clearfix

  /** clearfix 代码 **/
  .clearfix:after{ 
     content: ".";
     display:block; clear:both;
     height:0; overflow:hidden; visibility:hidden;
  }
  .clearfix{ zoom: 1; }
  

NB的flex 弹性布局

flex容器：flex container
子元素：flex item

less代码

.flexbox() {
 display : -webkit-box; /* OLD - iOS 6-, Safari 3.1-8 */
display : -moz-box; /* OLD - Firefox 19- (buggy but   mostly works) */
display : -ms-flexbox; /* TWEENER - IE 10 */
display : -webkit-flex; /* NEW - Chrome */
display : flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

 .flex(@param) {
   -webkit-box-flex : @param;
  -moz-box-flex    : @param;
  -webkit-flex     : @param;
  -ms-flex         : @param;
  flex             : @param;
 }

.flex-direction(@param) {
   -webkit-flex-direction : @param;
   flex-direction         : @param;
}

.justify-content(@param) {
   -webkit-box-pack        : @param;
   -webkit-justify-content : @param;
   justify-content         : @param;
}

.align-items(@param) {
   -webkit-box-align   : @param;
   -webkit-align-items : @param;
  align-items         : @param;
}

.order(@param) {
   -webkit-box-ordinal-group : @param;
   -moz-box-ordinal-group    : @param;
  -ms-flex-order            : @param;
  -webkit-order             : @param;
  order                     : @param;
}

• 方向（位置相关属性）

  • flex-direction
  • flex-wrap
  • flex-flow
  • order

• 弹性

  • flex-grow
  • flex-shrink
  • flex-basis

• 对齐

  • justify-content
  • align-items
  • align-self
  • align-content

flex-direction 弹性元素的方向
flex-direction ： row行 | row-reverse反向行 | column列 | column-reverse反向列

方向

flex-wrap 设置换行

flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap

flex-flow 值缩写 一次性设置两个属性
flex-flow:<'flex-direction'> || <'flex-wrap'>

flex-flow

Order

• order : <interger>
• initial : 0 （默认）

order

弹性

flex-grow 控制多余空间的布局

• flex-grow:<number>
• initial: 0

flex-grow

flex-basis + flow-grow/sum(flow-grow) * remain remain表示多余的空间

Paste_Image.png

flex-shrink 默认的内部元素超出flex的父元素时（即剩余空间为负数时）怎样分配内部元素的空间

flex-basis + flow-shrink/sum(flow-shrink)*remain 这里remain表示多余的空间，remain为负数

flex-basis

• flex-basis:main-size|<width>
• 设置flex item的初始宽/高

flex

• flex:<'flex-grow'>||<'flex-shirink'> || <'flex-basis'>
• initial: 0 1 main-size

对齐

justify-content 设置主轴对齐方式

• justify-content: flex-start | flex-end | center | space-between | space-around
• 设置main-axis 方向上对齐方式

like text-align

Paste_Image.png

** align-items 辅轴对齐方式**
align-items:flex-start居上对齐 | flex-end居下 | center | baseline | stretch

like vertical-align

Paste_Image.png

** align-self 辅轴对齐方式**

• align-self: auto | flex-start | flex-end | center | baseline | stretch
• 设置单个flex item 在cross-axis方向上对齐方式

** align-content 设置一个容器里的多行**

• align-content : auto | flex-start | flex-end | center | space-between | space-around | stretch
• 设置cross-axis方向上 行 对齐方式

Paste_Image.png

三行两列自适应布局

<div class="head">head</div>
<div class="body">
     <div class="side">side</div>
     <div class="main">main</div>
</div>
<div class="foot">foot</div>

//css
 <style>
  body{display: flex; flex-flow:column;}
 .head,.foot{height: 100px; background: #ccc;}
 .body{ flex: 1; display: flex;}
 .side{width: 200px; background: pink; }
 .main{flex:1; background: #999;}
 </style>

2d变形

---

2d实例

 <body style="transform:rotate(180deg)">

transform: none | <transform-function>+

rotate()
rotate ( <angle> )

  transform: rotate(45deg)
  transform: rotate(-60deg) 向左旋转60° 左手法则（大拇指指向自己）

translate ( <translation-value>) [, <translation-value>]?) 偏移

translateX( value )
translateY( value )

   transform:translate(50px)  // x轴偏移50px
   transform:translate(50px,20%) 

//x轴向右偏移50px,y轴往下偏移20%（X轴百分比是以宽度为100%，Y轴以盒子的高度作为100%）

scale( number,[,number ] )缩放,第二值省略不写 默认等于第一个
scaleX( number )
scaleY( number )

 transform:scale(1.2)
 transform:scale(1,1.2)
 transform:scaleX(1.2)
 transform:scaleY(1.2)

skew( angle, [angle]? ) 倾斜 第一个值：往X轴倾斜度数（Y轴向X轴偏移） 第二个值：X轴向Y轴倾斜的角度
skewX(angle)
skewY(angle)

 transform:skew(30deg)  
 transform:skew(30deg,30deg)  
 transform:skewX(30deg)     
 transform:skewY(30deg)     

skew

实例1

  transform: translate(50%)  rotate(45deg)

Paste_Image.png

  transform:  rotate(45deg)  translate(50%) 

Paste_Image.png

transform-origin 设置坐标轴的轴心原点的位置

transform-origin

transform-origin: 50% 50% (默认值，中心点)
transform-origin: 0 0
transform-origin:20%
transform-origin:right 50px 20px
transform-origin: to right 20px

perspective 透视效果
perspective: none | <length>

perspective:none;
perspective:2000px;
perspective:500px; //人眼到物体的距离

perspective

3D

---

perspective-origin

Paste_Image.png

perspective-origin:50% 50%;
perspective-origin:left bottom;
perspective-origin:50%  -800px;
perspective-origin:right;

Paste_Image.png

translate3d()
translate3d( translation-value , <translation-value>, <length> )

translateX( <translation-value> )
translateY( <translation-value> )
translateZ( <length> )

transform:translate3d( 10px , 20%, 50px);
transform:translateX( 10px );        
transform:translateY( 20% );
transform:translateZ( -100px );

Paste_Image.png

scale3d( <number>,<number>,<number> )

scaleX( <number> )
scaleY( <number> )
scaleX( <number> )

transform:scale3d(1.2, 1.2, 1);
transform:scale3d(1, 1.2, 1);
transform:scale3d(1.2, 1, 1);
transform:scaleZ(5);

Paste_Image.png

rotate3d(<number>,<number>,<number>,<angle>)

rotateX(<angle>)
rotateY(<angle>)
rotateZ(<angle>)

transform: rotate3d(1,0,0,45deg);
transform: rotate3d(0,1,0,45deg);
transform: rotate3d(0,0,1,45deg);
transform: rotate3d(1,1,1,45deg);

Paste_Image.png

transform-style: flat | preserve-3d

是否保留3d空间

backface-visibility：visibility | hidden 背面是否可见

动画

---

transition-property none|<single-transition-property> [ ',' <single-transition-property> ]*

<single-transition-property> = all | <IDENT>

transition-property : none;
transition-property : all;
transition-property : left;
transition-property : left,color;

transition-duration : <time> [,<time>]*

transition-duration : 0s
transition-duration : 1s
transition-duration : 1s , 2s , 3s

transition-timing-function 运动函数

<single-transition-timing-function> = ease(两头慢中间快) | linear(匀速) | ease-in(开始慢) | ease-out(结束慢) | ease-in-out(开始结束慢中间快)比eased的幅度大，这是区别
cubic-bezier(<number>,<number>,<number>,<number>) | step-start | step-end | steps(<integer>[,[start | end] ]? ) 贝塞尔曲线

Paste_Image.png

transition-delay: <time>[,<time>]*

transition 缩写综合 <single-transition> [ ',' <single-transition>]*

<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>

transition : none;
transition : left 2s ease 1s, color 2s;
transition :2ss;

animation

---

animation 与 transition的区别

• transition
  • 用于从一帧到另一帧时 做连贯做动画（两个关键帧）
  • 需要触发
• animation
  • 可做，从一帧到一个位置，再到目标位置（有三个关键帧）
  • 页面载入 自动运行动画，可以不用触发

animation-name

animation-name : <single-animation-name> [ ',' <single-animation-name> ] *

<single-animation-name> = none | <IDENT>

animation-name : none
animation-name : abc ;
animation-name : abc, abcd;

animation-timing-function 运动函数

<single-transition-timing-function> = ease(两头慢中间快) | linear(匀速) | ease-in(开始慢) | ease-out(结束慢) | ease-in-out(开始结束慢中间快)比eased的幅度大，这是区别
cubic-bezier(<number>,<number>,<number>,<number>) | step-start | step-end | steps(<integer>[,[start | end] ]? ) 贝塞尔曲线

 animation-timing-function : ease;
 animation-timing-function : cubic-bezier(0.25, 0.1 0.25 , 1);
 animation-timing-function : linear;
 animation-timing-function : cubic-bezier(0, 0 , 1 , 1);
 animation-timing-function : ease , linear;

animation-iteration-count 重复次数

animation-iteration-count: <single-animation-iteration-count>[ ',' <single-animation-iteration-count>]*

<single-animation-iteration-count> = infinite | <number>

animation-iteration-count : 1;
animation-iteration-count : infinite;
animation-iteration-count : 1 , 2 , infinite ;

animation-direction

animation-direction : <single-animation> [ ',' <single-animation-direction>]*

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

animation-direction ： reverse 与目标相反
animation-direction ： alternate 往返动画
animation-direction ： alternate-reverse; 相反的往返

animation-play-state 播放状态（暂停，播放）

animation-play-state : <single-animation-play-state> [ ',' <single-animation-play-state> ]*

<single-animation-play-state> = running | paused

animation-play-state : running;
animation-play-state : paused;
animation-play-state : running, paused;

animation-delay: <time>[,<time>]* 动画延迟时间

animation-delay : 0s;
animation-delay : 1s;
animation-delay : 1s,2s,3s;

animation-fill-mode 结束动画在开始时是否保存第一帧的设置，动画在结束的时候，是否保存最后一帧的状态

animation-fill-mode: <single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | backwards(开始时保存动画第一帧状态) | forwards（结束时保持动画最后一帧状态） | both（开始时保存动画第一帧状态，结束时保持动画最后一帧状态）

  animation-fill-mode ： none
  animation-fill-mode : forwards
  animation-fill-mode : forwards , backwards

animation-fill-mode

animation

animation : <single-animation> [ ',' <single-animation> ]*

animation

animation : none
animation : abc  2s  ease 0s 1 normal none running
animation : abc 2s;
animation : abc 1s 2s both, abcd 2s both

备注：
animation : abc 2s ease 0s 1 normal none running

• abc name
• 2s duration 运行时长
• ease 动画函数
• 0s 延时
• 1 播放次数
• normal direction 运行方向
• none fill-mode
• running 播放状态

@keyframes 关键帧

@keyframes abc {
    from{  opacity: 1;  height : 100 px; }
    sto{ opacity : 0.5; height: 200px; }
}
//两者表示一样
 @keyframes abc {
    0%{  opacity: 1;  height : 100 px; }
    100%{ opacity : 0.5; height: 200px; }
}

@keyframes flash {
   0%, 50%, 100%{  opacity: 1;  }
   25%, 75%{ opacity : 0; }
}

animation: abc 0.5s  both;
animation: flash 0.5s  both;
animation: abc 0.5s  both, flash 0.5s both;