浅析CSS块级元素与行内元素

块级元素和行内元素是布局最基本的两种元素。

1、块级元素

    block element，显示在一块内，会自动换行，元素从上到下垂直排列，各自独占一行。

    DIV是最常见的块级元素，元素样式的display:block都是块级元素。他们总是以一个块的形式表现出来，并且跟同级的兄弟块垂直排列，其宽度自动填满其父元素宽度。

2、行内元素

    inline element，也叫做内联元素、内嵌元素等，不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

3、二者区别

• 块级元素可以设置width、height属性，行内元素不可以，但可以通过line-height来设置高度
• 块级元素可以设置padding、margin属性，而行内元素只有左右padding和左右margin有效，上下则无效

4、块级元素与行内元素的相互转换

     行内元素转化为块元素： display:block; 

　  块元素转化为行内元素： display:inline; 

5、常见的块级元素和行内元素

    常见的块级元素：<div>、<p>、<hx>、<ol>、<ul>、<dl>、<tabel>、<address>、<blockquote>、<form>

    常见的内联元素：<a>、<b>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    常见的内联块级元素：<img>、<input>