CSS 盒模型
一、 CSS盒模型基础
在CSS中，HTML的标签元素大体分为三种类型：块状元素（block）、内联元素( inline )、块状内联元素(inline-block).
常见的标签中，
1. 块状元素：
1
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2. 内联元素：
1
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3.内联块状元素：
1
<img>、<input>
二、 三种类型的特点：
1.块状元素：
- 块状元素在布局上会新起一行，其后的元素也要新起一行
- 元素的宽高、行高、顶和底边距都可以设置（margin,padding都可以）
- 若宽度没有设置，则宽度是其父容器宽度的100%
2.内联元素：
- 与其他元素在同一行
- 元素的宽高、行高、顶底边距都不可以设置
- 元素的宽度就是它包含的文字或者图片的宽度，不可改变
3.内联块状元素，顾名思义，它兼具以上两种类型的特点：
与其他元素在同一行
元素的宽高、行高、顶和底边距都可以设置（margin,padding都可以）
当元素设置position:absolute 或者float:left/right时，其盒模型会表现为display:inline-block的特性
CSS 布局模型
一 布局模型介绍
布局模型，就是元素在页面布局上的表现，元素外在的表现，而上节介绍的盒模型，相当于是元素的内在表现。
CSS布局模型同样也分为三种：
- 流动模型（flow）
- 浮动模型（float）
- 层模型（layer）
二 布局模型的特点
1. 流动模型
- 流动模型是网页布局的默认模型，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
- 内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2.浮动模型
浮动元素可以让元素脱离文档流，浮动起来，能使两个块状元素处于同一行。
3.层模型。
绝对定位 position:absolute
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
相对定位 position:relative
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。(实际位置并没有改变，只是显示做了偏移)
固定定位 position:fixed
它与绝对定位相似，区别在于它的相对移动的坐标是视图（屏幕内的网页窗口）本身。因此，它不会随页面滚动而改变位置，真正意义上的固定了位置。