CSS中的块级元素（block）与行内元素（inline）

css中有3种基本的定位机制：

1. 普通流（相对定位实际上看做普通流定位模型的一部分）
2. 浮动（float）
3. 绝对定位（固定定位是绝对定位的一种）

所以在学习浮动之前，我们先要了解块级元素与内联元素（行内元素）。

• 块级元素：块级元素一般当做容器使用，既可以容纳内联元素也可以容纳块级元素，例如div和p。

  常见的块级元素:

  （1）div：主要用来进行框架布局。

  （2）h1～h6：用来设置不同级别的标题。

  （3）p:创建段落，会自动在其前后创建一些空白。

  （4）hr:用来创建分隔先。

  （5）ol:创建有序列表。

  （6）ul:创建无序列表。

• 块级元素的特点：

1. 块级元素既可以容纳内联元素也可以容纳块级元素。
2. 块级元素在默认的情况下是独占一行的。
3. 块级元素大小是可以控制的，css可以通过width与height设定高度和宽度。宽度默认值就是它所在容器宽度的100%。
4. 块级元素可以设置margin和padding属性. 
5. 块级元素对应属性display：block；

• 内联元素：任何不是块级元素的可见元素都是内联元素。内联元素只能够容纳文本或者内联元素。

  常见的内联元素:

  （1）strong：加粗强调。

  （2）em：斜体强调。

  （3）s：删除线。

  （4）u：下划线。

  （5）a：超链接。

  （6）span：常用行级，可定义文档中的行内元素。

  （7）img：图片。

  （8）input:表单。

• 内联元素的特点：

1. 内联元素默认情况下可以和其他内联元素元素在一行上。
2. 内联元素默认情况下的大小是不可以控制的。
3. 内联元素可以产生代码换行和空格。
4. 内联元素对应属性display：inline；
5. 内联元素只能容纳文本或者内联元素。
6. 内联元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.

display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。