block元素的特点:
总是在新行上开始;此元素将显示为块级元素,此元素前后会带有换行符。
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度。
可以控制宽高。
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
inline元素的特点:
和其他元素都在一行上;默认。此元素会被显示为内联元素,元素前后没有换行符。
高,行高及顶和底边距不可改变;
行内元素,不能定义自己的宽和高。如果需要设置高度,可以通过行高line-height撑起来。
宽度就是它的文字或图片的宽度,不可改变。
左右margin可以改变,padding可以改变。(ie6上下不能padding)
行内元素不会单独的占有一行,而是挨着显示的。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子
------------------------------------------------------------------------------------------------------------------
块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 举中对齐块
◎ dir - 目录列表
◎ div - 常用块级容易,也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表
---------------------------------------------------------------------------------------------------------
内联元素(inline element)
◎ a - 锚点◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器,定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量
----------------------------------------------------------------------------------------------------
行内元素和块元素之间的转换。
把块元素加上display:inline的属性后就变成了行内元素。例如div{display:inline;}。
相反的,行内元素如果加上display:block就会变成块元素,如span{display:block;}。
分享到:
相关推荐
在HTML中,元素被分为两种主要类型:行内元素(Inline Elements)和块级元素(Block-level Elements)。这两种元素在页面布局中起着至关重要的作用,它们各自有不同的特性和使用场景。 1. 行内元素(Inline ...
可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...
理解行内元素和块级元素的差异是前端开发的基础之一。合理利用这些元素可以帮助开发者更好地组织网页结构、控制布局,并最终实现美观且易于维护的网站设计。在实际应用中,开发者还可以结合CSS对这些元素进行更细致...
想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
行内元素和块级元素的区别主要表现在布局和样式属性上。 一、行内元素和块级元素概括 块级元素特点: 块级元素总是独占一行,这意味着它从上到下进行堆叠。在不设置宽度的情况下,块级元素通常会填满其父元素的...
文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...
元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
Block element 块级元素顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。...
块级元素的特点是可以设置宽度和高度,以及内外边距和边框。它们之间的默认排列方式是垂直的,每个元素下面的元素会紧随其后,形成一个“块”。 - **内联元素(Inline Elements)**:与块级元素相反,内联元素不会...
在CSS中,根据元素在文档流中的表现形式,可以将它们分为两大类:**块级元素**(block-level elements)和**内联元素**(inline elements)。 ##### 块级元素特点: 1. **占据整行**:块级元素默认情况下总是独占一...
在CSS布局中,块级元素(Block Element)和行内元素(Inline Element)是两种基本的元素类型,它们之间的区别和联系是理解网页布局的关键。本文将深入探讨这两种元素的概念、特点以及它们如何影响文档流。 块级元素...
其中,盒模型和元素的分类(块级元素和行内元素)是理解页面布局的基础。本文将深入探讨这两个概念。 首先,盒模型是CSS中的核心概念,它定义了元素如何占用空间和与其他元素交互。每个HTML元素都可以被视为一个...
块级元素可以包含行内元素和其他块级元素,比如常用的、、到、、、、、等都是典型的块级元素。块级元素默认宽度为100%,除非通过CSS进行宽度控制。 行内元素(inline element),也称为内联元素,特点是它们不会...
HTML块级元素行内元素学习
下面我们将对块元素和行内元素进行详细的介绍。 块元素(block element) 块元素是指占据一整行空间的元素。块元素通常具有以下特点: * 占据一整行空间 * 可以设置宽高、边框、背景色等样式 * 可以包含其他元素 ...
一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行内元素不能包含...
内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。 根据块级元素的概念我们可以...
在CSS布局中,行内元素和块级元素的居中处理是常见的需求,尤其是在网页设计中。本篇文章主要探讨了这两种元素的水平居中和垂直居中的实例分析。 一、水平居中 1. **行内元素居中**:对于行内元素(如`<span>`、`...