<meta charset="utf-8" />
</head>
<body>
<p style="background: grey; width: 600px;">
<span style="font-size: 50px; border: 1px solid red;">hello</span>
<span style="font-size: 30px; border: 1px solid green; vertical-align: top;">world</span>
</p>
</body>
</html>
在水平方向上的对齐：
行内框宽度总和小于包含框的宽时，水平方向的对齐取决于text-align属性。
五、POSITION和OVERFLOW的关系
父节点设置overflow:scroll,但是不管滚动条如果滚动，但是子节点一直都不动。
当父节点不设置position情况下，子节点position的四种值的分析：
示例1.1:
CSS Code复制内容到剪贴板
body{
A {overflow: scroll;}
A-1 {}
}
效果：A-1会根据A滚动条的滚动而滚动
分析：A-1的默认position设置为static，当position为static时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响
示例1.2:
CSS Code复制内容到剪贴板
body{
A {overflow: scroll;}
A-1 {position: relative;}
}
效果：A-1会根据A滚动条的滚动而滚动
分析：当A-1的position设置为relative时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响
示例1.3:(重点)
CSS Code复制内容到剪贴板
body{
A {overflow: scroll;}
A-1 {position: absolute;}
}
效果：A-1不会根据A滚动条的滚动而滚动
分析：当A-1的position设置为absolute时，A-1元素脱离了文档流，所以A-1不再受父节点属性的影响
注意：这时在父节点没有设置position的时，只会受到body节点的影响
示例1.4:
CSS Code复制内容到剪贴板
body{
A {overflow: scroll;}
A-1 {position: fixed;}
}
效果：A-1不会根据A滚动条的滚动而滚动
分析：当A-1的position设置为fixed时，A-1元素脱离了文档流，这时A-1只受body元素的影响
