-
2018-10-04 20:42:40
1.块级元素,默认是独自占据一行的,可以设置宽高,比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />
2.内联元素(行内元素),默认是几个内联元素都可以在同一行上显示,不能设置宽高,例如,<img>、<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>
3.行内块元素,除了可以设置宽高,其他和内联元素一样
通过CSS属性display,可以做转换:
例如:
/*块级元素转行内元素*/ display: block; /*块级元素转行内块*/ display: inline-block; /*行内元素转块级元素*/ display: block;
更多相关内容 -
HTML内联元素有哪些?
2021-01-12 09:13:25根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的...内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、br”等。【推荐...根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,而display属性为inline的元素就是行内元素。
内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、br”等。【推荐:html在线手册】
内联元素一般是内容的容器,一般情况下,内联元素只能包含内容或者其它内联元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行。内联元素适合显示具体内容。
特点:
1、和其他元素都在一行上;
2、高度、行高和顶以及底边距都不可改变;
3、宽度就是它的文字或图片的宽度,不可改变。
HTML内联元素有哪些?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 - 定义变量。
更多前端开发知识,请查阅 HTML中文网 !!
-
HTML行内元素与块级元素有哪些及区别?
2021-01-08 08:27:44想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来... -
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
2020-12-13 09:11:00块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块... -
css 块状元素和内联元素
2020-12-12 08:06:03在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a... 内联元素 内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度 -
css中内联元素(行内元素)的特点及常见的内联元素
2019-03-10 11:51:34内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。 2.内联元素的特点 (1)和...1.什么是内联元素?
内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。
2.内联元素的特点
(1)和其他兄弟元素同在一行,不用另起一行
(2)宽高以及到顶部和底部的边距都不可以设置
(3)宽度受内容挤压,即它的宽度就是它内容的宽度
(4)只能容纳内联元素和文本,通常被包含在块级元素中使用
3.常见的内联元素
a – 锚点
img – 图片
input – 输入框
span – 常用内联容器,定义文本内区块
b – 粗体(不推荐)
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i– 斜体
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea– 多行文本输入框
u – 下划线
-
常见的内联元素(inline)和块级元素(block)
2018-09-10 15:37:301.内联元素(inline): a – 锚点 abbr – 缩写 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) em – 强调 font – 字体设定(不推荐) i – ...1.内联元素(inline):
a – 锚点
abbr – 缩写
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
span – 常用内联容器,定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框2.块级元素(block):
address – 地址
blockquote – 块引用
dir – 目录列表
div – 常用块级容易,也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – h6 标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li3.内联元素与块级元素的区别
内联元素:
1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin,padding,但只在水平方向有效。块状元素:
1、块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin,padding内联块状元素inline-block:
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现(可以设置宽高和margin值)。之后的内联对象会被排列在同一内联。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
4.互相之间的区别
区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。
(1)块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
(3)块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
5.问题:页面排版的时候经常会遇到li包含img时,图片文件的下边缘出现大概5个或10个像素的间隙
原因:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象,只要是inline元素和父级元素是baseline的属性的对齐。
html会把图片默认为内联级元素和文字是一样的,那文字的话,给他设置不同的文字大小或字体,肯定会有不同的行高,或者它们会有默认的行高。这样就有了img下面的空隙。
办法:
第一,给图片img标签display:block。
img {display:block}
第二,定义容器里的字体大小为0。
div { width: 110px; border: 1px solid #000; font-size: 0 }
-
HTML哪些是块级元素哪些是行内(内联)元素?
2020-12-20 03:39:06码笔记分享块级元素和内联元素汇总大全:HTML块级元素HTML中的块级元素(block element)总是在新一行开始,高度边距都是可控的,并且块元素容纳内联元素和其他块元素,码笔记分享常见的块元素:...地址...居中对齐块.... -
html内联元素和块级元素的基本概念及使用示例
2020-12-13 19:56:38块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素...常见内联元素为“a”。 根据块级元素的概念我们可以理解为块级元素前后带有换行符,也就相当于元素前后加了一个 标签。我们可以把块级元素想象成一 -
CSS基础:块元素、内联元素、内联块元素
2021-06-29 03:31:21常用的块状元素有:、、-、、、、、、 、常用的内联元素有:、、、、、、、、、、常用的内联块状元素有:、·元素分类--块级元素什么是块级元素?在html中、 、、、 和 就是块级元素。设置display:block就是将元素... -
内联 块状元素
2021-09-09 21:45:32内陆 下列哪个样式定义后,内联(非块状)...块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。因此,可以定义其宽度和高度。 ... -
HTML基础(四)常用的内联元素
2020-04-11 21:01:46常见的内联元素有链接元素a、图像元素img、强调元素em、文本内区块元素span与换行元素br等 文章目录图像元素img链接元素a文本区块元素span 图像元素img img元素在网页中嵌入一幅图像。 img标签的基本语法如下... -
html常见的块元素与内联(行内)元素用法说明(一),html内联元素有哪些分享
2021-06-12 18:05:06块元素的属性:无论内容是什么,都会独占一整行。主要用于页面布局。...一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素。a元素可以包含任意元素,除了其本身。p元素不可包含任何的块元... -
HTML中的块元素、内联元素和内联快元素
2020-09-04 11:55:53页面布局中常用的三种标签:块...常见的内联元素:a、span、lable、button、textarea、b、strong、select、em 特点: 不支持宽、高、margin上下、padding上下; 宽、高由内容决定; 盒子并在一行; 代码换行,盒子之间 -
内联元素与块级元素
2018-09-19 21:45:11“块级元素”译为 block level element,“内联元素”译为 inline element。 1.块级元素 块级元素在浏览器显示时,通常会以新行来开始(和结束)。块级元素按照其应用于结构还是内容分为三种:结构化块状元素,... -
【HTML】秒懂内联元素和块级元素的区别
2021-11-01 16:31:30内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常会涉及到的属性是display:inline;这个属性能够... -
块、内联、内联块都有哪些及其特点
2021-08-25 14:03:42块元素 常见块元素:div,p,ul,li,ol,dl,dt,dd,h1~h6,hr 特点: a)块元素以块的形式显示为一个矩形区域,默认宽度为100%,等于父元素宽 b)默认情况下,块元素独占一行,自上而下排列 ...内联元素... -
块状元素、内联元素和内联块状元素
2019-01-16 21:12:55CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(display:block)、内联元素(又叫行内元素display:inline)和内联块状元素(display:inline-block)。可以通过代码来相互转换。一.常用的块状元素有: ... -
HTML中的块级元素和内联元素
2018-12-22 20:03:391.特性 块级元素(block level element) 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制 ... 内联元素... -
css中什么是内联元素
2021-08-04 04:31:13css中的内联元素也称为行内元素;内联元素包括布局中常用的标签如a、span、em、b、strong、...内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一... -
常见的块状元素及内联元素
2018-05-09 09:25:29块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。...常见内联元素为“a”xHTML的标签a, abbr, b, base, body, br, dd, d... -
块级元素和内联元素的区别
2018-01-28 22:28:42(4)他可以容纳内联元素和其他块元素 2、行级元素的特点: (1)和其他元素都在一行上 (2)行高以及外边距内边距部分可变 (3)宽度只与内容有关 (4)行内元素只能容纳文本或者其他行内元素 (5)不能设 -
css 内联元素、块级元素、内联块级元素
2019-04-04 22:47:35对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素等的时候,才深刻明白自己也就... -
HTML中内联元素指的是什么
2021-06-12 17:15:04HTML中内联元素指的是什么发布时间:2020-12-17 09:38:32来源:亿速云阅读:74作者:小新这篇文章主要介绍了HTML中内联元素指的是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获... -
HTML哪些是块状元素,哪些是内联元素
2016-09-21 21:21:52常见的块状元素与内联元素 块状元素 内联元素 address – 地址 blockquote – 块引用 center – 居中对齐 dir – 目录列表 div – 常用块级容易,也是CSS layout的主要标签 ... -
块状元素与内联元素的转换
2021-06-09 00:37:56它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在定义中你要留意它们两个的不同之处。块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行... -
块级元素、行内元素(内联元素)和内联块元素,常见元素的特点属性(href、src的区别,alt、title的区别)
2019-08-04 02:21:44还有啥元素? -
CSS块元素基础、内联元素(行内元素)、内联块元素(行内块元素)
2020-06-27 21:02:261.常用块元素标签有:div,p,ul,li,h1~h6,dl,dt,dd等 2.支持全部样式 3.如果没有设置宽度属性,则宽度默认为父级宽度的百分之百 4.盒子占据一行,即使设置了宽度