详解CSS中优先级和Stacking Context等高级特性，带你更深入理解C

发布时间：09/01 来源：未知浏览：关键词：

平常我们在学习CSS的时候，感受语法很容易把握，实际利用中却碰到林林总总难以弥补的“坑”，为幸免大家受到一样的困惑与不解，本文具体讲解了CSS中优先级和Stacking Context等高级特性。让你更深入理解CSS。

CSS 优先级

优先级是阅读器是通过推断哪些属性值与元素最相关以决议并利用到该元素上的。优先级仅由选中器组成的匹配规则决议的。假如给一个P标签增添一个类（Class）,运转后Class 中的部分属性并未发生改动，及CSS选中器存在优先级问题。

选中符优先级

常见的选中器品种：

内联样式（Inline Style）,如<span style="color:black">...</span>；
ID选中符（ID selectors），如#id；
Class选中符（Class），如 .class {...}、[href=‘’]、:hover；
标签选中符（Tag）,如 p,:before

每一类选中器的权值不雷同，各选中器的优先级是由权值决议的，

内联样式：1,0,0,0
ID 选中符：1,0,0
Class 选中符：1,0
Tag选中符：1

来源优先级次序，如图所示

样式系统从最右侧的选中符开端向左停止匹配规则。只要当前选中符的左边还有其他选中符，样式系统就会连续向左移动，直到寻到和规则匹配的元素，或者由于不匹配而退出。

CSS 优先级规则：

选中器都有一个权值，权值越大越优先；
当权值相等时，后显现的样式表设定要优于先显现的样式表设定；
创作者的规则高于阅读者：即网页编写者设定的CSS 样式的优先权高于阅读器所设定的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在统一组属性设定中标有“!important”规则的优先级最大；

CSS常用模型

盒子模型(Box Model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒子模型相关CSS属性元素内容（element content）、宽度及高度（Width/Height)、内边距（padding）、边框（border）和外边距（margin）。

在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增添内边距、边框和外边距不会影响内容区域的尺寸，但是会增添元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。假如但愿这个元素框到达 100 个像素，就需要将内容的宽度设定为 70 像素。需要的属性如下：

根本属性

Width/Height
Padding
Margin
Boder
Outline
偏移量属性
- Top/Left/Bottom/Right
和.NET WinForm的不同:
- 默许状况下Width/Height不包括Padding
- Margin/Padding属性的四个值的次序是top right bottom left (顺时针)

所有东西可视为盒子模型

纵向Margin合并

假如<p>的纵向margin是12px，那么两个<p>之间纵向的间隔是多少？按常理来说应当是 12 + 12= 24px，但是答案依然是 12px。由于纵向的margin是会重叠的，大的会覆盖下的。

Position属性规定元素的定位类型。这个属性定义创立元素规划所用的定位机制。任何元素都可以定位，不外绝对或牢固元素会生成一个块级框，而不管该元素本身是啥类型。相对定位元素会相关于它在正常流中的默许位置偏移。以下是Posistion属性取值范畴如下：

Static 一般流规划（Normal flow），默许值。没有定位，元素显现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
Relative 支撑偏移量属性的一般流规划，生成相对定位的元素，相关于其正常位置停止定位。因此，"left:20" 会向元素的 LEFT 位置增加 20 像素。
Absolute 在容器元素内绝对定位的规划，生成绝对定位的元素，相关于 static 定位之外的第一个父元素停止定位。元素的位置通过 "left", "top", "right" 乃至 "bottom" 属性停止规定。
Fixed 在显示范畴内的绝对定位规划，生成绝对定位的元素，相关于阅读器窗口停止定位。元素的位置通过 "left", "top", "right" 乃至 "bottom" 属性停止规定。