行內元素和塊計元素需要注意的地方

簡簡和單單發表於2016-04-12

行內內容是說由行內元素組成的內容,行內元素大家都知道吧,比如 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、塊級元素、行內元素分別彙總如下:

Examples of block level elements
ElementDescription
<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
ElementDescription
<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

原文地址:http://blog.csdn.net/freshlover/article/details/7076831

相關文章