HTML块级元素与行级元素

HTML块级元素与行级元素详解

最新推荐文章于 2024-06-06 16:07:06 发布

转载最新推荐文章于 2024-06-06 16:07:06 发布 · 1.8k 阅读

文章标签：

#HTML #块级元素 #行级元素 #web #HTML块级元素与行级元素

WEB 专栏收录该内容

34 篇文章

订阅专栏

本文详细解析HTML中的块级元素与行级元素的区别、特点、使用场景及CSS控制方式，涵盖块级元素如块级盒子类型变化、行级元素特性、盒子消失条件等，以及块级与行级元素的相互转换方法。

HTML块级元素与行级元素

一、两种类型

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

1.1 块级元素

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

1.2 行级元素

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

width 、 height 、max-widht 、max-height 、min-width 、min-height 如果想要改变这些属性，应该应用给它的属于块级元素的父级元素。

1.3 Spring Brother

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

1.4 CSS中的类型

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

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

1.4.1 水平的列表菜单

1.4.2 不断行的标题

1.4.3 隐藏元素

1.5 盒子类型的变化

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

1.6 盒子的消失

如果对元素应用了：display:none ,它（包含它的子元素）将被隐藏起来。对它应用的float、position 属性也不在有意义。因为它将不会产生任何的盒子。

二、块级元素

<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仅作用于行内内容上。