块级元素和内联元素的主要区别

块级元素	内联元素（即行内元素）
总是在新行上开始，独占一行默认情况下，宽度自动填满其父元素	相邻的行内元素会排列再同一行里，直到一行排不下，才会换行，宽度随元素的内容而变化
可以设置width,height属性	设置width，height属性无效
可以设置magin,padding属性	边距起作用的以下几个，其它不会起作用 margin-left\|right\|padding-left\| right
对应于display block	对应于display:inline

通过display属性对行内元素和块级元素进行切换

block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

块级元素-按字母顺序排列

标签	描述
<address>	定义地址。
<area>	图像区域
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<br>	换行
<blockquote>	定义长的引用。
<canvas>	定义图形。
<caption>	定义表格标题。
<dd>	定义定义列表中项目的描述。
<div>	定义文档中的节。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<details>	定义元素的细节。
<fieldset>	定义围绕表单中元素的边框。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。
<form>	定义供用户输入的 HTML 表单。
<h1> to <h6>	定义 HTML 标题。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<keygen>	定义生成密钥。
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目。
<menu>	定义命令的列表或菜单。
<meter>	定义预定义范围内的度量。
<map>	图像区域
<nav>	定义导航链接。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<ol>	定义有序列表。
<output>	定义输出的一些类型。
<p>	定义段落。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<section>	定义 section。
<source>	媒介源
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>	定义日期/时间。
<track>	定义用在媒体播放器中的文本轨道。
<tr>	定义表格中的行。
<ul>	定义无序列表。

内联元素有

<a>	定义锚。
<abbr>	定义缩写。
<acronym>	定义只取首字母的缩写。
<b>	定义粗体字
<bdo>	定义文字方向。
<big>	定义大号文本。
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<command>	定义命令按钮。
<dfn>	定义定义项目。
<del>	定义被删除文本。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<i>	定义斜体字。
<img>	定义图像。
<input>	定义输入控件。
<kbd>	定义键盘文本。
<label>	定义 input 元素的标注。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<objec>	定义内嵌对象。
<q>	定义短的引用。
<samp>	定义计算机代码样本。
<summary>	定义 details 元素的标题。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<span>	定义文档中的节。
<strong>	定义强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<textarea>	定义多行的文本输入控件。
<time>	定义日期/时间。
<tt>	定义打字机文本。
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义可能的换行符。

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

不可替换元素 html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

例如： <p>段落的内容</p> 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

demo

<html>
<head>
<style>#div1{background-color: red;      border: 1px solid black;display: inline;margin: 100px;//内联元素只有左右外边距有效width: 100px;//内联元素宽高是有内容决定的height: 100px;//内联元素宽高是有内容决定的，line-height也可以设置高度}#div2{width: 100px;height: 100px;background-color: green;margin: 100px;}
</style>
</head><body><div id="div1">12345</div><div id="div2">122</div></body></html>

html中内联元素和块级元素的区别（整理版）相关推荐

内联元素与块级元素及内外边距的影响
内联元素与块级元素块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素常用的块级元素:div.h1~h6.dl. ...
html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
首先我们先了解一下行内元素和块级元素行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...
html中的行内标签吗,HTML标签中行内元素和块级元素详解
本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...
css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...
【HTML】秒懂内联元素和块级元素的区别
内联元素和块级元素 1.内联元素(inline) (一)内联元素的概念 (二)内联元素的特性 (三)HTML标签中常见的内联元素 2.块级元素(block) (一)块级元素的概念 (二)块级元素的特性 ...
html块级元素转换内联,内联元素和块级元素相互转换
内联元素和块级元素相互转换属于前端实例代码,有关更多实例代码大家可以查看. 内联元素和块级元素之间可以相互转换,下面就简单介绍一下转换方法. 一.内联元素转换为块级元素: 让内联元素产生浮动或者将它的 ...
内连级元素有哪些_内联元素和块级元素
一.行内元素与块级元素的基本概念 1. 块元素 (block element) : 块级元素生成一个元素框, (默认地)它会填充其父级元素的内容,旁边不能有其他元素.换句话说,他在元素框之前和之后生 ...
html 元素的内联块元素,html内联元素和块级元素的基本概念及使用示例
html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念: 块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(w ...
行内元素和块级元素：内联(行级)元素不能设置margin-top
内联(行级)元素不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...

html中内联元素和块级元素的区别（整理版）

块级元素和内联元素的主要区别

html中内联元素和块级元素的区别（整理版）相关推荐

最新文章

热门文章