WY-网页制作(2)

布局

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;
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,730评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,303评论 0赞 11
  • 页面制作——CSS 6-8
    6.布局 布局：将元素以正确的大小摆放在正确的位置上。 display属性：设置元素的显示方式。block | i...
    hyt222阅读 392评论 0赞 0
  • 如何高效又省钱的护肤？
    文/荼er小姐 相信点开这篇文章的你是个非常聪明的consumer。研究市场营销已有一年之久，除了学习怎样将商品打...
    荼er小姐阅读 6,641评论 46赞 376
  • 8/4-齐晓慧-日精进
    桌子上放着半杯水，一个悲观主义者看到后大声说到：“太糟糕了，只有半杯水了！”一个乐观主义者看到却说：“太好了...
    Alina_qi阅读 133评论 0赞 1