==========CSS字体样式属性===============
font-size：字号大小
font-family：字体样式
font-weight：字体粗细
font-style：字体风格
font-style：italic 让字体倾斜
font-weight：nomal 让粗体不加粗
line-height: 行间距
text-align: 水平对齐方式
cursor: pointer; 鼠标箭头变成小手
list-style:去除列表的小圆点
letter-spacing: 字间距
word-spacing:单词之间的间距
rgb(0,0,0,0.8) : 第四个值为透明度 取值在0-1之间
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 文字阴影
text-indent: 2em 首行缩进两个字的距离
display:inline; 块级标签（独自占一行）转化为行内标签（多个标签可在同一行）
display：block; 行内标签转化为块级标签
display：inline-block; 行内快元素
在一行文字中，把文字的行高设为盒子的高度，可以使文字垂直居中
text-decoration 通常用于给链接改修饰效果 参数：none：定义标准的文本 underline：下划线 overline：上划线 line-through：删除线
box-shadow：5px 5px; 盒子阴影
==========背景样式属性===============
background-color:red; 背景色为红色
background-image：url(niu.jpg); 背景图片
background-repeat:no-repeat; 不平铺 （repeat-x） 横向平铺 （repeat-y）纵向平铺
background-position:10px,10px; 在左上角离左边和上边10px （top，center，bottom，left，right） 坐标原点在左上角
background-attachment：fixed； 设置背景图是滚动的还是固定的 默认是scroll滚动 fixed是固定的
background-size:width,height; 设置背景大小，用来等比例缩放图片（一般只用一个值） 参数：cover：图片进行等比例缩放，超出固定大小部分会被隐藏 contain：图片进行等比例缩放，会显示完整的图片，但可能会让背景露出来
background：url() norepeat left top,
url() norepeat right bottom; 多背景图片，注意：背景色要写在最后一张图片上
凹凸文字效果：text-shadow：1px，1px,1px,黑色，-1px，-1px，-1px，白色； 黑色为右下方向 白色为左上方向
==========基础选择器===============
1.标签选择器 标签名{属性1：属性值1，属性2：属性值2，属性3：属性值3} 如：h1{color：red,font-size:16px}
2.类选择器 .类名{属性1：属性值1，属性2：属性值2，属性3：属性值3} 标签调用的时候用class="类名" 如： .chose{color：red,font-size:16px} <h1 class="chose"></h1>
3.多类名选择器 .类名1{属性1：属性值1，属性2：属性值2} .类名2{属性1：属性值1，属性2：属性值2} 标签调用的时候用class="类名1 类名2" 如：.font24{font-size:24px} .red{color:red} <div class="font24 red"></div>
4.id选择器 #类名{属性1：属性值1，属性2：属性值2} 标签调用的时候用id="类名" 如： #chose{color：red,font-size:16px} <h1 id="chose"></h1>
5.通配符选择器 *{} 值得是所有的标签
****id类似身份证号 只能使用一次
类选择器类似名字 可以重复使用
==========链接伪类选择器===============
：link 未访问的链接
：visited 已访问的链接
：hover 鼠标停放时的样式
：active 选定的链接
==========结构伪类选择器=============== 直接跟在标签后面使用 单冒号
:first-child{} 选取其父元素下的首个子元素
:last-child{} 选区其父元素下的最后一个子元素
:nth-child(n){} 选区其父元素下的第n个子元素
:nth-child(even){} 选区其父元素下的偶数子元素
:nth-child(odd){} 选区其父元素下的奇数子元素
:nth-child(3n) {} 选区其父元素下的3的倍数的子元素
：nth-last-child(even){} 从最后一个子元素开始数 偶数倍的子元素
==========伪元素选择器=============== 双冒号
E::first-letter{} 选择文本的第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式 （当鼠标进行拖拉选中时的样式）
div::before{
content:"开始"； 在文本开头添加文字
}
div::before{
content:"结束"； 在文本结束添加文字
}
==========目标伪类选择器===============
:target{
color:red
} 被选中的标签跳转后的样式
==============快捷键==============
1.标签 输入标签名 按tab键 快速创建标签
2. ul>li*5 按tab键 可以在ul下建5个li
3. h1+p 按tab键 快速创建兄弟标签
==============引入CSS样式表==============
====行内样式表===
<标签名 style ="属性1：属性值1；属性2：属性值2；属性3：属性值3;">内容</标签名>
如：<div style="color:red;font-size:24px;">啦啦啦</div>
====内部样式表===
<style></style>
====外部样式表===
<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
==============复合选择器================
====交集选择器====
例如： p.one 选择的时类名为one的p标签（使用较少）
====并集选择器====
例如： p,div,h1{ color:red; } 同时选择多个样式完全相同或部分相同的标签
====后代选择器====
例如： div ol ul{ color:red; } 关系时一层层嵌套的关系
====子元素选择器====
例如： div> li 仅选择div的子元素 （不包括孙子，重孙等等）
====属性选择器====
a[attr] { color:red; } 存在attr属性即可
a[attr=val] { color:red; } 属性值完全等于val
a[attr*=val] { color:red; } 属性值包含val字符且在任意位置
a[attr^=val] { color:red; } 属性值包含val字符并且以val开头
a[attr$=val] { color:red; } 属性值包含val字符并且以val结尾
==============CSS的特性==============
====层叠性====
长江后浪推前浪：后来的样式会覆盖前面的样式。 如：div{ color：red}； div{color：blue}； 最终颜色为蓝色
====继承性====
子承父业：子标签会继承父标签的某些样式； 如：div{color:red}; <div><p>你好</p></div> p标签的颜色会发生改变
====CSS优先级====
标签贡献值：0，0，0，1；
每个类，伪类的贡献值为0，0，1，0；
每个id 的贡献值为0，1，0，0；
每个行内样式的贡献值为1，0，0，0；
每个！important的贡献值为无穷大
****权重的叠加 例如: ul li{ color:red } 的权重等于 0 0 0 1+ 0 0 0 1 =0 0 0 2
****权重的继承性：继承下来的权重为0； 例如：
<div class="color"><p>hellow</p></div> .color{color:red }; p{color:blue}
最终的颜色为蓝色，因为p标签继承的div标签的权重是0
***权重相同则就近原则
==============CSS盒模型及应用==============
border：1px solid red; 红色的边框
border-collapse：collapse； 合并表格里面的相邻边框
border-radius：10px； 圆角矩形（ 当设置为方形盒子的一半时会成为圆形）
padding： 10px 30px; 上下10px 左右30px
padding：10px 30px 50px 上10px 左右30px 下50px
padding：10px 20px 30px 40px 顺时针
margin：30px auto； 上下30 左右自动 这样可以实现块级元素带有宽度的盒子水平居中对齐
==============写导航栏的小技巧==============
***当导航栏字数不同时，只设高度，不设宽度，用padding来控制左右间距
高度则用line-height设为行高实现居中
==============文字居中和盒子居中==============
文字居中：text-align:center
盒子居中：margin：0 auto
=================边距合并=================
1.父子盒子嵌套的边距问题
两个块级元素，如果父级元素没有边框，那么两个盒子会合并
解决办法：1.给父亲元素添加border边框
2.给父亲元素添加padding：1px；
3.overflow：hidden；
==============盒子的计算尺寸================
外盒高度=content height + padding+border+margin
内盒高度=content height + padding+border
外盒宽度=content width + padding+border+margin
内盒宽度=content width + padding+border
***使用padding调整盒子里面文本的距离或改变盒子的大小（如果不设宽度则不影响）
==============清除浮动(当父盒子没有设高度时)================
1. 在父标签的子标签里面添加一个空的盒子，加上属性clear：both； 例如： <div class="clear"></div> .clear{clear:both; }
2.在父标签里面添加overflow:hidden;
3. after伪元素清除浮动 .clearfix:after{
content:"."; display:block; height:0; visibility:hidden; clear:both;
}
.clearfix{*zoom:1; }
4. 双伪元素清除浮动
.clearfix:before，.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{*zoom:1; }
==============定位（position）================
定位的两个属性： 定位模式和边偏移
定位模式：
===静态定位（stastic）====
相当于标准流（一般用来清除定位），不可以进行边偏移
===相对定位（relative）====
1. 相对定位是以原来位置的左上角来进行边偏移的（原来的位置继续保留）
2.可以通过边偏移来进行偏移位置，但是原来的位置继续保留（相对定位不脱标）
===绝对定位（absolute）====
1.绝对定位完全不占有位置（完全脱标）
2.以浏览器的左上角对齐
******如果父亲有定位（relative或absolute），儿子的定位是absolute，则根据父亲为基准点来定位
==========头部的固定定位（网页头部固定在上方）=============
1.position：fixed
2.top:0; left:0;
==========盒子（div）的叠层次序=============
1. z-index：1； 值越大则在上面
2. z-index相同的情况下，写在后面的盒子在图层上面（后来居上）
3.只有绝对，相对，固定属性的盒子才有z-index属性（也就是static没有z-index）
==============元素的显示和隐藏================
===display====
隐藏： display：none;
显示： display：block；
特点：隐藏了以后位置不保留
===visibility====
隐藏： visibility：hidden；
特点：隐藏后保留其原来的位置
===overflow====
1.默认情况下是overflow：visibility； 内容超出显示
2. overflow：auto； 内容超出后显示滚动条
3.overflow：scroll； 一直显示滚动条
4.overflow:hidden; 超出的部分切割掉了不显示
==============鼠标的显示和隐藏================
1. 小白 （无效果） cursor：default
2. 小手 cursor：pointer
3. 移动(十字效果) cursor:move
4. 文本 cursor:text;
==================轮廓线===================
隐藏掉文本框的轮廓线： outline：0；
=============防止文本域被拖拽（textarea）==========
resize：none；
=============行内快元素与文字对齐===============
vertical-align: baseline | top | middle | bottom
居中对齐：vertical-align:middle
=============去除图片和盒子的底部缝隙===============
vertical-align:top；
===============word-break（主要处理英文单词）========
normal：浏览器默认的换行规则
break-all：允许将单词拆开显示
keep-all：只能在空格或连字符处换行（不允许单词拆开显示）
===============word-space=====================
word-space：nowrap； 不允许换行
text-overflow：ellipsis； 超出的部分省略号显示
===============CSS精灵技术=====================
1.先把所有的小图片用ps集合起来
2.使用，先给盒子设定好图片大小的宽高
3.background插入背景图片，并调整图片位置 background：url("images/a.jpg") 0px -193px no-repeat;
===============字体图标=======================
1.在网上下载想要的图片或用自己设计的转化格式,然后下载下来，解压 （主要使用里面的.html文件和font文件夹） 网站：icomoon.io
2.在样式里面声明字体 （在压缩包里面的style.css里面）
@font-face { /* 声明字体图标 */
font-family: "icomoon";
src: url('fonts/icomoon.eot?7kkyc2'); /* IE9*/
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/icomoon.svg?7kkyc2') format('svg'); /* iOS 4.1- */
font-weight: none;
font-style: none;
}
3.给标签添加字体
font-family:icomoon;
4. 将解压文件里.html打开复制想要用的字体，粘贴到标签里面
***字体图标追加文件： 到网站icomoon.io导入selection.json文件（import Iconts），然后添加下载
===============过渡效果（写在div里面，不能写在hover里面）=======================
transition:要过渡的属性 花费时间 运动曲线 何时开始； 如：trasition：all 1s easy 0s；
***如果有多组的属性要过渡，用逗号隔开
运动曲线：linear（匀速），ease（逐渐慢），easy-in（逐渐快），easy-in-out(先快后慢)；
====动画=====
1. 引用动画 animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反向；
animation：go 2s ease 0s infinite alternate； infinite代表无限循环
2.@keyframes go{
from{
transform：translateX（0）；
}
to {
transform：translateX（600）；
}
}
（第一种办法）
2.@keyframes go{
0% {
transform: translate3d(0,0,0);
}
20% {
transform: translate3d(300px,0,0);
}
40% {
transform: translate3d(300px,300px,0);
}
60% {
transform: translate3d(0,300px,0);
}
80% {
transform: translate3d(0px,600px,0);
}
100% {
transform: translate3d(300px,600px,0);
}
}
（第二中办法（多组动画））
===============利用移动实现盒子居中的完美写法=======================
div{
200px;
height: 200px;
background-color: #00BFFF;
position: absolute;
left: 50%; 把盒子向左移动父布局的一半
top: 50%; 把盒子向上移动父布局的一半
transform: translate(-50%,-50%); 把盒子向右，向上移动自己宽度的一半
}
=====透视======
perspective: 1200px;
调整焦距显示出3d效果
=====旋转======
transition:all 0.6s;
transform：rotate（180deg）； 默认是以中心点旋转
transform-origin:top left; 坐上为原点旋转
=====3d旋转======
transform：rotateX（180deg）； 绕x轴
transform：rotateY（180deg）； 绕y轴
transform：rotateZ（180deg）； 绕z轴
backface-visibility：hidden； 把不是正对着我们的图片隐藏掉
===============伸缩盒子三等分=======================
1. 父盒子设置弹性布局 display：flex；
2. 给每个子盒子添加权重 flex：1；
flex-direction:column; 主轴垂直排列
flex-direction:row; 主轴水平排列
=============justify-content属性=============================
作用：调整主轴的对齐方式
值：
flex-start： 默认值，项目位于容器的开头
flex-end: 位于容器的结尾
center：项目位于容器的中心
space-between：左右两边贴近盒子，中间和两边有空隙
space-around：项目位于各行之间，之前，之后都留有空白的容器内
=============align-items属性=============================
值:
align-items：flex-start:上对齐
align-items： flex-end：下对齐
align-items： center 居中（主要针对一行盒子进行居中）
align-items： stretch 让子元素的高度适应父盒子的高度（父盒子不设高度）
=============flex-wrap控制是否换行=============================
flex-wrap:nowrap; 默认值，规定灵活的项目不拆行，不拆列，则收缩显示
wrap：规定灵活的项目在必要的时候拆行或拆列
wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
=============align-content属性=============================
作用：控制多行盒子的对齐效果
=============order=============================
order的作用：通过css来控制不同盒子的排列顺序，使用order
***order的默认值是0，值越小排在越前面
=============BFC=============================
BFC是一个独立的渲染区域
主要作用是清除浮动：
1.overflow：hidden；
2.float:left;
3.position:absolute;或fixed
4.display：inline-block，table-cell，flex等等
2.可以解决外边距合并的问题（给两个盒子设置不同的BFC）
===============浏览器前缀=======================
-webkit- 谷歌
-moz- firefox 火狐
-o- 欧朋opera
-ms- internet Explorer,edge
-khtml- Konqueror
===============背景渐变色=======================
background：-webkit- linear-gradient(渐变的起始位置，起始颜色，结束颜色)； 例：background：-webkit- linear-gradient（top,red,green）
background：-webkit- linear-gradient(渐变的起始位置，颜色 0%，颜色 50%,颜色 100%)； 例：background：-webkit- linear-gradient（top,red 0%,green 20%，blue 100%）
=============CSS W3C统一的验证工具====================
validator.w3.org
=============preserve-3d============================
trasform-style：preserve-3d
让父盒子里面的子盒子以3d的效果显示
========盒子垂直居中2方法===========
1. 调margin
2.vertical-align：middle；
========盒子水平居中3方法===========
1.margin：0 auto；
2.调margin
3.子盒子设为inline-block行内快元素，然后再用text-align：center；来调整
=====================添加ico图标==================
1.打开网站找到想要的图标，如：http://www.taobao.com/favicon.ico
2.放到根目录下面
3.引用：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
=====================转换ico图标==================
bitbug.net