Web开发基础（二）：CSS框模型（Box Model）、定位与浮动
CSS的决定的HTML标签特性
HTML的标签，可以简单分为三类
| 类别 | 特性 |
|---|---|
| 内联元素/行级元素（inline） <span> <strong> <em> <a> <del>等 |
内容决定元素占位大小 默认不可以通过CSS改变宽高 |
| 块级元素（block） <div> <p> <ul> <li> <ol> <form> <address>等 |
独占一行 默认可以通过CSS改变宽高 |
| 行级块元素（inline-block） 如<img> |
内容决定占位大小 可以通过CSS改变宽高 |
实际上，标签的这些特性还是由CSS隐式决定
任何一个标签都有一个隐式的CSS属性 display
行级元素、块级元素、行级块元素的 display 属性默认取值分别为 inline、block、inline-block
改变该属性即可以改变该标签的默认特性
也就是说设置内联标签<span>的 display 属性为block时，该标签里的内容就独占一行且可以用CSS设置宽高，，诸如此类
所有 inline 的元素（包括行级块元素），都具有文字属性，元素与元素间可用空白符产生空白，也就是说不使用空格符，元素间就不会有空隙
CSS 框模型 (Box Model)
先引入一个文档流的概念：文档流，标准文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下地流式排列
通常标签会自带很多属性，比如 padding、margin 等，
这些属性值往往不是我们想要考虑的，或者把标签定义为其他功能
可以使用通配符选择器，初始化所有标签
*{
padding:0;
margin:0;
}
通配符权重为0，再定义其他样式时无需考虑优先级，方便，所以使用它初始化标签
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式
margin、border、padding、element（height + weight）
如下图所示
框模型的元素占位大小的计算方式如下
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边
外边距可以是负值，而且在很多情况下都要使用负值的外边距
大多数浏览器中，元素的背景是内容、内边距和边框区的背景，不包括外边距
将 border 的颜色设置为 transparent 时，border 就可以作为额外的内边距使用，而且在需要时可以使其可见
垂直外边距合并
当两个外边距相遇时将合并为一个外边距，并且取大值
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
甚至有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
CSS 定位 (Positioning)
CSS有三种基本的定位机制：普通流、浮动和绝对定位
CSS 定位 (position) 属性允许对元素进行定位
position 属性会影响元素框的生成方式，它有四种取值
| 取值 | 效果 |
|---|---|
| static | 元素框正常生成，作为文档流的一部分 |
| relative | 元素框相对于原起点偏移某个距离 |
| absolute | 元素框不再在文档流中占据位置 元素相对于最近的父级元素定位， 如果没有，相对于其最初包含块定位， 且生成一个块级框 |
| fixed | 包含块为视窗本身的absolute |
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素不在文档流中
框1脱离文档流，挡住了框2
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。。。好XX的感觉
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框会围绕浮动框
使用clear属性清除元素某侧受到的浮动效果
2019/5/16
