HTML块级元素与行级元素

转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/

 

一.两种类型

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是有效的。

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

HTML中行内元素与块级元素有哪些及区别 - 小脚丫 - celine_窝窝家妞妞

 

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值