HTML块级元素和行级元素


转自:http://cshbbrain.iteye.com/blog/1910136

一.两种类型

HTML中的大部分元素都可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素会从新的一行出现,行 级元素则不会。块级元素的前后都会有插入的断行,所以如果不用CSS则没法让两个块级元素并列在一起。

 

二.块级元素

块 级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。如,<div>,<li>

三.行级元素

行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性:

width

height

max-width

max-height

min-width

min-height

如果你想改变这些属性,应该应用给它的属于块级元素的父元素。

四.Spring Brother

有些元素既可以是块级元素,也能成为行级元素。例如<ins> 和<del>。当这两个元素直接出现在<body>中时,它们就是块级元素。如果作为<P>的子元素,他们就是行级 元素,此时不能包含其他的块级元素。

五.CSS中的类型

CSS 中的盒子也有块级和行级之分,也包括其他类型,如,列表和表格等。HTML中的块级元素会产生块级盒子,行级元素会产生行级盒子。在CSS 中,可以用display控制盒子的类型。如,把一个行级元素转换成块级元素。注意,这种转换并不能改变元素本质。即使你把它转换成了 块级元素,你也不能让它包含其他的块级元素,你转换的只是CSS的盒子的外观。

通常没有必要改变元素的盒子类型,下列情况一般有改变盒子的需求:

水平的列表菜单

不断行的标题

隐藏元素

六.盒子类型的变化

对于应用了浮动或绝对定位的元素,如此类样式:float:left,position:absolute,position:fixed。这类元 素的盒子类型显然改变了。它们都变成了块级元素,因此display属性一般都被忽略。

七.盒子的消失

如果对元素应用display:none,它(包括它的子元素)将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。

 

一.行内元素和块级元素有哪些?

块级元素

<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

行内元素

<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

大家可以发现,上面有些元素有重复,为什么呢,是因为HTML中存在可变元素。
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  ◎ applet - java applet
  ◎ button - 按钮
  ◎ del - 删除文本
  ◎ iframe - inline frame
  ◎ ins - 插入的文本
  ◎ map - 图片区块(map)
  ◎ object - object对象(当浏览器不支持时,则显示为块级)
  ◎ script - 客户端脚本 
但是就我个人而言,我更愿意把它们当做行内元素,因为一般情况下,不会解释为块级元素

二.行内元素与块级元素有什么不同?

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

通过样式控制,它们可以相互转换。

1.尺寸-块级元素和行内元素之间的一个重要的不同点

设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。

注:这 里说的无效, 是指,它对其它元素的排列没有影响。也就是说,对于设置的margin,padding行内元素文档流里的上下元素来说,他们的间距不会因为上下 margin或者上下padding而产生间距。但是就他本身而言,对于上下margin与padding是有效的。

上面写的有点绕了,我也是尽量表达。请参照下图,如果还是不清楚,请动手自己写一下,就能明白了。

 

2.text-align属性是两者表现的又一不同之处

这个特性描述了如何使一个块元素的行内内容对齐。
注意一点,w3c标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。
解释一下,行内内容是说由行内元素组成的内容,
这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。啊? 又是IE!!
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。


你可能感兴趣的:(HTML块级元素和行级元素)