块级元素和行内元素使用心得汇总

块级元素和行内元素使用心得汇总#

行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。

块级内容跟则是由块级元素构成，DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。

1、对行内元素，需要注意如下：

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

2、IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

解决方法：为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：

3、块级元素、行内元素分别汇总如下：

lement	Description
`<address>`	information on author
`<blockquote>`	long quotation
`<button>`	push button
`<caption>`	table caption
`<dd>`	definition description
`<del>`	deleted text
`<div>`	generic language/style container
`<dl>`	definition list
`<dt>`	definition term
`<fieldset>`	form control group
`<form>`	interactive form
`<h1>`	heading
`<h2>`	heading
`<h3>`	heading
`<h4>`	heading
`<h5>`	heading
`<h6>`	heading
`<hr>`	horizontal rule
`<iframe>`	inline subwindow
`<ins>`	inserted text
`<legend>`	fieldset legend
`<li>`	list item
`<map>`	client-side image map
`<noframes>`	alternate content container for non frame-based rendering
`<noscript>`	alternate content container for non script-based rendering
`<object>`	generic embedded object
`<ol>`	ordered list
`<p>`	paragraph
`<pre>`	preformatted text
`<table>`	table
`<tbody>`	table body
`<td>`	table data cell
`<tfoot>`	table footer
`<th>`	table header cell
`<thead>`	table header
`<tr>`	table row
`<ul>`	unordered list

Examples of inline elements
Element	Description
`<a>`	anchor
`<abbr>`	abbreviated form
`<acronym>`	acronym
`<b>`	bold text style
`<bdo>`	I18N BiDi over-ride
`<big>`	large text style
`<br>`	forced line break
`<button>`	push button
`<cite>`	citation
`<code>`	computer code fragment
`<del>`	deleted text
`<dfn>`	instance definition
`<em>`	emphasis
`<i>`	italic text style
`<iframe>`	inline subwindow
`<img>`	Embedded image
`<input>`	form control
`<ins>`	inserted text
`<kbd>`	text to be entered by the user
`<label>`	form field label text
`<map>`	client-side image map
`<object>`	generic embedded object
`<q>`	short inline quotation
`<samp>`	sample program output, scripts, etc.
`<select>`	option selector
`<small>`	small text style
`<span>`	generic language/style container
`<strong>`	strong emphasis
`<sub>`	subscript
`<sup>`	superscript
`<textarea>`	multi-line text field
`<tt>`	teletype or monospaced text style
`<var>`	instance of a variable or program argument