前端1页面制作3——CSS-2

7.布局

布局指元素摆放模式，浏览器将元素以正确的大小摆放在正确的位置上。

7.1 display

display:block|inline|inline-block|none

display	默认宽度	可设置宽高	起始位置	其它	默认该类型元素
block 块级元素	父元素宽度	是	换行		div,p,h1-h6, ul,form,…
inline 行级元素	内容宽度	否	同行	元素内换行	span,a,label, cite,em,…
inline-block	内容宽度	是	同行	整块换行	input,textarea, select,button,…
none	设置元素不显示，后面元素会占据它的位置 visibility:hidden;该元素位置仍保留

7.2 position

position:static|relative|absolute|fixed

top,right,bottom,left,z-index

二者分别设置定位方式和位置，需配合使用，否则不起效果。

top,right,bottom,left指元素边缘距参照物边缘的距离，可以是负数。同时设置top和bottom或left和right，元素可能缩小或放大，满足每个设置要求。

z-index:0设置元素在z轴上的排序，默认0。如果没有设置，后面的元素盖在前面的元素上面。z-index栈，哪个元素在上面，首先由父元素的定位判断。

static普通流。默认，block元素换行显示，inline元素同行显示。

relative相对定位。将一个元素在它普通流所处的位置上下左右移动，但不影响周围元素的位置。多用于绝对定位元素的参照物。比static层级高，可以设置z-index。

absolute绝对定位。脱离文档流，文档流中没有它的空间，未设置偏移时在原位置。参照物为第一个定位元素（非static）/根元素html，如果祖先没有定位元素，则以页面的即html元素的包含块为参照物，与浏览器窗口同等大小的首屏区域。默认宽度为内容宽度。元素随页面的滚动而滚动。

fixed固定定位。脱离文档流。参照物是视窗。默认宽度为内容宽度。不随页面的滚动而滚动。

7.3 float

float:none|left|right

浮动。默认是none，默认宽度为内容宽度。半脱离文档流，对元素脱离文档流，与元素重叠；对内容，在文档流，内容不重叠。在原来的基础上向左或向右浮动，直到边缘碰到包含框或另一个浮动框的边框。

clear:none|both|left|right

默认是none。一般用both，包括left和right，后续未浮动元素不会占据左浮动和右浮动之前的位置。应用于块级元素、清除float对后续元素的影响。

.clearfix::after{content:”.”; display:block; clear:both; height:0; visibility:hidden;}

使父元素围住浮动的子元素，避免对后续元素造成影响。

如果父元素float:left;或overflow:hidden;或绝对定位或固定定位，触发块级格式化上下文（BFC），从正常文档流脱离，父元素本身实现独立布局，围住其中的浮动元素，则不用clearfix。但专门这样设置，可能会改变布局。

clearfix在float元素的父元素上加clearfix类名，在父元素的最后加块级元素.（伪元素选择器），通过clear:both使父元素括住浮动的元素来清除float的影响，使.不可见。

.clearfix::after{content:”.”; display:block; clear:both; height:0; visibility:hidden;}
.clearfix{zoom:1;} /*IE低版本不支持after*/
<div class=”clearfix”>
    <p id=”p1” style=”float:left”>p1</p>
    <p id=”p2” style=”float:right”>p2</p>
    /*<p style=”clear:both;”></p>  添加空的p元素，使div可以围住p1p2，不推荐*/
</div>

7.4 flex

flex container：display:flex或display:inline-flex将某元素指定为flex，则该元素为弹性容器。

flex item：只有弹性容器在文档流中的直接子元素才是弹性元素。

main axis：主轴，flex item排列的方向。

cross axis：辅轴，与主轴垂直的方向。

（1）方向

flex-direction:row|row-reverse|column|column-reverse

设置主轴的方向。默认row从左往右。column从上往下。

flex-wrap:nowrap|wrap|wrap-reverse

设置换行。默认nowrap不自动换行，如果父元素宽度不够，item会按比例压缩。当row时，wrap从上往下换行；wrap-reverse从下往上换行。

flex-flow:<’flex-direction’>||<’flex-wrap’>

同时设置排列方向及换行，值缩写。建议不要单独用flex-direction和flex-wrap。

order:<integer>

初始值是0。order是相对值，不是绝对位置。

（2）弹性

flex-basis: <width>

设置弹性元素初始宽/高，为主轴上的宽（按行排）或高（按列排）。

flex-grow:<number>

先按照设置的宽度分配空间，如果有多余空间，将多余空间按比例分配给设置flex-grow的元素。

flex-shrink:<number>

分配超出的负的剩余空间。初始值是1，平均分配。如果均设为0，则不分配，超出。哪个元素的该值越大，按比例分配的负的空间更多。

flex:<’flex-grow’>||<’flex-shrink’>||<’flex-basis’>

值缩写，默认值0 1 auto（main-size）。缺省值1 1 0%（例flex:1 1 200px; =flex:200px）。

（3）对齐

justify-content:flex-start|flex-end|center|space-between|space-around

设置主轴方向上的对齐方式，默认flex-start。与text-align类似。因为可能是纵向排列，不用left和right等。

align-items:flex-start|flex-end|center|baseline|stretch

设置辅轴方向上的对齐方式，对于容器中所有弹性子元素，默认stretch。与vertical-align类似。

设置辅轴方向上行对齐方式，对于多行元素，默认stretch。

设置单个弹性元素在辅轴上的对齐方式，默认auto。

（4）Flexbox兼容性

除了IE浏览器，其它主流浏览器最新版本对flexbox支持都比较好，IE11部分支持，但仍存在许多bug，IE10通过-ms-部分支持flex老版本，IE6-9完全不支持。

8、变形

作用于block、inline-block元素。

transform:none|<transform-function>+

	<transform-function>	备注
旋转	rotate(<angle>) rotate3d(<number>,<number>,<number>,<angle>)	沿number和原点构成的直线旋转
旋转	rotateX(<angle>) rotateY(<angle>) rotateZ(<angle>)	沿X/Y/Z轴旋转
偏移	translate(<trans-value>[,<trans-value>]?) translate3d(<trans-value>,<trans-value>,<length>)	Y省略则Y方向不偏移
偏移	translateX(<trans-value>) translateY(<trans-value>) translateZ(<length>)
缩放	scale(<number>[,<number>]?) scale3d(<number>,<number>,<number>)	Y省略则整体缩放
缩放	scaleX(<number>) scaleY(<number>) scaleZ(<number>)
倾斜	skew(<angle>[,<angle>]?)	Y轴向X轴倾斜多少度, X轴向Y轴倾斜多少度。

（1）transform:rotate(45deg);=transform:rotate3d(0,0,1,45deg);

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

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

（2）transform:translate3d(10px,20%,50px);

transform:translateX(10px);= transform:translate(10px);

transform:translateZ(-100px);

（3）transform:scale(1.2);=transform:scale3d(1.2,1.2,1);

transform:scaleZ(5); 此时，transform:scaleZ(5) translateZ(100px);相当于移动了500px。

（4）transform:skew(30deg); transform:skew(30deg,30deg); Y轴正方向朝下。

（5）transform顺序不同则表现可能不同。

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

transform:translate(50px) scale(1.5); transform:scale(1.5) translate(50px);

transform-origin:

[left|center|right|<percentage>|<length>]

[center|[left|right]]&&[center|[top|bottom]]<length>?

设置坐标原点位置，默认在该容器中间transform-origin:50% 50%;。写1~3个值（X、Y、Z方向）。

transform-origin:0 0; 左上角

transform-origin:20%; 另外一个默认为center

transform-origin:right 50px 20px;

transform-origin:top right 20px;

perspective:none|<length>

透视，设置人眼到物体的距离，距离越近透视效果越明显。默认无穷远。

[left|center|right|<percentage>|<length>]

[center|[left|right]]&&[center|[top|bottom]]

透视角度。默认在该容器中间perspective-origin:50% 50%;。

transform-style:flat|preserve-3d

设置transform元素是否保留3d空间。

.m-demo-1>pre{transform:rotateX(45deg); transform-style:preserve-3d;}

.m-demo-1>pre>pre{transform:rotateY(45deg);}

backface-visibility:visible|hidden

背面是否可见。

9. 动画

9.1 transition

transition-property:none|<single-transition-property>[‘,’<single-transition-property>]*

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

none，默认，瞬间变化；all，所有属性均是过度变化；或指定属性过度变化。可动画属性可以实现相应的效果。

transition-property:left,color;

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

过度效果执行的时间。transition-duration:0s;。

transition-timing-function:<single-transition-timing-function>[‘,’<single-transition-timing-function>]*

<single-transition-timing-function>=

cubic-bezier(<number>,<number>,<number>,<number>)|

step-start|step-end|steps(<integer>[,[start|end]]?)

定义时间函数，改变运动速率。

ease，默认，两头慢中间快；linear匀速；ease-in开始慢；ease-out结束慢；ease-in-out比ease幅度大。

cubic-bezier前两个值对应P1点，后两个值对应P2点。

steps分几步，从每一步开始还是结束作动画。

transition-timing-function:ease;=transition-timing-function:cubic-bezier(0.25,0.1,0.25,0.1);

transition-timing-function:linear;=transition-timing-function:cubic-bezier(0,0,1,1);

transition-timing-function:ease,linear;

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

设置延时时间。transition-delay:0s;。

transition:<single-transition>[‘,’<single-transition>]*

<single-transition>=[none|<single-transition-property>||<time>||

<single-transition-timing-function>||<time>]

property默认all。

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

9.2 animation

animation-name:<single-animation-name>[‘,’<single-animation-name>]*

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

为animation指定名称，该名称来自关键帧的定义，不必是属性名。animation:abc,abcd;。

进入页面自己作动画，可作多帧动画。

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

该动画执行的时间。animation-duration:0s;0s则没作动画，打开页面即到指定位置。

animation-timing-function:<single-timing-function>[‘,’<single-timing-function>]*

<single-timing-function>=<single-transition-timing-function>

与transition-timing-function相同。

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

动画延时多久后执行。

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

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

动画执行次数，默认为1。

animation-direction:<single-animation-direction>[‘,’<single-animation-direction>]*

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

动画方向，正向、反向、正向-反向交替、反向-正向交替。

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

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

动画播放状态，如hover后开始播放或暂停。

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

<single-animation-fill-mode>=none|backwards|forwards|both

backwards开始时保持第一帧的状态，forwards结束时保持最后一帧的状态，both开始时保持开始状态，结束时保持结束状态。通常被设置为both。

animation:<single-animation >[‘,’<single-animation>]*

<single-animation>=<single-animation-name>||<time>||<single-animation-timing-function>||

<time>||<single-animation-iteration-count>||<single-animation-direction>||

<single-animation-fill-mode>||<single-animation-play-state>

animation:none;

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

animation:abc 1s 2s both,abcd 2s both;

9.3 @keyframes

通过关键帧定义每一个UI状态。

@keyframes abc{
    from{opacity:1;height:100px;}
    to{opacity:0.5;height:200px;}
}

可以用0%、100%代替from、to。

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