`

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

    博客分类:
  • css
阅读更多

       在学习css的过程中,经常看到资料中特别提示,某些特性块级元素和行内元素不同,那么html中,到底哪些是块级元素哪些是行内元素呢。把这一点区分好了,相信在开发中会有很大的帮助,也会减少许多不必要的麻烦。下面就是多方查找得到的资料,希望对各位看到的朋友有所帮助,同时对我自己也是一个知识点的积累。

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

注:行内元素会再一条直线上,是在同一行的。我是行内元素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

    可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...

    行内元素和块级元素 displayDemo.html

    在`displayDemo.html`文件中,可能包含了一个展示行内元素与块级元素区别的示例。通过修改元素的`display`属性,可以看到不同显示模式对布局的影响。 总的来说,理解和掌握行内元素与块级元素的概念以及如何利用`...

    HTML行内元素与块级元素有哪些及区别?

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...

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

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

    关于块级元素和行内元素

    本文将从块级元素和行内元素的定义、特点、区别、应用场景等方面,对它们进行详细的讲解。 块级元素(Block Element) 块级元素是指占据整个横向宽度的元素,它们可以包含其他元素,例如 div、h1-h6、p、ul、ol 等...

    【CSS基础学习】行内元素,块级元素,行内块级元素

    块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...

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

    总结起来,行内元素和块级元素的区别主要体现在以下几个方面: 1. 默认显示方式不同:块级元素默认独占一行,而行内元素则不会独占一行,它们在水平方向上连续排列。 2. 宽度高度设置不同:块级元素可以设置宽度和...

    CSS行内元素和块级元素的居中实例分析

    在CSS布局中,行内元素和块级元素的居中处理是常见的需求,尤其是在网页设计中。本篇文章主要探讨了这两种元素的水平居中和垂直居中的实例分析。 一、水平居中 1. **行内元素居中**:对于行内元素(如`&lt;span&gt;`、`...

    对行内元素和块级元素的一些认识

    在网页布局和设计中,了解行内元素和块级元素是非常基础且重要的概念。行内元素和块级元素是HTML中的两种主要元素类型,它们的行为和样式应用上有显著的差异,直接影响到页面的布局和内容展示。 首先,我们来看一下...

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

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

    行内块级元素.txt

    理解行内元素和块级元素的差异是前端开发的基础之一。合理利用这些元素可以帮助开发者更好地组织网页结构、控制布局,并最终实现美观且易于维护的网站设计。在实际应用中,开发者还可以结合CSS对这些元素进行更细致...

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

    在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元

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

    一、行内元素和块级元素的区别  1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;  块级元素会占据一行,垂直方向排列。  2、 块级元素可以包含行内元素和块级元素;行内元素不能包含...

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

    其中,盒模型和元素的分类(块级元素和行内元素)是理解页面布局的基础。本文将深入探讨这两个概念。 首先,盒模型是CSS中的核心概念,它定义了元素如何占用空间和与其他元素交互。每个HTML元素都可以被视为一个...

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

    HTML 元素详解 - 块元素与行内元素 在 HTML 中,元素可以分为两大类:块元素(block element)和行内元素(inline ...在 HTML 中,块元素和行内元素都是非常重要的概念,理解它们的区别和用法是掌握 HTML 的基础。

Global site tag (gtag.js) - Google Analytics