选择器：
id选择器：#id
类选择器：.class
标签选择器：p、div、h1、、、、
后代选择器：空格隔开，后面的元素是前面的子元素：#box li .a1
并集选择器：用逗号隔开:p,#box,.a
交集选择器：前面的标签是后面的元素的父元素：ul#a
子元素选择器：h2>em
属性选择器：[font]或[type="text"]或[href][alt]或a[href]
伪元素选择器 如：E:first-line，E:before，E：after
伪类选择器 如：E:first-child ，E:visited，E:focus，E:enabled
高级选择器：
：first-of-type
：last-of-type
：first-child
：last-child
：only-child
：only-of-type
：nth-child（n） 只按顺序选取元素
：nth-of-type（n） 指定元素在父元素中的第几个
盒模型
width、border-lleft、border-right、padding-left、padding-right、margin-left、margin-right
height、border-top、border-bottom、padding-top、padding-bottom、margin-top、margin-bottom
正常和模型：box-sizing：content-box；
怪异盒模型：box-sizing：border-box；
display属性
none、inline、inline-block、block
清除浮动：（防止父元素塌陷）
1、给父元素加固定高度或者加overflow：hidden；
2、clear：left、right、both
3、在所有浮动元素后加一个空div，加上clear：both；
4、伪元素清除浮动：
.clearfix:after { ??????????????????content: "."; ??????????????????visibility: hidden; ??????????????????display: block; ??????????????????height: 0; ??????????????????clear: both; ???????????}visibility:hidden：元素隐藏，但是还保存元素所占据的空间，display：none；不占据空间定位
position：fixed、relative、absolute；
z-index：整数；为元素定义层数
!Important（将权重变为最大）
#content{ ?????height:960px !important; ?????height:900px;} @import导入样式 这种方式导入样式，先加载html，再加载css link与其相反
@import url("global.css");@import url(global.css);@import "global.css";圆角
border-radius：像素/百分比；
集合写法
#box{border-radius：10px 20px 30px 40px；}左上、右上、右下、左下#box{border-radius：10px 20px 30px；}左上、右上和左下、右下#box{border-radius：10px 20px；}左上和右下、右上和左下#box{border-radius：10px；}四个角css3背景
background:background-color ||background-image || background-repeat || background-attachment || background-position||background-sizebackground-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 background-color:#色码; 背景色彩 background-position：默认值：0% ?0%，可能值：top left ，center left等background-repeat：默认值：repeatscroll 拉动卷轴时，背景图片会跟着移动（缺省值） fixed 拉动卷轴时，背景图片不会跟着移动 repeat 背景图片并排 background-size：是css3规定的属性，50%为缩放图片；100px 50px：把图片调整到100像素宽，50像素高；cover：拉大图片，使其完全填满背景区；container：缩放图片，使其恰好适合背景区background-position:X坐标 Y坐标
css3旋转
div{ ???transform:rotate(7deg); ???-ms-transform:rotate(7deg); ????/* IE 9 */ ???-moz-transform:rotate(7deg); ????/* Firefox */ ???-webkit-transform:rotate(7deg); /* Safari 和 Chrome */ ???-o-transform:rotate(7deg); ????/* Opera */}css盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset/outset；
v-shadow：必须，垂直阴影位置，允许负值（px）
h-shadow：必须，水平阴影位置，允许负值（px）
blur：可选，模糊度（px）
color：可选
inset/outset:可选，阴影内置还是外置，默认是outset
div{ ???box-shadow: 10px 10px 5px #888888;}css3文字阴影
text-shadow
div{text-shadow:5px 2px 6px #000;} 换行
test {word-wrap:break-word;}css透明
1、background：rgba（0,0,0,0.5） >=ie8
2、opacity：0.8; 取值为[0-1]
3、filer：alpha（opacity=80）； 取值为[0-100] <ie8
4、transparent 用到任何一个带color值的属性上 background-color：transparent；
css3位移
transform：translate（10px 20px）；向右位移10px 向下位移20px
transform：translate（10px）；向x轴方向位移10px
transform：translateX（）
transform：translateY（）
transform：translateZ（）
transform：translate（x y）
transform：translate（x y z）
规定从电脑屏幕到你的脸的方向为Z轴正方形
css3缩放
transform：scale（0.5）整体缩小一半
transform：scale（x,y） 水平缩放x 垂直缩放 y
css3 3D效果
先声明时3D效果
/*声明3d效果*/ ???????????transform-style:preserve-3d; ???????????-ms-transform-style:preserve-3d; ???????????-moz-transform-style:preserve-3d; ???????????-webkit-transform-style:preserve-3d; ???????????-o-transform-style:preserve-3d; ???????????/*透视度*/ ???????????perspective:20000px; ???????????-ms-perspective:500px; ???????????-moz-perspective:500px; ???????????-webkit-perspective:500px; ???????????-o-perspective:500px; ???????????transform:rotateY(-45deg) rotateX(0deg) rotateZ(0deg);
transform:translate(x,y,z)
transform:rotate(x,y,z)
transform:scale(x,y,z)
css3过渡
div{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:linear;-moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:linear;-o-transition-delay:2s;}和写
div{transition: width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;}transition：属性名/all 、 过渡持续时间 、过渡曲线、延迟开始时间；（时间单位为s）
时间曲线值：linear、ease、ease-in、ease-out、ease-in-out
css3线性渐变（背景）
从左到右
#grad { ?background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ ?background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ ?background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ ?background: linear-gradient(to right, red , blue); /* 标准的语法 */}从左上角到右下角的线性渐变：
#grad { ?background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ ?background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ ?background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ ?background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */}带有指定的角度的线性渐变： 规定上方为0deg 顺时针
从上到下
#grad { ?background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ ?background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ ?background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ ?background: linear-gradient(180deg, red, blue); /* 标准的语法 */}下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：
#grad1 { ???height: 55px; ???background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ ???background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ ???background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ ???background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */}一个重复的线性渐变：
#grad { ?/* Safari 5.1 - 6.0 */ ?background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); ?/* Opera 11.1 - 12.0 */ ?background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); ?/* Firefox 3.6 - 15 */ ?background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); ?/* 标准的语法 */ ?background: repeating-linear-gradient(red, yellow 10%, green 20%);}css3径向渐变
颜色结点均匀分布的径向渐变：
#grad { ?background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ ?background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ ?background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ ?background: radial-gradient(red, green, blue); /* 标准的语法 */}径向渐变 - 颜色结点不均匀分布
#grad { ?background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ ?background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ ?background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ ?background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */}shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad { ?background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ ?background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ ?background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ ?background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}css3元素定位原点
transform-origin：x y；
transform-origin：100%；一个值代表在x轴的右边，相当于right
transform-origin：0% 100%；原点在左下角
transform-origin：top 100%；原点在右上角
transform-origin：0% bottom；原点在左下角
transform-origin：top right；原点在右上角
transform-origin：center center；原点在中心
transform-origin：50% 50%；原点在中心
transform-origin：50px 50px；原点在（50px，50px）处
css3动画
声明动画帧
@keyframes myfirst{ ???from {background: red;} ???to {background: yellow;}} @-webkit-keyframes myfirst /* Safari 与 Chrome */{ ???from {background: red;} ???to {background: yellow;}}@keyframes myfirst{ ???0% ??{background: red;} ???25% ?{background: yellow;} ???50% ?{background: blue;} ???100% {background: green;}} @-webkit-keyframes myfirst /* Safari 与 Chrome */{ ???0% ??{background: red;} ???25% ?{background: yellow;} ???50% ?{background: blue;} ???100% {background: green;}}@keyframes myfirst{ ???0% ??{background: red; left:0px; top:0px;} ???25% ?{background: yellow; left:200px; top:0px;} ???50% ?{background: blue; left:200px; top:200px;} ???75% ?{background: green; left:0px; top:200px;} ???100% {background: red; left:0px; top:0px;}} @-webkit-keyframes myfirst /* Safari 与 Chrome */{ ???0% ??{background: red; left:0px; top:0px;} ???25% ?{background: yellow; left:200px; top:0px;} ???50% ?{background: blue; left:200px; top:200px;} ???75% ?{background: green; left:0px; top:200px;} ???100% {background: red; left:0px; top:0px;}}将动画帧绑定到元素上
div{ ???animation-name: myfirst; ???animation-duration: 5s; ???animation-timing-function: linear; ???animation-delay: 2s; ???animation-iteration-count: infinite; ???animation-direction: alternate; ???animation-play-state: running; ???/* Safari 与 Chrome: */ ???-webkit-animation-name: myfirst; ???-webkit-animation-duration: 5s; ???-webkit-animation-timing-function: linear; ???-webkit-animation-delay: 2s; ???-webkit-animation-iteration-count: infinite; ???-webkit-animation-direction: alternate; ???-webkit-animation-play-state: running;}和写
div{ ???animation: myfirst 5s linear 2s infinite alternate; ???/* Safari 与 Chrome: */ ???-webkit-animation: myfirst 5s linear 2s infinite alternate;}动画帧、动画持续时间、播放曲线、延迟时间、播放次数、是否反向播放
css总结
原文地址：https://www.cnblogs.com/fqh123/p/10803396.html