css笔记整理(二)

1.垂直和水平居中

1.行内元素/文本
	  text-align：水平居中
	  line-height:垂直居中（值和父元素高度一致）
2.块元素
	  1>给父元素设置 display:flex;
		           align-items:center;
		           justify-content:center;
	  2>给父元素设置 display:flex;
		给子元素设置 margin:auto
	  3>给父元素设置一个定位属性，子元素一定设置绝对定位，然后给子元素设置left:50%;top:50%;
	    ->给子元素设置 margin-left:-(子元素width/2)；
	                 margin-top:-(子元素height/2)
	  4>给父元素设置定位属性，子元素设置绝对定位，给子元素的所有配合属性设置0px;->给子元素设置margin：auto
	
	  例如：
		   position:relative;
		   
		   position:absolute;
		   left:50%;
		   top:50%;
		   margin-left:-(width/2)
		   margin-top:-(height/2)


		   position:relative；
		   
		   position:absolute;
		   top:0px;
		   left:0px;
		   right:0px;
		   bottom:0px;
		   margin:auto;

2.外边距合并

1.父子级
	  1.给父元素添加边框属性
	  2.将原本设置给子元素的margin修改为设置父元素的padding
	  3.给父子级其中一个设置浮动属性
	  4.给父子级其中一个设置position: absolute;属性
  	  5.给父元素添加overflow: hidden;属性
	  6.给父子级其中一个设置display: inline-block;属性

2.兄弟级
	  将本应该设置给两个元素的外边距直接设置给一个元素
  合并规则：
	  1>如果两个数均为整数，取绝对值较大的一个
	  2>如果两个数均为负数，取绝对值较大的一个
	  3>如果两个数值一正一负，直接相加

3.动画

animation
1.声明动画轨迹
	1>  @keyframes name{
		from{}
		to{}
		}
	2>  @keyframes name{
		0%{}
		50%{}
		60%{}
		100%{}
		}
2.将轨迹设置给某类元素
	    div{
		   animation-name:name;
		   animation-duration: 3s;//动画的持续时间
		   animation-delay: 3s;//动画延迟时间
		   animation-iteration-count: 1;//设置动画执行次数(number/infinite)
		   animation-timing-function: ease-out;//设置动画速度
			  steps(number)
           }

实例1:轮播图
实例2：梦幻西游
实例2:呼吸灯
     1>外圆向外扩大10px
     2>外圆缩小10px
     3>内圆缩小12px
     4>内圆放大12px

     外圆：
	     1>扩大10px
	     2>外圆缩小10px
	     3>外圆保持不动
     内圆：
	     1>缩小10px
	     2>扩大10px
	     3>缩小12px
	     4>放大12px
	 引入选项卡图标：
	     1>准备16px*16px 的ico格式的图片
	     2>通过link标签
		   <link rel="shortcut icon" type="images/-icon" href="">
		   
3.transition：动画：属性
4.transform
            旋转
            拉伸
            放大/缩小
            移动
5.媒体查询
         div:
	     header
	     .....
         @media
      	 link:media
6.bootstrap
         1>引入bootstrap.css
         2>引入jquery.js
         3>引入bootstrap.js