煲纸学习笔记——css3

css3

1. 过渡和动画

   • 过渡 可以指定一个属性发生变化时的切换方式

     1. transition-property:对象1，对象2；
     2. transition-duration:100ms, 200ms;
     3. transition-function:时序函数；可选值 ease先加速在减速 linear匀速 ease-in加速 ease-out 减速 steps(2，end /start)分成几步完成
     4. transition-delay:延迟

   • 动画和过度类似 动画自动执行

     1. 必须设定一个关键帧 关键帧设定了动画执行的每一个步骤

@keyframes Animation_name{
        	/*  0%   */
        	from{
        		margin-left:0;
        	}
        	/*  100%  */ 
        	to{
        		margin-left:700px;
        	}
        }
        .box{
        	animation-name:Animation_name;
        	animation-duration:4s;
        }
2. 可选属性
  animation-timing-function :
     	linear 线性
     	ease  以低速开始，然后加快，在结束前变慢
     	ease-in  以低速开始
     	ease-out 以低速结束
     	ease-in-out	以低速开始和结束
     animation-duration：动画周期
     	time;
     animation-delay:定义动画开始前等待的时间，以秒或毫秒计。默认值是 0
     	time;
     animation-iteration-count: 定义被播放的次数
     	n|infinite;	
     animation-direction: 定义是否应该轮流反向播放动画
     	 normal | alternate
     animation-play-state: 定义是否暂停
     	paused | running
     简写
     animation: name duration timing-function delay iteration-count direction;

2. less

   • less是css的预处理语言 是css的增强版

   • css中也支持设置变量

     • 定义–color:#111;
     • 应用var(–color);

   • 语法包含结构

 .box1{
     	color:123;
     	
     	.box2{
     		color:yellow;
     		}
     	// box2是box1的后代元素
     	}
     	
     // 定义变量个事@变量名
     @width:100px;
     @b:yellow;
     @c:box6;
     // 作为类名使用.@{c}
     .@{c}{
     	background:url("@{c}/1.jpg")
     	// 作为路径
         }
     .box6{
          height:300px;
          width:$height;
          // 引用之前的变量 就近原则谁近引用谁
         }
         
     &表示外层父元素
     .box5{
     	.box6{
         	&：hover{	
                 // 表示给.box5 .box6设置一个hover效果
                 // 表示外层父元素
                 }
             }
         }
     .p1{
         color:#123456;
         background:#555;
         }
     // :extend() 对指定样式进行扩展 就是分组选择器
     .p2:extend(p1){
         width:100px;
         }
      // 编译结果
     .p4(){
         color:#456;
         }
         // 这是一个公共的类不在css中实际存在但是可以被引用
      .p{
         .p4;
         }
     // 编译结果
       .p{
         color:#456;
         }
         
     // 混合函数
     .test(@w,@h,@c){
     	width:@w;
     	hight:@h;
     	color:@c;
     }
     // 调用混合函数
     div{
     	.test(100px,200px,#bfa)
     	.test(@w：100px,@hight:200px,@c:#bfa)
     }
     color:avarge(color_1,color_2);
     // 去颜色的平均值
     color:darken(#bfa,10%);
     
     - @import "123.less";
     - 引入123.less文件

 * 在less中可以直接加减乘除运算

3. flex布局

   • 弹性布局 flex使元素具有弹性 让元素可以跟随页面大小的改变而改变
   • 弹性容器：可以通过设置display：flex; 块级弹性元素 inline-flex
     • flex-direction:可选值 row 左向右 row-reverse column column-reverse 从上而下 /从下而上
     • 主轴 弹性元素的排列方向 侧轴：
     • flex-wrap:nowrap;不换行 wrap；沿y轴换行 wrap-reverse;
     • justify-content:如何分配主轴上的空间flex-start 元素按照主轴起边排列 flex-end 终边排列 center 元素居中排列 space-around 空白分配到元素两侧；
     • align-content:如何分配辅轴上的空间
     • align-items：元素之间的关系 辅轴上的对齐方式 （是否拉伸 以及对齐方式）可选值 stretch 拉伸 center
   • 弹性元素：弹性元素的子元素是弹性元素
     • flex-grow:指定弹性元素的伸展的系数，默认为0，多出来的空间分配 ；
     • flex-shrink:收缩系数 当父元素不够装的时候按比例伸缩。默认值1
     • flex-basis:元素基础像素；// 基础的长度如果是row的话 指定的是宽度
     • 简写属性flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
     • order:决定他弹性元素的排列顺序。

4. 移动端适配

   • 可以通过meta标签来调整视口大小

     <meta name="viewport" content="device-width,initial-scale=1.0"

• 单位vw指的是1%的完美视口宽度
• 布局的时候使用less 把px转换为rem

5. 响应式布局

   • 使用媒体查询 语法

   • 媒体类型 all screen屏幕 print打印设备

     @media only screen and (max-width:768px){
     @media (width:500px){
     	body{
     		background:#bfa;
     	}
     }
     }
     // 当视口宽度为500时有效
     // min-width：视口最小宽度
     // max-width：视口最大宽度
     // 在屏幕切换的时候，样式会改变的变化 被称为断点 
     // 超小屏幕 max-width:768 小屏幕 min-width:768px min-width:992 中型屏幕 大屏幕min-width:1200px