一、css的特殊性-优先级

　　csss的选择是有优先级的，

　　a)、同类型，同级别的样式后者先于前者

　　b)、ID > 类样式 > 标签 > *

　　c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式

　　d)、具体 > 泛化的，特殊性即css优先级

　　e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

　　内嵌样式：内嵌在元素中，<span style="color:red">span</span>

　　内部样式表：在页面中的样式，写在<style></style>中的样式

　　外联样式表：单独存在一个css文件中，通过link引入或import导入的样式

　　f)、!important 权重最高，比 inline style 还要高

二、计算优先级

　　important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

　　权重、特殊性计算法：CSS样式选择器分为4个等级，a、b、c、d

　　1.如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0 

　　2.b为ID选择器的总数 0,1,0,0 

　　3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0

　　4.d为标签、伪元素选择器的数量 0,0,0,1

　　5.!important 权重最高，比 inline style 还要高

例子：

            
                                     
     
            
      
       div1            
      
            
      
       div2            
      
        
     
    

 

结果：结果可知 0110 比 0102 ，110比102大，所以它的优先级在在第二个定义的样式里为蓝色。

三、刻度

　　在CSS中刻度是用于设置元素尺寸的单位。特殊值0可以省略单位。例如：margin:0px可以写成margin:0 

　　一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。 

　　长度单位包括包括：相对单位和绝对单位。

　　相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin 

　　绝对长度单位包括有： cm, mm, q, in, pt, pc, px

　　相对单位：

　　　　em长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

　　　　例子1：

            
                                     
     
            
      
                       Hello em            
      
        
     
    

　　　　结果：结果中的div2高度为80px，它是根据自身的父元素div1的font-size的高度设置的，div1没有设置字体大小，会跟寻到上一个父标签，

　　　　　　　　如果上一个父标签也是没有设置大小，会直到跟元素，跟元素的默认字体大小为16px，16乘以5 = 80

　　

　　　　例子2：

            
                                     
     
            
      
                       Hello em            
      
        
     
    

 

　　　　结果：看下图可知它的高度为100px 父元素的字体大小为20px， 20乘以5等于100

　　　　

　　　　rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数,只相对于根元素的大小 (根元素字体大小默认为16px)

　　　　例子：

            
                                     
     
            
      
                       Hello em            
      
        
     
    

　　结果：看下图可以知道rem是根据根元素的字体大小的。我们没有设置根元素的字体大小所以为16px。16乘以5等于80

　　　　我们可以设置html标签的字体大小，注意一点的是，一般的浏览器字体大小最小限制为12px

 

　　绝对单位：

　　　　1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

　　计算长度单位：

• • 　　需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 　　任何长度值都可以使用calc()函数进行计算；
  • 　　calc()函数支持 "+", "-", "*", "/" 运算；
  • 　　calc()函数使用标准的数学运算优先级规则； 

　　　　例子：

 　　结果：