快捷方式
<!--div*3 多个div-->
<!--ctrl+D 复制本行代码-->
<!--ctrl+Y 删除本行代码-->
<!--tab 补全标签-->

样式选择器
<!--样式style标签写在head标签中-->
<!--标签选择器-->  div{……}
<!--类选择器“.”+类名-->  class=“first”  .first{……} 
<!--id选择器 #+id名--> #second{……}

盒子
<!--div 盒子 宽高 边框 -->
<!--border边框  1px控制边框粗细  red控制边框颜色  solid控制边框线体样式-->
<!--px像素值  %占本标签父级标签的%多少-->  本标签上边的标签是父级标签
<!--width 设置宽度-->
<!--height 设置高度-->
<!--background-color 标准背景颜色-->

视频
<!--video 视频标签-->
<!--autoplay 自动播放视频-->
<!--muted 静音播放视频-->
<!--contrls 显示进度条-->
<!--loop 循环播放-->
<!--source 兼容各个浏览器使用多个视频源-->
比如{<soure src="……"> <soure src="……">}兼容

图片
<!--img标签引入图片  src为资源路径-->
<!--alt 为当前图片破损是显示的图片说明-->
<！--title鼠标悬浮时显示文字-->
<!--width 图片高度-->
<!--height 图片宽度-->

标题标签
<!--标题标签--> <h1></h1>……<h6></h6>
<!--h5语义化-->
<!--1.节省代码-->
<!--2.让搜素引擎更好的搜索-->
<!--3.便于后期维护-->

文字编辑
<!--p段落标签-->  <p></p>
<!--s删除标签-->  <s></s>
<!--span标签 自定义文字样式-->  <span class="……">……</span>
<!--i标签是斜体-->
<!--b标签是粗体-->
<!--strong是粗体-->

超链接
<!--a 做链接使用 href是链接的位置-->

字体样式
<!--color: red; 字体颜色-->
<!--font-size: 65px; 字体字号-->
<!--font-family: "黑体"; 字体样式-->
<!--font-weight:bolder；字体粗细-->

元素样式
<!--块元素 比如"p""h1-h6""div.,"--> 1.独占一行  2.块元素可以设置宽高
<!--span i b s u 行内元素--> 1.宽度取决于内容的多少 2.与其他行内元素可以在一行  3.不能设置宽高

选择器
/a>b a代表父级 b代表子级/
/ >子代选择器 /
/ "空格"后代选择器 /

引入
<!--引入外部css文件 通过link标签-->

无序列表编辑
<!--ul li 无序列表-->    <ul><li>……</li></ul>
<!--list-style-type: none;--> 去除li前面的黑色点
<!--text-decoration: none;--> 去除标签的文本样式（下划线）在a标签
<!--列表样式类型：什么都不使用-->

<!--公共模块样式 *号--> 
<!--margin: 0;   padding: 0; 去除默认样式--> 
<!--margin 边缘--> 比如 margin-left：100px；
<!--padding 向里靠-->

文本样式
<!--border: 1px red solid; 文本水平居中-->
<!--line-height: 50px;行高 当行高值等于高度值的时候会垂直居中-->
<!--font-family 字体样式-->
<!--同时设置三个属性 font：粗细大小样式（顺序，"宽","高","样式"）-->
<!--opacity: 0.8; 透明度 越小越明显-->
<!-- :hover 当鼠标悬浮在这个标签上的时候触发--> 比如 ：hover{background:rgb(79,80,90);}
<!--在a标签中href="#"代表点击跳转本页面-->
<!--float: left; 让文字横排-->

定位设置
<!--position: absolute; 绝对定位 参考浏览器位置进行定位-->
<!--top:; 距离上方的位置-->
<!--bottom:; 距离下方的位置-->
<!--right:; 距离右边的位置-->
<!--left:; 距离左边的位置-->

<!--margin 外边距-->
<!--margin 后面一个值的时候 四周都设置-->
<!--margin 1px 1px 上下 左右-->
<!--margin 1px 1px 1px 上 左右 下-->
<!--margin 1px 1px 1px 1px 顺时针 上 右 下 左-->
<!--auto 让左右外边距相等-->

<!-- z-index:9999; 使导航一直在上方-->
<!--position:fixed; 对浏览器窗口定位-->

<!--text-indent: 2em;--> 首行缩进2个字符
<!--margin 为负数的时候会进行相反方向移动--> 

<!--background 通过url放图片-->
<!--no-repeat 不重复-->
<!--background-size:cover;平铺-->

<!--margin-top: 40px; 上外边距-->

<!--border-radius: 10px; 把边角变成不同程度的圆角--> 值越大，角越圆
<!--text-shadow:0 4px 5px rgba(60,72,96,0.5);文字阴影-->后面的四个值代表（上 左右 下 的阴影长度和rgba阴影颜色）
<!--transform:skew(-10deg);允许原宿 旋转rotate(-10deg) 移动translate(10px) 倾斜skew(-10deg) 放大scale(-10deg)-->
设置背景图片的方式 {
<!--background:url(images/img-text3.jpg) no-repeat; 第一步引入不重复的背景图片-->
<!--background-size: cover; 第二步使整个图片平铺在元素上-->
<!--background-attachment: fixed; 使图片固定-->}
<!--overflow: hidden; 溢出部分隐藏-->

<!--让一种字体标识为斜体（oblique）如果没有这种格式，就使用（italic）字体 normal为正常的字体--> 比如 font-style:oblique

<!--text-shadow:0 4px 5px rgba(60,72,92,1.5); 第一个值：水平方向位置（如果值为正向右，负数相反）；第二个值：垂直方向位置
（值为正数向下，负数相反）；第三个值：阴影大小；第四个值：阴影颜色-->

<!--display: inline-block;把选定的标签变成行内块元素(既可以和别人占一行，又可以改变宽高)-->

<!-- margin-left: 70px;元素与元素的距离 -->

<!-- 标准文档流:指元素根据元素或行内元素的特征按从上到下、
      从左到右的方式自然排列这个也是元素默认的排列方式 -->

行内块元素 display
<!-- display: block; 块级元素的默认值,元素会显示为块级元素并具有块级元素的特性 -->
<!-- display: inline; 行内(内联)元素的默认值,元素会显示为行内元素并具有悍内元素的属性 -->
<!-- display: inline-block; 行内块元素,既具有行内元素的特性,又具有块级元素的特性 -->
<!-- display: none; 渲染的元素不显示 -->

浮动(float)
<!-- float: left; 左浮动 -->
<!-- float: right; 右浮动 -->
<!-- float: none; 默认值 元素不浮动 -->
            浮动的盒子可以向左浮动，也可以向右浮动，
            直到它的外边缘碰到包含框或另一个浮动盒子为止。

清除浮动(clear)
<!-- clear: left; 在左侧不允许有浮动元素 -->
<!-- clear: right; 在右侧不允许有浮动元素 -->
<!-- clear: both; 在左右侧不允许有浮动元素 -->
<!-- clear: none; 允许浮动元素出现在左右两侧 -->

父级塌陷
{
 原因:因为整个父级框架是由元素按标准文档流撑起来的
       因为浮动脱离标准文档流造成了父级塌陷
 解决方法:
       1.添加空的div
         简单,但是造成了HTML的代码冗余
       2.给父级元素设置固定的高度
         简单,但是降低了父级元素的扩展性
       3.添加overflow:hidden;
         简单,但是下拉列表场景无法使用
       4.添加父级after伪类

内容溢出处理(overflow)1.0
<!-- overflow: visible; 默认值,内容不会被修剪,溢出内容会呈现在盒子之外 -->
<!-- overflow: hidden; 内容会被修剪,并且内容不可见(隐藏) -->
<!-- overflow: scroll; 内容会被修剪,并且浏览器出现滚动条以便查看其余内容 -->
<!-- overflow: auto; 如果内容会被修剪,则浏览器会出现滚动条以便查看其余内容 -->

内容溢出处理2.0
{content: "";
/*设置一个内容,且内容为空*/
display: block;
/*设置该内容为块元素*/
clear: both;
/*清除左右的浮动*/}
}

display:inline-block(行内块元素) 与 float(浮动) 的区别
    相同点:1.display 和 float 可以使元素并排一行,并且设置宽度和高度
    不同点:1.display 的位置方向不可控,会解析空格且 IE6、7不兼容
           2.float 的排列位置可控,但是需要通过清除浮动解决浮动元素带来的影响

定位(position 定位元素)
<!-- position: station;默认值，没有定位 -->
相对定位{
<!-- position: relative;相对定位
特点：1.设置的定位盒子会相对于原来的位置，
    通过指定偏移(top，bottom，left，right)，
    到达新的位置
      2.定位的盒子仍然在标准文档流中，不会
    对父级与其他盒子产生影响
      3.设置相对定位的盒子原来的位置都会被保存下来 -->}
绝对定位：{
<!-- position: absolute;绝对定位
特点：1.使用了绝对定位的元素会以最近的一个“已经定位”
    的“祖先”元素为基准进行定位
      2.如果没有上述条件达成，会以浏览器窗口为基准进行定位
      3.绝对的元素从标准文档流中脱离，这意味这有、他们对
    其他元素的定位不会产生影响
      4.元素位置发生偏移后，它原先的位置不会被保留下来 -->}
固定定位:{
<!-- position: fixed;固定定位
特点：1.它会一直以浏览器窗口为基准进行偏移
      2.偏移量不会随着滚动条的移动而移动 -->}

<!-- z-index属性：用来调节定位时重叠上下层位置，
                类型为整数，默认值为0，
                z-index的值大的位于值小的上方 -->

css变形(transform)时一些效果的集合{
    <!-- 列如：平移 旋转 缩放 倾斜
    1.平移函数：translate(),基于X，Y，坐标
    重新定位元素的位置
    写法：transform: translate(x,y);
           transform: translateX();
          transform: translateY();

    2.缩放函数：scale()，可以使元素对象的尺寸发生变化
    注意：0~0.999为缩小，1之后为放大
    写法：transform:scale(1.5,1.4); x轴放大1.5倍，y轴放大1.4倍
          transform:scale(1.5); x轴与y轴，放大1.5倍
          transform:scaleX(1.5); x轴放大1.5倍
          transform:scaleY(1.5); y轴放大1.5倍 -->

    3.倾斜函数：skew(),取值是一个度数值(deg)
       写法：transform:skew(20deg,-20deg) x轴偏移20deg，y轴偏移-20deg
             transform:skewX(20deg) x轴偏移20deg
             transform:skewY(-20deg) y轴偏移-20deg

    4.旋转函数：transform:rotate(),取值是一个度数值(deg)
    注意：正数为顺时针旋转，负数为逆时针旋转   

旋转与倾斜的区别：
    rotate()函数只是旋转，不会改变元素的形状
    skew()函数只是倾斜，元素不会旋转，数值会改变元素的形状
}

css过渡(transition)
<!-- transition:width 10s ease-in-out 1s;
指定动画的过渡css属性 过度时间 过度动画 延迟时间
1.transition-property：
  IDENT：指定css属性(width,background……)
  all：指定所有支持该属性的元素，一般都有all
2.transition-duration:
  定义转换动画的时间长度，单位为s
3.transition-timing-function：
  ease：速度由快到慢(默认值)
  linear：速度恒速(匀速运动)
  ease-in：速度越来越快(渐显效果)
  ease-out：速度越来越慢(渐隐效果)
  ease-in-out:速度先加速再减速(渐显渐隐效果)
4.transition-delay：
  指定一个动画开始执行的时间，单位为s
  正数:元素过渡效果不会立即触发,过了设置时间才会触发
  0:默认值,元素过渡效果立即执行
  负数:元素过渡效果会从该时间点开始显示,之前的动作被阶段 -->

动画{
<!-- 
animation动画
由两部分组成
1.类似FLASH动画的关键帧来声明一个动画
@keyframes spread{
    0%{css样式}
    10%{css样式}
    20%{css样式}
    30%{css样式}
    ……
}
二.在animation属性中调用关键帧声明动画
animation:动画名称 动画时间 动画方式 延迟时间 播放次数 播放方向 播放状态 开始和结束发生的操作
1.动画名称(animation-name)
  由@keyframes 创建的动画名称
2.动画时间(animation-duration)
  正数 单位s,ma
3.动画方式(animation-timing-function)
  ease：速度由快到慢(默认值)
  linear：速度恒速(匀速运动)
  ease-in：速度越来越快(渐显效果)
  ease-out：速度越来越慢(渐隐效果)
  ease-in-out:速度先加速再减速(渐显渐隐效果)
4.延迟时间(animation-delay)
  延迟播放动画 正数 单位s,ms
5.动画播放次数(animation-iteration-count)
  值通常为整数，默认值为1
  特殊值infinite,表示动画的无限次播放
6.动画的播放方向(animation-direction)
  normal:动画每次都是循环向前播放
  alternate:动画播放为偶数次向前播放
7.动画的播放状态(animation-play-statee)
  running将暂停的动画重新播放
  paused将正在播放的元素动画停下来
8.动画发生的操作(animation-fill-mode)
  forwards:表示动画在结束后继续应用最后的关键帧位置
  backwards:表示会在向元素应用动画样式时迅速应用动画的初始帧
  both:表示元素动画具有forwards 和 backwards的效果 -->
}

cursor: pointer;/*鼠标变成小手*/