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）都是继承来的属性，选择的标签一样近，再去数权重

四.盒模型

   属性：
      width:内容的宽度
      height:内容的高度
      padding:内边距 内容到边框的距离
      border:边框
      margin:外边距  另一个边到另一个边的距离

   盒模型的计算：
      总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
      前提是：在标准文档流
            padding：父子之间调整位置
            margin: 兄弟之间调整位置