CSS基本功：盒模型、选择器优先级

盒模型

盒子模型就是容器在页面上所占的空间大小。
CSS盒子模型分为标准的W3C盒子模型和低版本的IE盒子模型
盒子模型由4个属性组成：外边距（margin）、边框（border）、内边距（padding）和内容（content）。
比方来说，你在网上买了一个杯子，快递小哥给你送过来的时候肯定是放在一个盒子里包装好了的。这个杯子就相当于内容(content),为了防止杯子在运输的时候不小心打碎，包装快递的时候肯定会在杯子周围放一些泡沫或者报纸，那么这些就是内边距（padding），这个快递的包装盒子的厚度就是边框（border），那么margin呢？margin就是你这个快递和别人快递在摆放的时候的距离。
下面来看一下标准的盒子模型和低版本的IE盒子模型的区别：
标准盒子模型：

盒子占据页面的宽度是：margin-left+border-left+padding-left+content（width）+padding-right+border-right+margin-right;
也就是content+2*padding+2*border+2*margin。
盒子的实际宽度是：content+2*padding+2*border
width就是content的宽度不包含其他内容。

低版本IE（IE5/6）盒子模型

看出区别了吗？IE的盒子模型content的width是包括了padding和border。
那么IE盒子模型占据页面的宽度大小是2*margin+width
盒子的实际宽度就是content。
width是content+border+padding。

举个实际例子：
一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。
标准盒子模型下：
盒子占据页面的宽度：2*20+2*1+2*10+200=262px;
盒子占据页面的高度：2*20+2*1+2*10+50=112px;
盒子的实际宽度：2*1+2*10+200=222px;
盒子的实际高度：2*1+2*10+50=72px;
低版本IE盒子模型下：
盒子占据页面的宽度：2*20+200=240px;
盒子占据页面的高度：2*20+50=90px;
盒子的实际宽度：200px；
盒子的实际高度：50px；

总结：标准盒子模型的宽度就是width=content；
IE盒子模型的宽度width=content+padding+border；

选择器优先级

内联>嵌入样式表>外部样式表
不同选择符的优先级：
!important最高
style属性：优先级：1000；
ID选择符：优先级积分：100分
类选择符、属性选择符：优先级：10分
标签选择符、伪类及伪对象：优先级 1分
其他选择符、如通配符选择符等，优先级分为0；
根据以上积分，统计CSS样式表中出现的每个选择符个数，在相加。最终得出的积分数就是某个选择符的优先级别.

看以下例子：

  <div id="container">        <p class="color" id="colorful">ABC</p>    </div>    //css样式表如下：    #container .color{            color:red;        }        #container #colorful{            color: blue;        }

ABC应该是显示什么颜色？ #container .color的积分是100+10，#container #colorful的积分是100+100；那么应该显示blue蓝色。

 #container .color{            color:red;        }       p.color{            color:blue !important;        }

第一个的积分是110，第二个是11，按理说应该显示红色，但是这里加了！important。所以这里还是显示蓝色。

以上便是总结的盒模型和选择器的优先级，希望对大家有所帮助。