这是我参与「第四届青训营」笔记创作活动的第4天。

一、选择器的特异度(Specificity)

继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值

01. 显示继承

初始值：

CSS中，每个属性都有一个初始值

background-color的初始值为transparent
margin-left 的初始值为0

可以使用initial关键字显式重置为初始值

background-color: initial
CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

02. CSS的求值过程

CSS样式计算有四个步骤

确定声明值
层叠冲突
使用继承
使用默认值

选择器的优先级不会因为该类选择器的数量的大小而发生变化，即量变不会发生质变
带有!import的样式优先级非常高，可以打破计算规则

二、布局(Layout)是什么?

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

01. 布局相关技术

001. 浮动

当一个元素浮动后，该元素一定会成为块盒（display为block）;
浮动盒子的排列方式：

none: 默认值，不浮动，为常规流
left: 靠上靠左排列
right: 靠上靠右排列

浮动盒子向左或向右移动，直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止。

盒子尺寸

宽度为auto时，适应内容宽度
高度为auto时，适应内容高度

如果一个父元素，没有设置宽度，那么，该元素的盒子里的内容会把它撑开，内容有多宽，父元素盒子就有多宽，高度也是。

浮动盒子在包含块中排列时，如果常规流盒子在前，浮动盒子会避开常规流块盒

常规流盒子和浮动盒子混排的情况下，常规流盒子如果先排列，那么浮动盒子会避开常规流盒子，在其后排列。

002. 绝对定位

[绝对定位]是元素在移动位置的时候，是相对于它祖先元素来说的
{position:absolute;

元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。
2.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

003. 常规流

行级块级表格布局 FlexBox Grid布局

常规流中的box都会存在于一个格式化上下文（formattig context）中，不同的格式化上下文决定了其内部子元素该如何排列。具体来说，块级元素会参与到块格式化上下文的布局中，行内元素会参与到行内格式化上下文的布局中。

块格式化上下文（block formatting context）
在block formatting context中，框会一个接一个地被垂直放置，它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于margin属性。在block formatting context中相邻的块级元素的垂直边距会折叠。
在block formatting context中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，即direction：rtl，右外边接触包含块右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的block formatting context。(具体例子见 css定位之浮动一节)
浮动元素，绝对定位元素，inline-blocks，table-cells，table-captions等不是块框的块级包含框的，以及 overflow属性不是visible的元素，都创建新的块格式化上下文。

值得注意的是，block formatting context有下述重要特性有：

可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠

行内格式化上下文（inline formatting contexts）

在inline formatting contexts中，框一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding 在框之间得到保留。这些行内框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐，这取决与vertical-align属性。包含了这些行内框的长方形区域，会形成一行，叫做行框。
行框的高度总是足够容纳其所包含的所有框。不过，它可能高于它包含的最高的框（例如，框对齐会引起基线对齐，具体可以见后面 CSS可视化格式模型之宽度、高度中关于高度的计算部分）。当一个框 B 的高度小于包含它的行框的高度时，B 在行框中垂直方向上的对齐决定于vertical-align特性。 vertical-align 默认值为基线(baseline)对齐。

02. 要素补充部分：

width属性设置元素的宽度。
注意： width属性不包括填充，边框和页边距！

height属性设置元素的高度。
注意： height属性不包括填充，边框，或页边距！

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
注意： 负值是不允许的。

border 是边框属性的简写属性。
CSS border 属性用于指定元素边框的样式、宽度和颜色。可以设置的属性分别（按顺序）：border-width, border-style 和 border-color。
也可以只设置一个值，例如 border：＃FF0000; 是正确的，其他值会设置成对应属性的初始值。
注意： 如果边框的样式未定义，它将不可见。这是因为样式默认为none。

03. margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度
使用margin:auto水平居中

001. margin collapse

margin collapse，源于对margin-top 和margin-bottom的一种控制，CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

1.上下两div(上定义有margin-bottom, 下有margin-top): 叠加取较大的margin值 box-sizing: border-box;
2. margin collapse发生在父元素和子元素之间，前提是垂直边距间不存在padding（内边距）和边框。所以可以通过增加padding属性，或边框，防止叠加。如例子者也;
3.margin collapse会发生在定义有垂直外边距的空元素。

002. overlow

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

属性	描述	值	CSS
[clear]	指定不允许元素周围有浮动元素。	left、right、both、none、inherit	1
[float]	指定一个盒子（元素）是否可以浮动。	left、right、none、inherit	1

三、块级 VS 行级

01. 块级标签

无论内容有多少,都会占据一行;
默认宽:与父级标签一致;
默认高:0;或者与内容高度一致。
但是可以通过width和height来设置标签的宽高;
包括:<p>.<h1>、<ul>、<ol>、<hr/>等。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>这是一个段落</p><!--段落标签-->
		<h1>一级标题</h><!--标题标签-->
		<ul>
			<li>列表1</li>
			<li>列表2</li>
		</ul>
		<hr/><!--分割标签-->
	</body>
</html>

02. 行级标签

只占自身大小,不会占一行;
即使设置宽高也是无效的。
包括<font>、<b>、<i>、<a>等。