css分享

一、水平垂直居中：

1、水平居中：

① text-align:center
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
② margin:0 auto;
若是块级元素, 该元素设置 margin:0 auto即可.
③ width:fit-content;
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

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

    fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.

④ flex
使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:

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

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

.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, 子元素设置如下:

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

⑧使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

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

    看似跟直接用margin: 0 auto;一样，直接用对于block元素有效，例如span标签无效。

2、垂直居中：

① 单行文本, line-height：
若元素是单行文本, 则可设置 line-height 等于父元素高度。
② 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现：

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

    这是一种很流行的方法, 也适应IE7.

③ vertical-align
可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
优点：元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.
缺点：IE6~7, 甚至IE8 beta中无效.

④ flex，Flex 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，设置父元素相对定位(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属性设置为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）父级元素设置flex，子元素设置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 {
    //子元素，好像子元素不设置也行。
   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%);

①第一个参数（方向，可忽略），默认从上到下，有则（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 （对角线左下到右上）

②第二个参数及后面参数（颜色），可以用（英文/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);

①第一个参数（半径，可忽略），默认从中间开始，样式为圆形。

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间的整数，也可以使用百分比0%——100%，代表颜色中的红色成分。
②（绿色G）0——255间的整数，也可以使用百分比0%——100%，代表颜色中的绿色成分。
③（蓝色B）0——255间的整数，也可以使用百分比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个标准色和130多个其他色，用英文单词表示。

background-color:  blue;

5、hsl
hsl定义为色相-饱和度-明度（Hue-saturation-lightness）
①（色相H）：色彩的基本属性，就是平常说的颜色名称，如红色、黄色等。
②（饱和度S）：色彩的纯度，越高色彩越纯，低则逐渐变灰，取0——100%数值。
③（亮度L）：取0——100%。

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

应用场景：例如按钮背景色，可能存在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：检索或者设置所应用的动画名称。（该属性用于指定@keyframes动画的名称，样式块中使用from...to结构或百分比。）

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

• animation-duration：动画的持续时间，指定动画多少秒或者毫秒完成。

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

• animation-timing-function：设置动画将如何完成一个周期。（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：默认值，动画以低速开始，然后加快，在结束前变慢。
  animation-timing-function: ease-in; //ease-in：动画以低速开始。
  animation-timing-function: ease-out; //ease-out：动画以低速结束。
  animation-timing-function: ease-in-out; //ease-in-out：动画以低速开始和结束
  animation-timing-function: cubic-bezier(0.25, 0.25, 0 ,1); //cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  

• animation-delay：设置动画在启动前的延迟间隔。

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

• animation-iteration-count：定义动画的播放（循环）次数。（默认值1，infinite:无限次永远播放）

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

• animation-direction：指定是否应该轮流反向播放动画，默认值normal。

animation-direction: alternate; //动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
-webkit-animation-direction: alternate; /* Safari 和 Chrome */
animation-direction: reverse; //动画反向播放。
animation-direction: alternate-reverse; //动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
```

• animation-fill-mode：规定动画不播放时（当动画完成时，或者当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-fill-mode: forwards; //在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
-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; 

• 必须要事件触发。
• 常用于 :hover的过渡中。
  • transition-property：指定CSS属性的name，transition效果。
  • transition-duration：效果需要指定多少秒或毫秒完成。
  • transition-timing-function：指定转速曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
  • transition-delay：定义开始的时候。

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

• 必须要事件触发。
• translate(x, y) //定义2D转换。
• translate3d(x, y, z) //定义3D转换。
• translateX(x) //X轴
• translateY(y) //Y轴
• translateZ(z) //Z轴

④translate（移动）