css变成块级元素_CSS 块级元素与内联元素及其转换

常见块级元素：address、div、dl、form、h1-h6、menu、ol、ul、li、p、table、header、nav、footer、article、section等

常见内联元素：a、br、font、img、input、label、select、span、textarea、b、small

块级元素具有以下特点：

1. 总是在新行上开始，占据一整行

2. 高度、行高以及内外边距都可以控制

3. 宽带始终是与浏览器宽度一样，与内容无关

4. 它可以容纳内联元素和其他块元素

内联元素的特点：

1. 和其他元素都在一行上

2. 高、行高以及内外边距部分可改变

3. 宽度只与内容有关

4. 行内元素只能容纳文本或者其他行内元素

5. 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在 ie6 中不对上下起作用，只能对左右起作用。

CSS 改变元素类型

display: block        显示为块级元素

display: inline        显示为内联元素

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

注意：内联元素的 margin-left / margin-right 及 padding-right / padding-left 是可以控制的，所以可以通过这四个属性来控制内联元素的宽度。

内联元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制内联元素的高度。