行内元素与块级元素与行内块元素

块级元素

会独占一行,默认情况下,其宽度自动填满其父元素宽度

块级元素可以设置width,height属性.

块级元素即使设置了宽度,仍然是独占一行.

块级元素可以设置margin和padding属性.

块级元素对应于display:block.

------------------------------------------------------------------------------------------

行内元素

不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行

行内元素设置width,height属性无效，它的长度高度主要根据内容决定.

行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.

常见的块状元素有：

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,

<address>,<blockquote>,<form>

常见的行内元素有：

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,

<img>,<input>,<select>,<textarea>,<button>

常见的行内块级元素有:

img   input   select     textarea|button等，也被称为可置换元素（Replaced element）。

他们之间是可以相互转换的

     display：inline  转为行内元素

    display：block   转为块级元素

    dispaly：inline-block  转为行内快元素