一、选择器部分(语法部分)
每一个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等。
替换元素的特性:
- 可能有默认尺寸(300px X 150px),例如canvas、video等,img元素为0 X 0
- vertical-align: baseline; 替换元素的基线被定义为元素的底部边缘。
- 替换元素的尺寸计算规则和它的display值毫无关系。它们都有width和height属性来控制尺寸大小。
<img src="1.jpg" width="300" height="150" />
img {
width: 200px;
height: 100px;
}
上面代码的生效优先级:css > html > 1.jpg(图片本身大小)