css

margin：当上下外边距相遇时，它们将形成一个外边距，称之为合并外边距。最终的边距距离，以数值大的为准。

背景图像
   1、背景图像尺寸
      属性：background-size
      取值：
        v1 v2:宽度 高度
v1% v2% ：原始大小的百分比
cover：扩展背景图像，使背景图完全覆盖背景区域
contain:将图像扩展至最大尺寸，使宽度和高度自适应内容区域(按比例拉伸)
   2、背景图片固定
       background-attachment
       属性：scroll（默认值）
              fixed: 背景图像固定


   3、背景图片位置
      属性：background-position
      值：left
          right
 top
 bottom
 center
 x% y%:第一个表示水平偏移量，第二个值垂直偏移量


 x y:第一个表示水平偏移量，第二个值垂直偏移量
   4、背景绘制区域（颜色）
       属性：background-clip
       取值：
        border-box:背景被裁减到边框（默认值）
padding-box:背景被裁减到内边距框
content-box:背景被裁减到内容框
   
   5、背景的定位区域（图像）
      属性：background-origin
      取值：border-box:
   padding-box:
   content-box：


   6、背景属性
       在一个属性中声明所有的相关的背景属性
       background:color url() repeat attachment position;
       background:red url(user.jpg) no-repeat fixed attachment -35px 20px;
          径向:background-image:radial-gradient([100px at top left] red 0%, green 50%, blue100%)
          size;半径
 position

渐变属性：
       属性：background-image
       取值：linear-gradient  线性渐变
             radial-gradient  径向渐变
    repeat-linear-gradient 重复线性渐变
    repeat-radial-gradient 重复径向渐变


    1、linear-gradient(angle,color-point1,color-point2...)
                  angle指渐变的方向，可以是关键字也可以是方向值
  （to top对应0deg 、 to right对应90deg 、to bottom对应180deg、to right对应270deg ）
  color-point至颜色的起始点，中间点 结束点
     取值为颜色和位置的组合(red 0%,green 50%,blue 50%)





    2、 radial-gradient([size at position],color-point1,color-point2...)


                   渐变的圆心位置（默认值是center）


    
    3、repeating-linear-gradient(angle,color-point1,colot-point2...)


    4、repeating-radial-gradient([size at point],color-point1,color-point2...)

display
   none:隐藏(边框和内容都隐藏，不占空间的隐藏)
   block:行内元素按块显示
   inline:块元素行内显示
   inline-block:行内块元素

visibility
    hidden
    visible
    colapse

opacity(不透明度)
    value:0-1

vertical-align:
     baseline(默认)
     top
     middle
     bottom

cursor 
    crosshair:十字

相邻兄弟选择器 将 div下一个p更改为 红色字体

div+p{color:red}

通用兄弟选择器 将 div后所有的p 背景改为 #ccc色

div~p{background:#ccc}

属性选择器

 元素[属性] : 匹配具备 属性的 指定元素

例：div[class][id]

元素[属性=值]

input[type="text"] : 匹配type的值为text的input元素

元素[属性~=值] 

~= : 包含指定的数据（独立）

=  : 只有指定的数据

元素[属性^=值] : 匹配指定属性以指定值开始的指定元素

元素[属性*=值] : 属性包含值元素

元素[属性$=值] : 匹配属性以指定值结束的元素
元素[属性!=值] : 匹配属性不等于具体值得元素

:first-child

:last-child

:empty

:only-child

:not(selector)

:first-letter 首字母

:first-line 首行

::selection 用户选取部分

:before 匹配到某一元素的最前面

:after 匹配到某一元素的最后面

content : 配合 :before 或 :after伪元素，插入生成内容

定义计数器

counter-reset : 计数器名称  初始值

计数器增量

counter-increment : 名称  量

使用

元素{ counter (名称) }

column-count 多列

-o- Opera

-moz- FireFox

-webkit- Chorme,Safari

Css Hack

<!-- [if 条件]>

<! [endif] -->

例：IE 6

<!-- [if IE 6] >

css

<! [endif] -->

大于IE 6：

<!-- [if gt IE 6]>

css

<! [endif] -->

Css动画

转换原点：transform-orign:(x,y,[z])

旋转：rotate()
位移：translate()
缩放：scale()
倾斜：skew()

过渡属性
1、属性：transition-property
         transition-property:background,color;






2、过渡时间：
  属性名：transition-duration:
           以秒（s）或（ms）为单位
   transition-duration:5s;




3、过渡函数：
      属性名：transition-timing-function
      ease：默认值，慢速开始  快速变快 慢速结束
      linear:匀速过渡
      ease-in:慢速开始，加速效果
      ease-out:以慢速结束，，减速效果
      ease-in-out；一慢速开始和结束，中间先加速后减速




      
4、过渡延迟
     属性名：transition-delay
     以秒或毫秒为单位






5、整合transition属性
   transition:属性名 持续时间 过渡函数 [延迟]
      属性名 持续时间 过渡函数 [延迟]

关键帧动画

1、定义关键帧
@keyframes 动画名{
from | 0%{
css样式
动画开始的状态
}

percent{

}

to | 100%{
css样式
动画结束的状态
}
}

2、触发动画（调用动画）
属性：animation
      animatin；动画名 持续时间 速度类型（linear ease ease-in ease-out...）

 3、动画子属性


         1、animation-name  @keyframes(动画)名称
2、animation-duration：动画时长
3、animation-timing-function:动画速度函数
4、animation-delay：动画的延迟时间
   animation:name duration timing-function
5、animation-iteration-count:播放次数
   取值：1、具体数值
         2、infinite(无限次播放)


6、animation-direction:动画播放方向
   取值：1、normal（正常播放）
         2、alternate 轮流播放
    奇数次数：正向播放
    偶数次数：反向播放


整合：animation:name duration timing-function [delay] iteration-ount direction