`

(转) 行内元素 块内元素

 
阅读更多
以图例来表述行内元素和块级元素的区别会更加直观:

注:行内元素会再一条直线上,是在同一行的。SPAN  strong

注:块级元素各占一行。是垂直方向的!

div标签
P标签

如果你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。

行内元素不可以控制宽和高,除非你想将它转变成为块级元素。它的宽和高,是随标签里的内容而变化。



块级元素列表
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体(正文)
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚(脚注或表注)
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行
行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架(即行内框架)
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射(即热区)
<object> object对象
<script> 客户端脚本
分享到:
评论

相关推荐

    html中的行内元素和块级元素有哪些.pdf

    可以将行内元素转换为行内块元素。 此外,设置 float 属性也可以使行内元素转换为块级元素,并拥有浮动特性。设置 position 属性也可以使行内元素转换为块级元素,但这只是副作用,它们的主要作用是干扰布局效果。...

    给行内块元素设置行高无法垂直居中.zip

    它们可以设置宽度、高度、内边距以及外边距,但依然保持在文本流中与其他行内元素相邻。然而,当尝试通过调整行高来使这些元素垂直居中时,我们可能会发现效果并不如预期。 首先,行高(line-height)主要应用于...

    《网友设计与开发》中块元素与行内元素详解

    块元素是指占据一整行空间的元素,而行内元素是指只占据所需空间的元素。下面我们将对块元素和行内元素进行详细的介绍。 块元素(block element) 块元素是指占据一整行空间的元素。块元素通常具有以下特点: * ...

    行内块级元素.txt

    4. **嵌套兼容性**:块级元素可以包含其他块级元素或行内元素,但行内元素不能包含块级元素。 常见的块级元素包括但不限于: - `&lt;address&gt;`:用于定义文档或文章的联系信息。 - `&lt;center&gt;`:虽然HTML5不推荐使用,...

    HTML+CSS中完全的行内元素(inline element)和块元素(block element)

    块元素默认独占一行,它们通常会被视为一个独立的容器,其中可以包含其他行内元素或块元素。块元素的宽度默认扩展到父元素的宽度,除非通过CSS进行显式设置。以下是一些典型的块元素: - **`address`** - 用于定义...

    微信小程序布局之行内元素和块级元素

    元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...

    行内元素、块元素都有哪些

    将display设为`inline`可以使块级元素变为行内元素,而设为`block`则可使行内元素变为块级元素。此外,还有`inline-block`值,它结合了两者特性,元素像块级元素一样可以设置宽高和margin,但仍然可以与其他元素并列...

    工程师必知必会盒模型与块状行内元素.docx

    **控制块级元素与行内元素的方法**: - 通过改变`display`属性来转换元素类型。例如,可以将一个行内元素转换为块级元素,或者反之亦然。 - 使用`float`属性可以让块级元素像行内元素那样显示在同一行,而使用`clear...

    CSS元素的类型与转换.pdf

    例如,可以使用 `display` 属性将块元素 `&lt;div&gt;` 转换为行内元素,或者将行内元素 `&lt;strong&gt;` 转换为块元素。 转换块元素为行内元素: ```css div { display: inline; } ``` 转换行内元素为块元素: ```css ...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    块级元素会独占一行,而行内元素则会根据可用空间在行内排列。浮动元素会脱离正常文档流,移到一行的一侧,如果当前行空间不足,则会换行。内联元素不会单独占据一行。 浮动(float)是一种让元素在页面中浮动的...

    css中行内元素和块级元素的区别

    此外,`display: inline-block`还可以创建一种“行内块级元素”,它结合了行内元素和块级元素的特性,可以在一行内显示,同时可以设置宽高和内外边距。 5. **总结** CSS中的行内元素和块级元素是网页布局的基础,...

    css盒模型和块级、行内元素深入理解

    行内元素,如`a`、`em`和`strong`,它们不会占据整行,其宽度由内容决定,高度通常基于字体大小,不能直接设置宽高。然而,通过修改`display`属性,可以将元素从一种类型转换为另一种类型。例如,将`display`设为`...

    前端日记01_行内元素和块级元素

    前端日记01_行内元素和块级元素欢迎大家来跟胖胖一起xio习!基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到...

    全面了解行内元素与块级元素的区别

    4. 包含关系不同:块级元素可以包含行内元素和其他块级元素,但行内元素不能包含块级元素,只能包含文本或其它行内元素。 掌握行内元素与块级元素的区别对于网页布局和样式设计至关重要。它们的不同特性和行为会...

    css3块元素居中

    在CSS3中,实现块元素的居中是一个常见的布局需求,尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息,我们可以详细探讨几种在不同场景下实现块元素居中的方法,以及理解其中的原理。 ### 1. 内联元素...

    绝对定位也可触发行内元素的layout说明

    在提到的"行内元素"和"块级元素"中,`display:inline-block`是一种混合型显示模式,它允许元素保持行内元素的特性(如并排排列),同时具有块级元素的一些优点,比如可以设置宽度和高度。然而,在IE6这个古老版本的...

    使用HTML开发商业网站-CSS元素的类型和转换课件.pptx

    例如,将一个块元素的`display`属性设置为`inline`,可以使其表现得像行内元素;反之,将行内元素的`display`属性设为`block`,它就会变成块元素的行为。`inline-block`值允许元素既保持行内元素的特性,又能够设置...

    关于css 行元素和块元素 相互转换 居中

    一、块级元素 行内元素 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。 您...

Global site tag (gtag.js) - Google Analytics