布局
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-flow 值缩写 一次性设置两个属性
flex-flow:<'flex-direction'> || <'flex-wrap'>
Order
- order : <interger>
- initial : 0 （默认）
弹性
flex-grow 控制多余空间的布局
- flex-grow:<number>
- initial: 0
flex-basis + flow-grow/sum(flow-grow) * remain remain表示多余的空间
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
** align-items 辅轴对齐方式**
align-items:flex-start居上对齐 | flex-end居下 | center | baseline | stretch
like vertical-align
** 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方向上 行 对齐方式
三行两列自适应布局
<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变形
<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)
实例1
transform: translate(50%) rotate(45deg)
transform: rotate(45deg) translate(50%)
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; //人眼到物体的距离
3D
perspective-origin
perspective-origin:50% 50%;
perspective-origin:left bottom;
perspective-origin:50% -800px;
perspective-origin:right;
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 );
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);
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);
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] ]? ) 贝塞尔曲线
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
animation : <single-animation> [ ',' <single-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;
