深入CSS，让网页开发少点“坑”

2019独角兽企业重金招聘Python工程师标准>>>

通常我们在学习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）,如 div,: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" 属性进行规定。