前端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:flexdisplay: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类似。

align-content:flex-start|flex-end|center|space-between|space-around|stretch

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

align-self:auto|flex-start|flex-end|center|baseline|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|top|bottom|<percentage>|<length>]|

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

[top|center|bottom|<percentage>|<length>]<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>

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

perspective-origin:[left|center|right|top|bottom|<percentage>|<length>]|

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

[top|center|bottom|<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>=

         ease|linear|ease-in|ease-out|ease-in-out|

         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;}
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值