css 选择器；盒模型

一.引入方式：
（1）CSS 层叠样式表    
      作用：修饰网页结构
      
      
（2）css的三种引入方式
      - 行内样式
         注意：行内样式的优先级是最高的
      - 内接样式
      - 外接样式
  
二.css选择器

基础选择器
- * 通配符选择器
  - 匹配所有的标签，通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
  - *{padding：0； margin：0 ；} 重置样式
- #wrap id选择器
  - 匹配以唯一标识符id属性等于wrap的对象作为选择符，唯一的只有一个
- div 标签选择器匹配di标签的选择器
- . 类名类选择器
  - 以class属性包含myclass的E对象作为选择符不同于ID选择符的唯一性，类选择符可以同时定义多个
高级选择器
- ul a 后代选择器
  - 选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
    div ul li p{
    color: red;
    }
- 子代选择器；只能是亲儿子
  div>p{
  }
- 组合选择器；多个选择器组合到一起共同设置样式
  div,p,a,li,span{
  font-size: 14px;
  }
- 交集选择器
  div.active{
  }
- 属性选择器
  input[type='text']
- li+a 相邻选择器选择紧贴在li元素之后a元素
- li a 兄弟选择器选择li元素后面的所有兄弟元素a
伪类选择器
- a:link 设置超链接a在未被访问前的样式
- a:visited 设置超链接a在其链接地址已被访问过时的样式
- a:hover 设置元素在其鼠标悬停时的样式
- a:active 设置元素在被用户激活（摁住的时候）时的样式
- E:focus 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式
伪元素选择器
- E:before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
  p:before 在...的前面添加内容一定要结合content
- E:after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
  p:after 在...的后面添加内容与后面的布局有很大关系
属性选择器
- E[att] 选择具有att属性的E元素
- E[att="val"] 选择具有att属性且属性值等于val的E元素
- E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素
- E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素
- E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元

三.css的继承性和层叠性（坑）

   继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的
   a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
   
   层叠性： 覆盖
   
      （1）行内> id > class > 标签 ****
   
         1000 > 100 > 10 > 1
  
      （2）数数 数 id  class 标签
      （3）先选中标签，权重一样，以后设置为主
      （3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
      （4）如果都是继承来的属性，保证就近原则
      （5）都是继承来的属性，选择的标签一样近，再去数权重

四.盒模型

   属性：
      内容的宽度
      height:内容的高度
      padding:内边距 内容到边框的距离
      border:边框
      margin:外边距  另一个边到另一个边的距离
      
   盒模型的计算：
      总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
      前提是：在标准文档流
            padding：父子之间调整位置
            margin: 兄弟之间调整位置