标签：...   重要   code   over   border   展示   不同   通配符选择器   冲突   

层叠机制

不同样式应用在同一标签时，会产生声明块冲突，这时就会自动触发层叠机制
1、比较优先权（平级时进行下一项比较）
2、比较特殊性（平级时进行下一项比较）
3、比较源层次

比较优先级

来源优先顺序：1.用户样式表 2.作者样式表 3.浏览器样式表
若属性值后跟上  ！important  ，则表示一条重要声明。否则为普通元素
例：color:red !impertant;  重要声明

比较特殊性（特指值、特指度）

每一个声明都有一个特殊性（适用范围越大，特殊性越低）
行内样式>ID选择器>类选择器>元素选择器>通配符选择器
在比较中会生成4个数a、b、c、d，
比较a大小，当a相同时再比较b，依次类推......
a：若声明是行内样式，则为1，否则为0
b：规则中ID选择器的个数
c：规则中类选择器，伪类选择器和属性选择器
d：规则中元素选择器，伪元素选择器的个数

注：通配符选择器特殊性为0
注：当计算选择器分组的时候，要分开计算（并集选择器）

比较源次序

最后出现的声明胜出，其他的全部淘汰

CSS Reset代码前置，（reset.css）
用link引用放在css样式链接前。

继承（inherit）

是指子元素会自动拥有父元素的某些css属性
可被继承属性：
      color、font-size、font-weight、text-align
      文本类的样式基本都可以继承
不可被继承属性：
      background-color
实现继承的两个条件
      1、该属性是可继承的属性
      2、该属性在样式表中没有声明
注：强制继承，也叫作显示继承，是指将css属性值设置为inherit（例：color：inherit；）

盒模型

每个元素都会在页面中生成一个矩形区域
单个盒子的组成
1、margin 外边距  与其他盒子之间的距离
       外边距是盒模型可见部分之外的透明空间，让我们可以控制页面中元素之间的距离，
   帮助将元素定位到页面上一个特定位置上或者给元素提供呼吸的空间，让它与其他元素
   保持一个安全距离。
2、border  边框
       默认3px  因为双实线样式
3、padding  内边距  边框与内容之间的可选距离
       内边距应用在内容区周围，如果给元素添加背景，他会应用到由内容和内边距组成的
   区域。因此内边距经常被用于在内容周围创建一个隔离带，这样内容就会与背景混在一起。
4、content   在代码中设置的宽和高的区域 ，为内容的显示区域 

属性

overflow 超出部分内容展示方式
    值：
       hidden  表示超出内容隐藏
       auto    表示那个方向内容超出，那个方向出现滚动条
       scroll  不管那个方向溢出，两个滚动条都显示，但只有超出方向上的滚动条可用

css层叠机制的比较、盒模型、继承规则

标签：...   重要   code   over   border   展示   不同   通配符选择器   冲突   

原文地址：https://www.cnblogs.com/qdxiaochong/p/9222260.html