一、水平垂直居中：
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（移动）
