css元素和css定位

先说下css元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：
块状元素、内联元素(又叫行内元素)和内联块状元素。

在html中< div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。
设置display:block就是将元素显示为块级元素。
如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
在html中，<span>、<a>、<label>、<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。
 div{
     display:inline;
 }
<div>我要变成内联元素</div>

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；（宽高，上margin下margin不可设置）
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：
<img>、<input>
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种性质内联块状标签。

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

对于img，input，查阅资料这个解释更合理

img确实是行内元素 但它也是置换元素 。
置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。
所以 img  input  select  textarea  button  label 等，他们被称为可置换元素（Replaced element）。
他们区别一般inline元素是：这些元素拥有内在尺寸 内置宽高 他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

扩展知识

上面介绍中提到了display，那它是什么呢。
display 属性规定元素应该生成的框的类型。除去元素本身带有的块、内联性质，该属性可以强制转换元素显示属性。主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
display:none	此元素不会被显示。

下面说下position

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。