四种定位的总结：
静态定位：  不脱标，正常模式              不能使用边偏移           移动位置基准为正常模式
相对定位：  不脱标，占有位置              可以使用边边偏移       相对自身位置移动
绝对定位：  完全脱标，不占有位置       可以使用边偏移           相对于定位的父级移动位置
固定定位：  完全脱标，不占有位置       可以使用边偏移           相对于浏览器移动位置
如果给一个盒子添加浮动或者绝对定位，固定定位  盒子会自动的转化为行内快模式
显示与隐藏：
display： none;  隐藏元素  在页面中看不见了    （下拉菜单）
dispaly：block ；显示隐藏的元素
特点 ：隐藏之后不保留位置
visibility：hidden； 隐藏元素
visibility： visible；显示元素
特点：元素隐藏之后 保留原有的位置
溢出隐藏：overflow:  visible 默认的  不剪切内容 也不添加滚动条    auto： 超出自动添加滚动条 不超出不显示滚动条
                                   hidden  不显示超过对象尺寸的内容，超出的部分隐藏掉    scroll：不管超出内容与否，总是显示滚动条
鼠标的样式：cursor： default(小白的  系统默认的样式 就是箭头 )     pointer （小手）    move （移动 就是一个四个方向的箭头） text（文本）
                                     progress （鼠标加载中的样式）    help（鼠标会出想一个小的问号）wait（鼠标完全变成加载中的样式）
                                    not-allowed 禁止
                               尽量用hand  因为火狐不支持    pointer   ie6以上的都支持用
轮廓线：有一个突出显示的作用   就是在表单中的光标对准的时候 外面的线 （一般的时候不用）
             outline：线的宽度  线的样式  颜色 ； 1px  solid   red
             outline：0或者none；   取消轮廓线；
防止拖拽文本域：就是textarea设定之后可以进行拖拽的作用
                           resize：none； 防止文本域拖拽   
                        取消拖拽之后 轮廓线就会出现   这时候需要取消轮廓线  outline：none；
文字垂直居中：vertical-align：middle（中线对其）baseline（基线对其）top（顶线对其）bottom（底线对其） ；
                         对块级元素无效的  主要用于行内元素和行内块元素有效（主要是图片和文字默认的是基线对其将其改成中线对齐）
去掉图片的底侧的小缝隙：（在低版本的浏览器中会出现这些问题的 行内块元素会出现这些问题）
      解决方案：1，将图片转换为块级元素   
                       2， vertical-align：middle或者top；
文字溢出：word-break（不支持汉字）：break-all；（允许单词拆开显示） word-break：keep-all（保持单词的完整性 不允许单词拆开显示    连字符除外）
                  white-space（支持汉字）：normal：（正常显示 默认的显示方式）   nowrap（强制在一行内显示   除非文本结束或者遇到br）
                 text-overflow：clip（不显示省略号  而是简单的裁剪）    ellipsis（当文本溢出时省略号显示）
      首先强制让其一行内显示  white-space：nowrap；   overflow：hidden；  text-overflow：ellipsis ；
           将其超出的部分用省略号显示
CSS 精灵技术（sprite）：是一种处理网页背景图像的方式。他将一个页面所涉及到的所有零星背景都集
                                          中到一张大图中去 ，然后将大图应用于网页中。
                                     精灵图制作：1精灵图都是装饰性的背景图片，插入图片的不能往上放
                                                          2 我们可以横向摆放也可以纵向摆放  每个图片之间留有适当的空隙
                                                           3 最低端要留有一片空隙  方便添加其他精灵图                                       
字体图标：上传生成字体（国外服务器）http://icomoon.io          http://www.iconfont.cn  (国内字体库)   
使用字体图标：1.电脑中没有字体 我们需要声明  在style中声明声明格式如下（基本不变  可复制粘贴）
                             font-family:'icomoon';(其中第一行中的icomoon可以改换成其他的名字)
  src:url('fonts/icomoon.eot?7kkyc2');
  src:url('fonts/icomoon.eot?7kkyc2#iefix')   format('embedded-opentype') ,
  url('fonts/icomoon.ttf?7kkc2')  format('truetype'),
                url('fonts/icomoon.woff?7kkyc2')  format('woff'),
  url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg')
  font-weight:normal;
  font-style:normal;
CSS滑动门：使用背景自由的拉伸以适应文本内容
做法  就是在链接a中用span将文字包起来a   不能给宽度给padding撑开盒子
                在span后面的背景图片加上right
过度效果：transition：简写四种格式 要过度的属性  花费的时间 运动曲线 何时开始  
transition-property：规定用来过度的CSS属性名称
transition-duration：定义过度效果花费的时间 默认的为0
transition-timing-function：规定过度的时间线  默认是ease
       linear  匀速    ease  逐渐慢下来  ease-in 加速  ease-out 减速  ease-in-out 先加速后减速
transition-delay：规定过渡效果何时开始   默认是0
伸缩布局： display：flex；给父级盒子添加
                  flex：1； 给子盒子添加分成的份数
               min-width：给盒子添加最小值
flex-direction：column； 竖着排列给子盒子添加  row：从左到右排列    row-reverse：与row相反
                                                         column-reverse：对其方式与column相反    给父盒子添加
标题上的小图标
在网站后面输入 favicon.ico        转换图标的第三方：www.bitbug.net
将小图标放入到根目录中 < link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

四种定位的总结：
静态定位：  不脱标，正常模式              不能使用边偏移           移动位置基准为正常模式
相对定位：  不脱标，占有位置              可以使用边边偏移       相对自身位置移动
绝对定位：  完全脱标，不占有位置       可以使用边偏移           相对于定位的父级移动位置
固定定位：  完全脱标，不占有位置       可以使用边偏移           相对于浏览器移动位置
如果给一个盒子添加浮动或者绝对定位，固定定位  盒子会自动的转化为行内快模式
显示与隐藏：
display： none;  隐藏元素  在页面中看不见了    （下拉菜单）
dispaly：block ；显示隐藏的元素
特点 ：隐藏之后不保留位置
visibility：hidden； 隐藏元素
visibility： visible；显示元素
特点：元素隐藏之后 保留原有的位置
溢出隐藏：overflow:  visible 默认的  不剪切内容 也不添加滚动条    auto： 超出自动添加滚动条 不超出不显示滚动条
                                   hidden  不显示超过对象尺寸的内容，超出的部分隐藏掉    scroll：不管超出内容与否，总是显示滚动条
鼠标的样式：cursor： default(小白的  系统默认的样式 就是箭头 )     pointer （小手）    move （移动 就是一个四个方向的箭头） text（文本）
                                     progress （鼠标加载中的样式）    help（鼠标会出想一个小的问号）wait（鼠标完全变成加载中的样式）
                                    not-allowed 禁止
                               尽量用hand  因为火狐不支持    pointer   ie6以上的都支持用
轮廓线：有一个突出显示的作用   就是在表单中的光标对准的时候 外面的线 （一般的时候不用）
             outline：线的宽度  线的样式  颜色 ； 1px  solid   red
             outline：0或者none；   取消轮廓线；
防止拖拽文本域：就是textarea设定之后可以进行拖拽的作用
                           resize：none； 防止文本域拖拽   
                        取消拖拽之后 轮廓线就会出现   这时候需要取消轮廓线  outline：none；
文字垂直居中：vertical-align：middle（中线对其）baseline（基线对其）top（顶线对其）bottom（底线对其） ；
                         对块级元素无效的  主要用于行内元素和行内块元素有效（主要是图片和文字默认的是基线对其将其改成中线对齐）
去掉图片的底侧的小缝隙：（在低版本的浏览器中会出现这些问题的 行内块元素会出现这些问题）
      解决方案：1，将图片转换为块级元素   
                       2， vertical-align：middle或者top；
文字溢出：word-break（不支持汉字）：break-all；（允许单词拆开显示） word-break：keep-all（保持单词的完整性 不允许单词拆开显示    连字符除外）
                  white-space（支持汉字）：normal：（正常显示 默认的显示方式）   nowrap（强制在一行内显示   除非文本结束或者遇到br）
                 text-overflow：clip（不显示省略号  而是简单的裁剪）    ellipsis（当文本溢出时省略号显示）
      首先强制让其一行内显示  white-space：nowrap；   overflow：hidden；  text-overflow：ellipsis ；
           将其超出的部分用省略号显示
CSS 精灵技术（sprite）：是一种处理网页背景图像的方式。他将一个页面所涉及到的所有零星背景都集
                                          中到一张大图中去 ，然后将大图应用于网页中。
                                     精灵图制作：1精灵图都是装饰性的背景图片，插入图片的不能往上放
                                                          2 我们可以横向摆放也可以纵向摆放  每个图片之间留有适当的空隙
                                                           3 最低端要留有一片空隙  方便添加其他精灵图                                       
字体图标：上传生成字体（国外服务器）http://icomoon.io          http://www.iconfont.cn  (国内字体库)   
使用字体图标：1.电脑中没有字体 我们需要声明  在style中声明声明格式如下（基本不变  可复制粘贴）
                             font-family:'icomoon';(其中第一行中的icomoon可以改换成其他的名字)
  src:url('fonts/icomoon.eot?7kkyc2');
  src:url('fonts/icomoon.eot?7kkyc2#iefix')   format('embedded-opentype') ,
  url('fonts/icomoon.ttf?7kkc2')  format('truetype'),
                url('fonts/icomoon.woff?7kkyc2')  format('woff'),
  url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg')
  font-weight:normal;
  font-style:normal;
CSS滑动门：使用背景自由的拉伸以适应文本内容
做法  就是在链接a中用span将文字包起来a   不能给宽度给padding撑开盒子
                在span后面的背景图片加上right
过度效果：transition：简写四种格式 要过度的属性  花费的时间 运动曲线 何时开始  
transition-property：规定用来过度的CSS属性名称
transition-duration：定义过度效果花费的时间 默认的为0
transition-timing-function：规定过度的时间线  默认是ease
       linear  匀速    ease  逐渐慢下来  ease-in 加速  ease-out 减速  ease-in-out 先加速后减速
transition-delay：规定过渡效果何时开始   默认是0
伸缩布局： display：flex；给父级盒子添加
                  flex：1； 给子盒子添加分成的份数
               min-width：给盒子添加最小值
flex-direction：column； 竖着排列给子盒子添加  row：从左到右排列    row-reverse：与row相反
                                                         column-reverse：对其方式与column相反    给父盒子添加
标题上的小图标
在网站后面输入 favicon.ico        转换图标的第三方：www.bitbug.net
将小图标放入到根目录中 < link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />