CSS中一些值得细细品味的概念

一、选择器部分（语法部分）

每一个HTML元素所拥有的样式来源有三个：
一是直接针对该元素的样式设置：

<!-- HTML片段 -->
<div id="testId" class="test-class" title="我是测试片段"></div>

#testd { ... } // 单纯的id选择器

.test-class { ... } // 单纯的class选择器

[title] { ... } // 单纯的属性选择器

div { ... } // 单纯的元素选择器

div#testId.test-class[title] { ... } 单纯的选择器组合

二是通过元素的上下文关系进行的样式设置：
主要有：后代选择器、子选择器、兄弟选择器、相邻兄弟选择器。

<!-- HTML片段 -->
<div class="grandfather" title="主角爷爷">
	<div class="father" title="主角爸爸">
		<div id="testId1" class="test-class" title="我是配角"></div>
		<div id="testId2" class="test-class" title="我是主角"></div>
	</div>
</div>

.grandfather #testId2 { ... } // 后代选择器，以空格分割

.father > #testId2 { ... } // 子选择器，以“>”号分割，左右可以有空格

#testId1 ~ #testId2 { ... } // 兄弟选择器, 以“~”号分割，选择前面有兄弟元素的id为testId1的id为testId2的元素

#testId1 + #testId2 { ... } // 相邻兄弟选择器, 以“+”号分割，选择上一个兄弟元素的id为testId1的id为testId2的元素

三是通过继承而来的样式设置：

/* 一些常见的可被后代元素继承的样式以及其默认值 */
{
	font-size: normal;
	width: auto;
	height: auto;
	box-sizing: content-box;
	position: static;
	vertical-align: baseline;
	...
}

/* 不被继承的样式 */
{
	display: ; /* div元素默认block，span元素默认inline */
	clear: none; /* 仅块级盒子生效 */
	content: 
	...
}

二、幽灵空白节点（支柱strut）

定义：存在于每一个行框盒子前面的宽度为零、行高为零、字体大小随父元素大小的“空白节点”。（文档必须是HTML5声明）
行框盒子：每一行就是一个行框盒子，由一个或多个内联盒子组成。

<!-- 如果设置font-size为0，则幽灵空白节点的高度就为零了 -->
<div style="font-size:0">
	<!-- 设置display值是为了产生内联盒子，从而组成行框盒子 -->
	<!-- 此时此div的人高度不为零，幽灵空白节点继承了font-size:normal而有了高度 -->
	<div style="display:inline-block"></div>
</div>

三、替换元素和非替换元素

替换元素：通过修改某个属性值可以改变内容的元素。例如：

<!-- 通过修改src属性改变内容 -->
<img src="1.jpg">

<!-- 通过修改value属性改变内容 -->
<input calue="1">

常见的替换元素有：img、input、textarea、video等。
替换元素的特性：

1. 可能有默认尺寸（300px X 150px），例如canvas、video等，img元素为0 X 0
2. vertical-align: baseline; 替换元素的基线被定义为元素的底部边缘。
3. 替换元素的尺寸计算规则和它的display值毫无关系。它们都有width和height属性来控制尺寸大小。

<img src="1.jpg" width="300" height="150" />

img {
   width: 200px;
   height: 100px;
}

上面代码的生效优先级：css > html > 1.jpg(图片本身大小)