css3简述

1. 介绍
   层叠样式表
   结构 前凸后翘 html
   装饰 化妆 css
   内涵 谈吐 js

2. 语法

   1. 在html中如何引入css

      1. 将css规则直接填写在style属性中
      2. 将样式嵌入到style标签
      3. 将样式写在.css文件中，再通过link将这个文件引入到html中

   2. 语法组成
      选择器 {
      属性:值;
      属性:值;
      }

      ul {
      margin:0;
      padding:0;
      list-style:none;
      }

3. 选择器

   1. 核心选择器
      标签选择器
      div {}
      ul {}
      dl {}
      类选择器
      .nav {}
      id选择器
      #id {}
      组合选择器
      body , ul {}
      并且选择器
      ul.nav {}
      普遍选择器
      *

   2. 层次选择器
      父子选择器
      父 > 子
      .nav > li { }
      #wrapper > * {}
      .right_nav > li {}
      后代选择器
      父 后
      .right_nav li {}
      下一个兄弟选择器
      selector + selector
      之后所有兄弟选择器
      selector ~ selector

   3. 伪类选择器【过滤器】
      :first-child
      :last-child
      :nth-child(参数)
      参数：数字,表达式(2n ,2n+1),关键字(odd、even)

   4. 伪元素选择器【过滤器】
      ::after
      ul.nav::after {
      display:“block”
      }

   5. 属性选择器【过滤器】
      [name] 选择具有name属性的元素
      [name=username] 选择具有name属性,并且属性值为username的元素
      [name^=u] 选择具有name属性,并且属性值以u开头的的元素
      [name$=u] 选择具有name属性,并且属性值以u结尾的的元素
      [name*=u] 选择具有name属性,并且属性值包含u的的元素

4. 优先级
   特权
   !important
   权值
   1000 style属性
   100 #id
   10 .class 、伪类
   1 元素
   顺序

5. 盒子模型
   针对于块元素讨论盒子模型

   1. 基本概念
      外边距 margin
      margin-top
      margin-right
      margin-bottom
      margin-left
      margin
      边框 border
      border-top
      border-top-color
      border-top-style
      solid
      dotted
      dashed
      double
      border-top-width
      border-right
      border-right-color
      border-right-style
      border-right-width
      border-bottom
      border-bottom-color
      border-bottom-style
      border-bottom-width
      border-left
      border-left-color
      border-left-style
      border-left-width
      border
      border:1px solid #ccc;
      是border-top，border-right，boder-bottom，border-left的速写形式
      内边距 padding
      padding-top
      padding-right
      padding-bottom
      padding-left
      padding 速写
      5px
      0 5px 上下0,左右5px
      0 5px 10px 上0 左右5px 下10px
      0 5px 10px 20px 上右下左
      宽 width
      高 height
   2. 盒子模型
      1. 怪异盒模型（IE8-）jquery - 银行
         box-sizing:border-box;
         盒子所占的宽度 = width （包含了border + padding + 内容实际宽）
      2. 传统盒子（firefox）
         box-sizing:content-box;
         盒子所占的宽度 = border + padding + width

6. 浮动布局
   层次关系
   1. float:left/right
      1. 块元素脱离默认文档流
         1. 默认宽度为0
         2. 失去了对父元素支撑的能力 【伪元素】
      2. 在浮动流中，多个同级别浮动元素在一行中显示，当这一行容纳不下，会自动换行
   2. 清理浮动
      为容器内部添加一个子元素，一般使用伪元素较方便
      ul.list::after {
      content:"";
      display:block;
      clear:both;
      }
   3. 盒子居中
      margin:0 auto;
   4. 案例
      四列布局
      7个子元素布局