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: 兄弟之间调整位置