1.css如何工作

是一种用于向用户指定文档如何呈现的语言——文档如何被指定样式、布局等

1.1css实际上如何工作?

浏览器显示文档时，必须将文档内容与其样式信息结合。分两个阶段处理文档。
1.浏览器将HTML和CSS转化成DOM（文档对象模型）。DOM在计算机内存中表示文档。他把文档内容和样式结合在一起。
2.浏览器显示渲染DOM的内容。

浏览器显示文档流程

1.2关于DOM

DOM是一种树形结构。标记语言中的每个元素，属性，文本片段都变成一个DO节点。这些节点由它们与其DOM节点的关系来定义。有的元素是某些子节点的父节点，这些子节点有兄弟节点。

1.2.1表示DOM

DOM和CSS如何一同工作
例子如下


  Let's use:
  Cascading
  Style
  Sheets

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

浏览器解释HTML片段的过程，渲染DOM树，之后在浏览器中这样输出它。

1.2.2 应用CSS到DOM

浏览器回解析HTML并通过它创建DOM，之后解析css。

2.层叠和继承

元素的最终样式可以在多个地方定义，它们以复杂的形式相互影响，这些复杂的相互作用使css变得非常强大，但也使其非常难于调试和理解。

2.1层叠

css是Cascading Style Sheet的缩写，这暗示层叠（cascade）的概念很重要。在最基本的层面上，它表明css规则顺序很重要，但它比那更复杂。什么选择器在叠层中胜出取决于三个因素（按重量级顺序来排列的——前面的一种会否觉后一种）

重要性（importance）
专用性（specificity）
源代码次序（source order）

2.1.1 重要性

在css中，有一个特别的语法可以让一条规则总是优于其他规则：!important。知道 !important存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。但是！我们建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种情况是，当您在CMS中工作时，您不能编辑核心的CSS模块，并且您确实想要重写一种不能以其他方式覆盖的样式。但是，如果你能避免的话，不要使用它。由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。

相互冲突的声明按以下顺序适用，后一种将覆盖先前的声明：

在用户代理样式表的声明（浏览器在没有其他声明的默认样式）
作者样式表中的普通声明（由用户设置的自定义样式）
作者样式中的普通声明（这是我们设置的样式，WEB开发人员）。
作者样式表中的重要声明
用户样式表中的重要声明

2.1.2专用性

专用性基本上是权衡选择器程度的一种方法——这种它能匹配多少元素。元素选择器具有很低的专用性，类选择器具有更高的专用性，所以将战胜元素选择器。ID选择器甚至有用性，将战胜类选择器。战胜ID选择器的唯一方法是使用!important。
注意：如果多个选择器具有相同的重要性和专用性，则选择哪一个选择器取决于Source order.

2.1.3源代码次序

如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则。

p {
  color: blue;
}

/* This rule will win over the first one */
p {
  color: red;
}

这个例子中第一个规则将获胜，因为专用性高于源代码顺序：

/* This rule will win */
.footnote {
  color: blue;
}

p {
  color: red;
}

2.1.4 关于规则混合的一点注记

当多个css规则匹配相同的元素时，它们都被应用到该元素中，只有在这之后，任何相互冲突属性才会被评估，以确定哪种风格会战胜其他类型。

2.2 继承

css继承是用于获取所有信息并了解什么样式用于元素，思想是，应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。

例如，对font-family和color进行继承是有意义的，因为这样可以很容易的设定一个站点范围内的基本字体，方法是应用一个字体到；然后可以在需要的地方覆盖单个元素的字体，如果要在每个元素上分别设置字体就太麻烦了。
例如，margin,padding,border,background-image不被继承是有意义的。如果在容器上设置这些属性并让它们由每个子元素继承，那么样式/布局会发生混乱！
哪些属性默认被继承哪些不被继承大部分符合常识。

2.2.1控制继承

css为处理继承控制了四种特殊的通用属性：

inherit：该值将应用到选定元素的属性值设置为与其父元素一样。
initial：该值将应用到选定元素的属性值设置为于浏览器默认样式表中该元素设置的**initial值**一样。如果浏览器默认样式中没有设置值，并且该属性可自然继承，那么该属性值就被设置为inherit。
unset：该值将属性重置为其自然值，既如果属性是自然继承的，那么它就表现得像inherit，否则就表现得像initial
revert：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否着属性值被设置成用户代理的默认样式。
inherit值——可以显式地让一个元素从其父类继承一个属性值。
例子


  Default link color
  Inherit the link color
  Reset the link color
  Unset the link color

css

body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}

3.框模型

css框模型（盒模型）是网页布局布局的基础——每个元素被比表示为一个矩形的方框，框的内容，内边距，边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会计算出每个框地内容要用什么样式。周围地洋葱有多大，以及框相对于其它框放在哪里。

盒模型

注意外边距（ margin）有一个特别地行为被称作外边距塌陷（margin collapsing）: 当两个框彼此接触时，它们地间距将取决于相邻外边界的最大值，而非两者的总和。

3.1一些想法和提示

在默认情况下，content的width被设置为可用空间的100%（在margin，border，padding占据了它们的空间后剩下的空间的宽度）——如果更改了浏览器窗口的宽度，那么这些框将会变大或变小，（content改变）。如果设置新的宽高px，宽度不再随着浏览器窗口的大小而改变。
外边距可以接受负数，这样可以用来引起元素框的重叠。
- 默认情况下[background-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color "CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.")/background-image 延伸到了border的外边缘。该行为可以使用将在Background_clip 章中学到的background-clip 属性来改变。
- 如果content框变得比示例输出窗口大，它将从窗口溢出，此时会出现滚动条，你可以滚动窗口来查看盒子剩余的内容。你可以使用overflow属性来控制溢出——参看下边的 Overflow 章节。
框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。
border也忽略百分比宽度设置。
你应该注意的是框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整框模型。使用值border-box，它将框模型更改成这个新的模型：

新的模型 `box-sizing: border-box`

3.2 高级的框操作

在设置框的width, height, border, padding 及margin之外，还有一些其他的属性可以改变它们的行为。

3.2.1 溢流

当使用绝对的值设置了一个框的大小（固定px的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢出。使用overflow属性来控制这种情况的发生。最常用得属性值

auto:当内容过多，溢出的内容被隐藏，然后出现滚动条来让我们查看所有的内容。
hidden：当内容过多，溢流的内容被隐藏。
visible：当内容过多，溢流的内容被显示在盒子的外面（这个是默认的行行为）
例子

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

3.2.2背景剪裁（background clip）

框的背景是由颜色和图片组成的，它们堆叠在一起（background-color background-image）它们被应用到一个盒子里，然后被画在盒子的下面。默认情况下，背景延伸到了边界的外沿。
但在一些情况下比较讨厌（假设有一个平铺的背景图，只想要它延伸到内容的边沿会怎么做），该行为可以通过设置盒子的background-clip属性来调整。
例子

css

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

3.3css框类型

之前所有对于框的应用都是表示的是块级元素，然而，css还有一些表现不同的其他框内型。我们可以通过display属性来设定元素的框类型，最常见的三个类型block,inline,inline-block

块框（block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于block box。
行内框（inline box）与块框是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置margin padding border都会更新周围文字的位置，但是对于周围的块框（block box）不会有影响。
行内块状框（inline-block box）像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）

css 学习笔记1