CSS声明冲突、重叠、继承、视觉格式化模型

声明冲突

属性相同值不同，这就是声明冲突

层叠

层叠是一种机制，用于解决CSS声明冲突

层叠的过程

• 比较优先级

每个声明都有一个优先级，当声明发生冲突，优先级高的会被保留，反之淘汰。一个声明的优先级与它的来源和重要性有关

若属性值后跟上！important表示是一条重要声明，反之表示普通声明

优先级从高到低：

1.浏览器默认样式表中的声明

2.用户样式表中的普通声明

3作者样式表中的普通声明

4.作者样式表中的重要声明

5.用户样式表中的重要声明

• 比较特殊性

在比较特殊性时，每一个冲突的声明会生成4个数字分组（a，b，c，d），以比较特殊性a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，以此类推

嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
class、属性、伪类	0	0	1	0
元素、伪元素	0	0	0	1
通配符	0	0	0	0
！important	最高	最高	最高	最高

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

行内样式>ID选择器>类选择器>元素选择器>通配符选择器

！important>style>id>class>element>*

​ 特殊性从高到低

• 比较源次序

继承

强制继承，也叫做显式继承，属性值加inherit

视觉格式化模型

包含块

• 每个元素都有一个包含块，它是一个区域，即元素在页面中摆放的区域

• 通常情况下元素的包含块是它的父元素的内容盒content-box

初始化包含块

包含块：初始化包含块（initial containing block）

初始化包含块是浏览器在渲染前自动生成的一块区域

你可以想象成整个网页区域都是初始化包含块，根元素就是摆放在里面的

定位体系概述

视觉格式化模型规定了三种定位体系

常规流（normal）

margin能取负数，padding不能取负数

常规流，又叫普通流、文档流、普通文档流

常规流是最常见的定位体系，所有元素默认状态下都是常规流定位

垂直方向上若两个外边距相邻，则折叠

垂直方向：水平方向上不会重叠

外边距相邻：两个外边距之间没有border、padding和content

合并：均为正数取最大，均为负数取最小，一正一负则相加

overflow：hidden BFC 让盒子里面的东西不要影响外头的布局 溢出隐藏

overflow：visible 默认值 溢出可见

overflow：scroll 溢出滚动

浮动（float）

当元素的float属性值为left或right时为浮动元素

特点：

• 左浮动的盒子向上向左排列

• 右浮动的盒子向上向右排列

• 浮动盒子的顶边不得高于上一个盒子的顶边

• 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

当常规流遇上浮动

• 常规流盒子和浮动盒子混合摆放

• 浮动盒子在摆放时要避开常规流盒子

  父元素：：after{ 
  content：“”；
  display：block；
  clear：both；
  }

• 常规流盒子在摆放时无视浮动盒子

清除浮动

第一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方

clear：不可继承，默认值 找回父元素的高，clear写给父元素的最后一个 常规流 子元素

取值：none 不清除浮动

left 清除左浮动，元素在左浮动的盒子下方摆放

right 清除右浮动，元素在右浮动的盒子下方摆放

在没有最后一个子元素可以通过这个办法清除浮动

定位

任何一个元素都必须属于其中某一种定位体系。不同的定位体系中，元素在包含块中的尺寸和位置都会有一些差异

绝对定位（absolute positioned）

脱离文档流 不再占据空间

相对于设置了定位属性的父元素偏移，若果没有设置定位属性，则相对于html偏移

.box1{
    width: 200px;
    height: 200px;
    position: absolute;
}

静态定位

不脱离文档流

.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-top: 20px;
    position: static;
}

相对定位

相对于自己原本的位置偏移 元素原本所占空间不变，不脱离文档流

.box1{position: relative;
    top: 50px;
    left: 50px;
}

更改堆叠顺序 z-index 默认值为0

.box1{
    position: absolute;
    z-index: 2;
}

固定定位

相对于浏览器窗口

.box1{
    width: 800px;
    height: 800px;
 background-color: aqua;
 position: fixed;
}

粘性定位

.box1{
    width: 800px;
    height: 800px;
 background-color: aqua;
 position: sticky;
}