CSS布局模型

CSS布局模型

块级元素(block-level)

无论其元素内容的多少或者把它的宽度设置多小，都会默认独占其父元素一整行的内容区域，块级元素的默认宽度为父元素的整个宽度

行内元素(inline-level, 也叫内联元素)
行内元素不会独占一行，可以和其他行内元素同处一行，大小默认为其元素内容的大小

区别
当元素是块级元素时，我们可以自由的改变其宽高，或为它们设置margin值和padding值。
不过当元素是行内元素时，我们为它们设定的宽高和竖直方向上的边距值都会失效。

行内块元素(inline-block level)
行内块元素则同时具备了块级元素和行内元素的特点，元素宽度和元素内容宽度保持一致，
且它们的宽高、竖直边距和行高都可以进行设置

元素共有三种布局模型，分别为流动模型（Flow）、浮动模型（Float）和层模型（Layer）

流动模型
流动布局模型有两个特征：
块级元素会在所处的父级元素内自上而下按顺序垂直排列
行内元素会在所处的父级元素内从左到右水平按顺序水平排列。

浮动模型
元素浮动之后不再占据原来的位置，它们会尽可能的往包裹它们的父元素的左边框或右边框靠
并会在它们元素所处位置的下面产生浮动流，影响下面的元素定位
浮动元素并没有完全脱离文档流，它只是从包裹它的盒子中浮动起来并尽可能远的往左侧或者右侧进行移动

层模型
拥有三种定位形式，分别相对定位（position: relative)、 绝对定位（position: absolute）和固定定位（position: fixed）

相对定位 ： relative 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。 相对定位是相对于 元素本身以前的位置 移动，偏移前 的位置保留不动。 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

绝对定位 ： absolute 它将元素从文档流中脱离出来，于与其最接近的一个具有定位属性的父级元素进行绝对定位(如果不存在这样的父级元素，则相对于body元素) 通常我们会先给它的父级元素设置相对定位relative，这样父元素还占据着位置，而子元素可以在父元素内自由移动 ( 子 绝 父 相 ) 两个float的盒子是彼此看得见彼此的，即无法发生重叠， 而两个absolute的盒子可以重叠，这侧面说明了float并没有真正脱离文档流

固定定位 ： fixed 同样会脱离文档流，不占据原来的位置，它的相对移动的坐标是视口（浏览器窗口）本身 固定定位的元素会始终位于浏览器窗口内的某个位置，不会受文档流动影响。

float：left/right 和position：absolute/fixed都会把元素从内部隐式变成行内块元素，但控制台显示的依然是原来的display属性