盒子模型  box-sizing :content-box  以前的盒子模型 符合wc3的标准
                border-box 设置这个属性padding  border 不会撑开盒子 css3 新增的特性
             设置盒子阴影  box-shadow：h-shadow水平位置   v-shadow  垂直位置  
                                                           blur  模糊距离          spread阴影尺寸   
                                                            color  阴影颜色        inset  可将外部阴影改为内部阴影     默认的为outset外阴影（不能写）
盒子的浮动  float：left  right  none
清除浮动：（额外标签法） clear:left  clear:right  clear:both  创建一个空盒子  缺点就是多出来了好多无用的标签 （很少用）
                    （overflow） 在其父盒子中添加overflow：hidden/auto/scroll   缺点就是内容多了会被隐藏
                      （after）claerfix：after{display：black    content:"." height：0px  visibility：hidden（隐藏盒子里的内容） clear：both}
                        缺点  ie6，7不能支持  需要 *zoom=1 方法处理
                        双伪元素清除浮动 类名：before，类名after{content：“” display：table}  类名：after{clear：both} 类名称{*zoom：1；}
链接样式：link: 设置为访问的链接的样式          visited：设置已经访问过链接的样式
                 hover：设置鼠标经过链接的样式            active：设置鼠标点击时的样式
定位属性：主要是用来对想要的盒子移动到我们想要的目标位置
          边偏移：直接给一个方向词  top：100px；
           定位模式： position：属性值；  static  自动定位     relative  相对定位   
                                                            absolute 绝对定位   fixed   固定定位
边偏移 + 定位模式 才可以定位一个盒子
static自动定位：网页中所有的盒子都算是自动定位  写于不写都一样的  不适合于边偏移  （一般用于清除定位的）
relative：相对于自己的位置进行移动    移动之后原来的位置继续被占有  相对定位不脱标的
absolute绝对定位： 绝对位置是完全脱标的 不占有位置
绝对定位：在一个盒子中  如果父级盒子没有设置定位 给子盒子设置定位  那么子盒子会以浏览器的左上角为基准点对其
解决办法：给父级盒子加上定位   可以用绝对定位  或者相对定位
子绝父相：只要是孩子是绝对定位  父亲只要是定位就可以了
固定定位：特殊的绝对定位  有很多的绝对定位的属性  固定为和父级元素没有关系  总是以浏览器为准
                  固定定位完全脱标 不占有位置  不会随着浏览器的滚动而滚动                 
                 注意：固定定位的盒子一定要写宽和高除非有内容撑开
盒子叠加问题解决办法： z-index:1  （第一个盒子设置为z-index：1;  第二个盒子为z-index：2 ; 这个这时候 第二个盒子会在第一个盒子上面）
                                      取值范围为： 负数   0    正数   默认为0   取值越大  盒子就越在上面
                                        只有绝对定位  固定定位 相对定位才有该属性
四种定位的总结：
静态定位：  不脱标，正常模式              不能使用边偏移           移动位置基准为正常模式
相对定位：  不脱标，占有位置              可以使用边边偏移       相对自身位置移动
绝对定位：  完全脱标，不占有位置       可以使用边偏移           相对于定位的父级移动位置
固定定位：  完全脱标，不占有位置       可以使用边偏移           相对于浏览器移动位置
如果给一个盒子添加浮动或者绝对定位，固定定位  盒子会自动的转化为行内快模式
显示与隐藏：
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" />
网页优化的三大标签：
1网页标题  title
2网站说明  description <meta     name="description"    content=""/>
3网站关键字  keywords  <meta    name="keywords"     content=""/>

盒子模型  box-sizing :content-box  以前的盒子模型 符合wc3的标准
                border-box 设置这个属性padding  border 不会撑开盒子 css3 新增的特性
             设置盒子阴影  box-shadow：h-shadow水平位置   v-shadow  垂直位置  
                                                           blur  模糊距离          spread阴影尺寸   
                                                            color  阴影颜色        inset  可将外部阴影改为内部阴影     默认的为outset外阴影（不能写）
盒子的浮动  float：left  right  none
清除浮动：（额外标签法） clear:left  clear:right  clear:both  创建一个空盒子  缺点就是多出来了好多无用的标签 （很少用）
                    （overflow） 在其父盒子中添加overflow：hidden/auto/scroll   缺点就是内容多了会被隐藏
                      （after）claerfix：after{display：black    content:"." height：0px  visibility：hidden（隐藏盒子里的内容） clear：both}
                        缺点  ie6，7不能支持  需要 *zoom=1 方法处理
                        双伪元素清除浮动 类名：before，类名after{content：“” display：table}  类名：after{clear：both} 类名称{*zoom：1；}
链接样式：link: 设置为访问的链接的样式          visited：设置已经访问过链接的样式
                 hover：设置鼠标经过链接的样式            active：设置鼠标点击时的样式
定位属性：主要是用来对想要的盒子移动到我们想要的目标位置
          边偏移：直接给一个方向词  top：100px；
           定位模式： position：属性值；  static  自动定位     relative  相对定位   
                                                            absolute 绝对定位   fixed   固定定位
边偏移 + 定位模式 才可以定位一个盒子
static自动定位：网页中所有的盒子都算是自动定位  写于不写都一样的  不适合于边偏移  （一般用于清除定位的）
relative：相对于自己的位置进行移动    移动之后原来的位置继续被占有  相对定位不脱标的
absolute绝对定位： 绝对位置是完全脱标的 不占有位置
绝对定位：在一个盒子中  如果父级盒子没有设置定位 给子盒子设置定位  那么子盒子会以浏览器的左上角为基准点对其
解决办法：给父级盒子加上定位   可以用绝对定位  或者相对定位
子绝父相：只要是孩子是绝对定位  父亲只要是定位就可以了
固定定位：特殊的绝对定位  有很多的绝对定位的属性  固定为和父级元素没有关系  总是以浏览器为准
                  固定定位完全脱标 不占有位置  不会随着浏览器的滚动而滚动                 
                 注意：固定定位的盒子一定要写宽和高除非有内容撑开
盒子叠加问题解决办法： z-index:1  （第一个盒子设置为z-index：1;  第二个盒子为z-index：2 ; 这个这时候 第二个盒子会在第一个盒子上面）
                                      取值范围为： 负数   0    正数   默认为0   取值越大  盒子就越在上面
                                        只有绝对定位  固定定位 相对定位才有该属性
四种定位的总结：
静态定位：  不脱标，正常模式              不能使用边偏移           移动位置基准为正常模式
相对定位：  不脱标，占有位置              可以使用边边偏移       相对自身位置移动
绝对定位：  完全脱标，不占有位置       可以使用边偏移           相对于定位的父级移动位置
固定定位：  完全脱标，不占有位置       可以使用边偏移           相对于浏览器移动位置
如果给一个盒子添加浮动或者绝对定位，固定定位  盒子会自动的转化为行内快模式
显示与隐藏：
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" />
网页优化的三大标签：
1网页标题  title
2网站说明  description <meta     name="description"    content=""/>
3网站关键字  keywords  <meta    name="keywords"     content=""/>