层叠机制

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

比较优先级

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

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

每一个声明都有一个特殊性（适用范围越大，特殊性越低）行内样式>ID选择器>类选择器>元素选择器>通配符选择器在比较中会生成4个数a、b、c、d，比较a大小，当a相同时再比较b，依次类推......a：若声明是行内样式，则为1，否则为0b：规则中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层叠机制的比较、盒模型、继承规则

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