一抡蛙、水平垂直居中：

1录语、水平居中：

① text-align:center
若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實現(xiàn)行內(nèi)元素水平居中.
② margin:0 auto;
若是塊級元素, 該元素設(shè)置 margin:0 auto即可.
③ width:fit-content;
若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設(shè)置為fit-content,并且配合margin, 作如下設(shè)置:

.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

    fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以輕松實現(xiàn)水平居中, 目前只支持Chrome 和 Firefox瀏覽器.

④ flex
使用flex 2012年版本布局, 可以輕松的實現(xiàn)水平居中, 子元素設(shè)置如下:

.son{
    display: flex;
    justify-content: center;
}

⑤ 盒模型
使用flex 2009年版本, 父元素display: box;box-pack: center;如下設(shè)置:

.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
      display: box;
      box-orient: horizontal; //指定子元素在一個水平線上從左至右排列，主流瀏覽器都不支持注服，Safari, Opera, 和 Chrome通過私有屬性 -webkit-box-orient 支持韭邓。了解就行。
      box-pack: center; //額外的空間劃分均勻的兩半溶弟，前一半放置第一個子元素女淑，另一半放置最后一個子元素
}

⑥ transform

.son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

⑦ 使用絕對定位方式, 以及負值的margin-left, 子元素設(shè)置如下:

.son{
    position:absolute;
    width:固定; //100px
    left:50%;
    margin-left:-0.5*寬度; //-50px
}

⑧使用絕對定位方式, 以及l(fā)eft:0;right:0;margin:0 auto; 子元素設(shè)置如下:

.son{
    position:absolute;
    width:固定; 
    left:0;
    right:0;
    margin:0 auto;
}

    看似跟直接用margin: 0 auto;一樣，直接用對于block元素有效辜御，例如span標(biāo)簽無效鸭你。

2、垂直居中：

① 單行文本, line-height：
若元素是單行文本, 則可設(shè)置 line-height 等于父元素高度。
② 行內(nèi)塊級元素, 使用 display: inline-block, vertical-align: middle; 加上偽元素輔助實現(xiàn)：

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

    這是一種很流行的方法, 也適應(yīng)IE7.

③ vertical-align
可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時, 才會生效, 對于其他塊級元素, 例如 div袱巨、p 等, 默認情況是不支持的. 為了使用vertical-align, 我們需要設(shè)置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
優(yōu)點：元素高度可以動態(tài)改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素內(nèi)容也不會被截斷.
缺點：IE6~7, 甚至IE8 beta中無效.

④ flex阁谆，F(xiàn)lex 2012版

.parent {
  display: flex;
  align-items: center;
}

    IE8/IE9不支持

⑤ 盒模型，使用flex 2009版.

.parent {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-box-pack: center;  
}

    不支持IE瓣窄。

⑥ transform笛厦，設(shè)置父元素相對定位(position:relative), 子元素如下css樣式：

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

⑦⑧元素高度固定，類似水平居中俺夕。

3裳凸、水平垂直居中：

① （transform + absolute）利用css3的translate進行偏移定位。

.wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
} 

②（flex）利用css3的flex布局劝贸，父元素display屬性設(shè)置為flex姨谷，并且定義元素在兩條軸線的布局方式均為center。

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.wrap .box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
} 

③（flex + margin）父級元素設(shè)置flex映九，子元素設(shè)置margin: auto;梦湘。 可以理解為子元素被四周的margin “擠” 到了中間。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
}
.wrapper > p {
    margin: auto;
}

④（table-cell + text-align:center）

.wrap {
    //父元素
    display: table; 
    width: 100vw; 
    height: 100vh; 
    text-align: center;
}
.wrap .box {
    //子元素
    display: table-cell; 
    vertical-align: middle;
} 

⑤（table-cell）

.wrap {
    //父元素
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width: 100vw;
   height: 100vh;
}
.wrap .box {
    //子元素件甥，好像子元素不設(shè)置也行捌议。
   display: inline-block;
   vertical-align: middle;
} 

⑥（grid）
兼容性不如flex，只支持IE10及以上引有。

.wrap {
    //父元素
   display: grid;
   width: 100vw;
   height: 100vh;
}
.wrap .box {
    //子元素
    align-self: center;
    justify-self: center;
} 

⑦（::after）偽元素瓣颅，用法跟垂直居中的②類似，父元素加上text-align: center;即可譬正。

二宫补、漸變（IE10以上才兼容）

1、線性漸變（linear-gradient）就是向一個方向進行顏色漸變曾我，上/下/左/右/對角線

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
例子：
background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);

①第一個參數(shù)（方向粉怕，可忽略），默認從上到下抒巢，有則（top/left/bottom/right）贫贝。

background: linear-gradient(to bottom,hotpink, darkblue); //to bottom(從上邊開始)
background: linear-gradient(to right,hotpink, darkblue); //to right(從左邊開始)
background: linear-gradient(to top right,hotpink, darkblue); //to top right(從左下角開始)
background: linear-gradient(0deg,hotpink, darkblue); //0deg / 360deg （從下到上）、90deg （從左到右）虐秦、180deg/-180deg （從上到下）平酿、270deg / -90deg （從右到左）、45deg （對角線左下到右上）

②第二個參數(shù)及后面參數(shù)（顏色）悦陋，可以用（英文/16進制/rgba/rgb/多個顏色控制）等。

background: linear-gradient(#7ffc466b, #7f3f5efb);
background: linear-gradient(rgb(255,237,188), rgb(237,66,100)); /*rbg*/
background: linear-gradient(rgb(255,237,188,.5), rgb(237,66,100,.5)); /*rgba*/
background: linear-gradient(#3a1c71, #d76d77,#ffaf7b); //多個值
background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); //在顏色后面加百分比筑辨，就可以控制在整個寬度的百分之多少的時候到達某一個顏色值

2俺驶、徑向漸變（radial-gradient）就是一個中心點向外圍進行顏色漸變

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

①第一個參數(shù)（半徑，可忽略），默認從中間開始暮现，樣式為圓形还绘。

background: radial-gradient(300px,hotpink, darkblue); //傳一個半徑值
background: radial-gradient(200px 50px,hotpink, darkblue); //傳兩個半徑值，傳兩個值默認為橢圓栖袋，一個是橫向的長度拍顷，一個是縱向的長度

②第二個及以后（顏色），同上塘幅。
立體小球例子：

body {
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
.radial-gradient {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 100px;
  background-color: hotpink;
  background-image: radial-gradient(
    200px at 50px 60px,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
  );
}
<div class="radial-gradient"></div>

三昔案、表示顏色的多種方法：

1、rgba
①（紅色R）0——255間的整數(shù)电媳，也可以使用百分比0%——100%踏揣，代表顏色中的紅色成分。
②（綠色G）0——255間的整數(shù)匾乓，也可以使用百分比0%——100%捞稿，代表顏色中的綠色成分。
③（藍色B）0——255間的整數(shù)拼缝，也可以使用百分比0%——100%娱局，代表顏色中的藍色成分。
④（透明度A）取值0（完全透明）——1（完全不透明）之間咧七，代表透明度衰齐。

background-color: rgba(255,255,255,0.9);

2、rgb
rgb分別表示的值和rgba類似猪叙，沒有透明度娇斩。例如rgb(255,0,0) 等價于 #FF0000 等價于 rgb(255,0,0,1).

background-color: rgba(255,255,255);

3、十六進制

background-color:  #0000FF;

4穴翩、顏色名稱
147個顏色名稱犬第，包括17個標(biāo)準(zhǔn)色和130多個其他色，用英文單詞表示芒帕。

background-color:  blue;

5歉嗓、hsl
hsl定義為色相-飽和度-明度（Hue-saturation-lightness）
①（色相H）：色彩的基本屬性，就是平常說的顏色名稱背蟆，如紅色鉴分、黃色等。
②（飽和度S）：色彩的純度带膀，越高色彩越純志珍，低則逐漸變灰，取0——100%數(shù)值垛叨。
③（亮度L）：取0——100%伦糯。

background:hsl(200, 60%, 60%)

應(yīng)用場景：例如按鈕背景色，可能存在hover、active等顏色值不一樣敛纲，如果用rgb則需要多個色值喂击，如果用hsl，改變l（Light淤翔，亮度）值即可翰绊。例如上面的例子改變第三個值就能達到效果。
6旁壮、hsla
hsla 比 hsl 多一個a（表示透明度）监嗜，取值0——1

四、動畫animation寡具。（IE10）

1秤茅、幾個容易混淆的css屬性：animation（動畫）、transition（過渡）童叠、transform（變形）框喳、translate（移動）

①animation（動畫）

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state; //語法
animation: toRotate  10s          linear            -5s         infinite          alternate;

• animation-name：檢索或者設(shè)置所應(yīng)用的動畫名稱。（該屬性用于指定@keyframes動畫的名稱厦坛，樣式塊中使用from...to結(jié)構(gòu)或百分比五垮。）

  animation-name:mymove;
  -webkit-animation-name:mymove; /* Safari 和 Chrome */
  

• animation-duration：動畫的持續(xù)時間，指定動畫多少秒或者毫秒完成杜秸。

  animation-duration:2s; 
  -webkit-animation-duration:2s; /* Safari 和 Chrome */
  

• animation-timing-function：設(shè)置動畫將如何完成一個周期放仗。（linear、ease撬碟、ease-in诞挨、ease-out、ease-in-out呢蛤、cubic-bezier(n,n,n,n)）

  animation-timing-function: linear; //linear：動畫從頭到尾的速度是相同的惶傻。
  -webkit-animation-timing-function: linear; /* Safari and Chrome */
  animation-timing-function: ease; //ease：默認值，動畫以低速開始其障，然后加快银室，在結(jié)束前變慢。
  animation-timing-function: ease-in; //ease-in：動畫以低速開始励翼。
  animation-timing-function: ease-out; //ease-out：動畫以低速結(jié)束蜈敢。
  animation-timing-function: ease-in-out; //ease-in-out：動畫以低速開始和結(jié)束
  animation-timing-function: cubic-bezier(0.25, 0.25, 0 ,1); //cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中自己的值∑В可能的值是從 0 到 1 的數(shù)值抓狭。
  

• animation-delay：設(shè)置動畫在啟動前的延遲間隔。

  animation-delay:2s; 
  -webkit-animation-delay:2s; /* Safari 和 Chrome */
  

• animation-iteration-count：定義動畫的播放（循環(huán)）次數(shù)造烁。（默認值1辐宾，infinite:無限次永遠播放）

  animation-iteration-count:3;
  -webkit-animation-iteration-count:3; /*Safari and Chrome*/
  -webkit-animation-iteration-count:infinite; /*無限次播放*/
  

• animation-direction：指定是否應(yīng)該輪流反向播放動畫狱从，默認值normal膨蛮。

animation-direction: alternate; //動畫在奇數(shù)次（1叠纹、3、5...）正向播放敞葛，在偶數(shù)次（2誉察、4、6...）反向播放惹谐。
-webkit-animation-direction: alternate; /* Safari 和 Chrome */
animation-direction: reverse; //動畫反向播放持偏。
animation-direction: alternate-reverse; //動畫在奇數(shù)次（1、3氨肌、5...）反向播放鸿秆，在偶數(shù)次（2、4怎囚、6...）正向播放卿叽。
```

• animation-fill-mode：規(guī)定動畫不播放時（當(dāng)動畫完成時，或者當(dāng)動畫有一個延遲未開始播放時）恳守，要應(yīng)用到元素的樣式考婴。

animation-fill-mode: forwards; //在動畫結(jié)束后（由 animation-iteration-count 決定），動畫將應(yīng)用該屬性值催烘。
-webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
```

• animation-play-state：指定動畫是否正在運行或已暫停沥阱。

animation-play-state:paused; //paused:指定暫停動畫.
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
animation-play-state: running; //running:指定正在運行的動畫。
```

②transition（過渡）

transition: property duration timing-function delay;
transition: width 2s ease -2s; 

• 必須要事件觸發(fā)伊群。
• 常用于 :hover的過渡中考杉。
  • transition-property：指定CSS屬性的name，transition效果舰始。
  • transition-duration：效果需要指定多少秒或毫秒完成崇棠。
  • transition-timing-function：指定轉(zhuǎn)速曲線。（linear蔽午、ease易茬、ease-in、ease-out及老、ease-in-out抽莱、cubic-bezier(n,n,n,n)）
  • transition-delay：定義開始的時候。

③transform2d(IE9)或者3d(IE12)（變形）

• 必須要事件觸發(fā)骄恶。
• translate(x, y) //定義2D轉(zhuǎn)換食铐。
• translate3d(x, y, z) //定義3D轉(zhuǎn)換。
• translateX(x) //X軸
• translateY(y) //Y軸
• translateZ(z) //Z軸

④translate（移動）