行内元素,块级元素,替换元素和inline-block

大疆机场及无人机上云(航线规划、指令飞行...) 最近基于大疆上云api进行二次开发,后面将按照开发步骤对其进行说明! 阅读详情

行内(inline)元素

行内元素的特点:

1.行内元素前后不会换行,多个行内元素会排成一行,直到排满一行

2.行内元素一般无法设置width和height属性(替换元素除外)

3.行内元素设置margin和padding属性时,只有margin-left,margin-right,padding-right和padding-left有效

常见的行内(inline)元素:

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 - 定义变量


块级元素(block)的特点:

1.块级元素前后会单独换行

2.块级元素设置width,height,margin,padding属性有效

常见的块级(block)元素:

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易,也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单 (只能用来容纳其它块元素)

h1-h6 - 标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表


替换元素特点:

1.从元素本身的特点来讲,可以分为替换元素和不可替换元素

2.浏览器根据元素标签和属性决定显示的内容。

3.替换元素本身没有内容,是“空元素”

4.替换元素有内在尺寸,具有width和height属性

5.替换元素的margin和padding属性有效

常见的替换元素:

img

input

textarea

select

所以,img,input元素作为行内元素,但width,height,margin和padding属性都有效


display:inline-block

通常用来设置非替换元素的行内元素。设置之后,该元素有以下特点:

1.将该对象呈递为inline对象,但是对象的内容作为block对象呈现

2.设置的margin,padding,width和height属性有效

3.相邻的inline元素仍在同一行内

Ubuntu下Ollama局域网共享大模型服务:5分钟搞定配置与防火墙设置 本文提供了一份在Ubuntu系统上快速配置Ollama实现局域网共享大模型服务的实战指南。通过修改服务配置使其监听所有网络接口,并设置UFW防火墙规则,用户可在5分钟内让同一Wi-Fi下的其他设备(如笔记本、手机)便捷调用主机上的AI模型能力,实现团队或多设备间的AI资源共享。 阅读详情

相关推荐

【GEE实战指南】Python本地API配置避坑与一站式环境搭建

本文详细介绍了Google Earth Engine(GEE)Python本地API的配置避坑指南与一站式环境搭建流程。通过conda创建隔离环境、账户认证关键步骤、初始化代码的正确写法以及实战测试案例,帮助开发者快速掌握GEE Python API的配置技巧,避免常见错误,提升地理空间数据分析效率。

weixin_42624889的博客 187

img、input到底是行内还是块级元素?

一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。 行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和marginleft、right改变宽度。 二、在文档类型定义(DTD)中对不同的元...

weixin_30835933的博客 2407

比亚迪 10C 闪充技术全解析:超高速离子通道与双电子流设计如何颠覆电动车补能格局?

性能碾压主流方案参数宁德时代6C比亚迪10C优势幅度最大电流700A1000A+43%内阻降幅30%50%+67%5分钟补能240公里400公里+67%

百态·数智思维 | 聚焦大数据、量化与未来AI 1122

html中的inline-block(image等)元素为什么不能使用margin:auto

inline-block行内块元素为什么不能使用margin:auto,那么先来了解一下块级元素为什么能使用。 块级元素的水平属性,块级元素在水平方向上有7大属性,margin-left、border-left、padding-left、width、padding-right、border-right和margin-right,这7大属性的值加起来必须是元素包含块的宽度, 这7个属性中,只有3个属性可以设置为auto:margin-left、width、margin-right,其余属性必须设定为特定的值,

qinli15751009359的博客 1556

医疗领域BGE-M3模型微调全流程:从数据准备到效果评估

本文详细介绍了医疗领域BGE-M3模型的微调全流程,从数据准备到效果评估。通过医疗数据微调,BGE-M3模型在临床问答、病历检索等场景中表现显著提升,能够准确理解医学术语之间的细微差别。文章还提供了实战练习代码和效果评估指标,帮助开发者快速掌握医疗文本嵌入模型的应用技巧。

weixin_29098367的博客 282

从FPGA/ASIC工程师视角看DDR:手把手拆解Memory Controller、PHY与DRAM芯片的协作流程

本文从FPGA/ASIC工程师视角深入解析DDR内存子系统,详细拆解Memory Controller、PHY与DRAM芯片的协作流程。通过系统架构分解、接口标准解析和实战调试技巧,帮助工程师优化DDR性能并解决常见问题,涵盖地址映射、命令调度、时序校准等关键技术要点。

weixin_42548888的博客 458

css 给inline和inline-block元素设置margin和padding

经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom。经过测试,margin-top和margin-bottom都没有作用。而设置padding-top以后,元素边框则会向上超出父元素,如下图所示,而不是像正常的块元素一样表现。      而给行内元素加上padding-bot..

liudanyang_21的博客 1004

AGV、RGV、四向车openTCS调度系统(三)车辆适配器解读,封装自己的适配器

AGV、RGV、四向车调度。理解适配器的整体作用,以及如何使用官方例子改造自己的适配器,

要这头发有何用 3613

关于inline/inline-block级别元素的margin属性以及padding属性的一些理解

总的来说,margin和padding属性作为新手入门时常用的属性,很多人都不陌生,相信理解起来都很简单,margin代表外边距,padding代表内边距,至少当时我们老师是这样讲的。 虽然使用起来很简单,但是真正将其实用的又能有多少人,以padding为例,作为一个内边距,就我而言,我会在使用  背景  以及  box-sizing  的时候使用的多,padding-box所占据的无非就是一点...

FuChenRenShen的博客 2713

Python-编写点云处理软件(二)点云软件ui制作之仿CC界面

至本篇结束,我们已经能够获得一个有点模子的界面了,但是具体的功能还没有编写,后续的文章将逐渐完善功能。

weixin_43894929的博客 3953

Linux内核编程(十三)Input输入子系统

Input 子系统是 Linux 内核中专门为输入设备设计的一个子系统,它提供了一个通用的框架来管理各种输入设备,如键盘、鼠标、触摸屏、游戏手柄等。这个子系统的主要目的是简化和规范化输入设备驱动的开发,同时提高驱动的通用性和兼容性。(1)输入设备:如键盘、鼠标、触摸屏、游戏手柄等,它们是用户与计算机进行交互的主要方式。(2)输入设备驱动的复杂性:传统上,为每种输入设备编写驱动都需要创建文件、进行硬件初始化、实现文件操作函数集和处理中断等。每种设备的驱动可能都有许多重复性的工作。

qq_1033275663的博客 2866

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性...

一、各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width、 height、 margin的四个方向、 padding的四个方向都正常显示,遵循标准的css盒模型。例如:div 2.行内替换元素 width、 height、 margin的四个方向、 padding的四个方向都正常显示,遵循标准的css盒模型。 例如:...

weixin_34050389的博客 217

XDMA流传输模式

XDMA 流传输模式(Streaming DMA)​ 是 Xilinx FPGA 通过 PCIe 与主机进行 ​实时流式数据传输 的核心机制,

浩瀚之水的专栏 3435

Web前端之Css的块级元素和行内元素区别、样式、inlinkeBlock、inline、block

Web前端之Css的块级元素和行内元素区别、样式、inlinkeBlock、inline、block

优快云博客主页地址:https://mengjian.blog.youkuaiyun.com/ 929

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

【重识 HTML (6),一次哔哩哔哩面试经历

多个行内级元素可以在父元素的同一行中显示 比如 a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio 等 替换、非替换元素 根据元素的内容类型,HTML元素可以主要分为: 替换元素 (replaced elements) 元素本身没有实际内容,浏览器根据元素的类型和属性,来决定元素的具体显示内容 比如 img、input、iframe、video、embed、canvas、audio、

m0_60229361的博客 148

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

【重识 HTML + CSS】元素类型、display、visibility、overflow

元素类型元素类型块级、行内级元素替换、非替换元素元素的分类总结CSS 属性 - displayinline-block练习 - 邮箱显示与选择练习 - 分页跳转栏CSS属性 - visibilityCSS属性 - overflow 博文集合:【重识 HTML + CSS】知识点目录 元素类型 本章代码:https://gitee.com/szluyu99/html_css_note/tree/master/day06/02-元素类型 块级、行内级元素 根据元素的显示类型,HTML 元素可以主要分为:

萌宅鹿的技术小屋 1314

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

前端基础(行元素、块元素、替换元素以及非替换元素)

行级元素 内联元素也叫内嵌元素或行内元素,一般是基于语义级的基本元素。 特点: 内联元素只能容纳文本或者其他内联元素;一般情况下,很多属性是不可变的(比如宽高、边距等)。 示例: a(锚点) b(粗体) span img input select strong br big small em sub sup i textarea 块级元素 一般是其他元素的容器元素,能容纳其他元素块元素或内联元素 示例:div ul ol li dl(定义列表)

chonyhaha的博客 430

前端新人别再搞混了:块级和行内元素到底差在哪?(附实战避坑指南)

说实话,我到现在都记得自己刚入门前端那会儿,对着一段 HTML 代码发呆的蠢样子。页面上有个 ,里面套了个 ,然后我给 设了个 ,结果啥反应都没有。我当时就懵了——这 CSS 是跟我有仇吗?为什么有的元素听话,有的元素就跟你对着干?后来我才慢慢搞明白,原来这背后藏着一套浏览器用了几十年的"生存法则"。今天咱们就掰开了揉碎了聊聊,块级元素和行内元素这对冤家,到底在搞什么飞机。现在想想,那时候的想法简直天真得可爱。 和 不都是盒子吗?不都是用来包内容的吗?凭啥一个叫"块"一个叫"行内"?这就好比你以为番茄和

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 694

深入CSS

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规...

chuomu8273的博客 245

CSS布局核心(一):文档流——浏览器的“出厂设置”

线在哪?(随手打个字母xxx,看它坐哪,横格线就在哪)。谁在找线?(是有图案的“字”在找线,还是贴纸的“底边”在找线?如果你需要绝对的、不讲情面的机械整齐,请直接放弃这种“手写感”,开启 Flex 布局。

2501_92822955的博客 427

display:inline-block 行内块元素

display:inline-block 行内块元素。(CSS2.1 新增的值) 我觉得效果有点类似float:left;属性

hgg923的专栏 1024

style=“display: inline-block;“

style="display: inline-block;" 处理行内非替换元素的高宽问题: 行内非替换元素,比如duspan、a等标签,正常情况下士不能设zhi置宽高的,加上该属性之后,就可以触发让这类标签表现得如块级元素一样,可以设置宽高。 将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。 ...

qq_41979882的博客 2329

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行。默认情况下,block元素的宽度会填满父元素的宽度。 可以设置width, height属性。但是,即使设置了w...

qq_29069777的博客 208

CSS学习笔记:盒模型

盒模型CSS假定每个元素都会生成一个或多个矩形框。每个框中心都有一个内容区,这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的,原因是它们的宽度可以设置为0。 可以用多种属性设置各外边距、边框和内边距。 内容的背景也会应用到内边距 外边距通常是透明的,从中可以看到父元素的背景 内边距不能是负值,但外边距可以。 边框的颜色如果没有设置,那么将取元素内容的前景色。 如果边框样式有某种

(づ。◕‿‿◕。)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭ 1624

HTML | 行内元素与块级元素你不得不知道的知识点

无论是初学者或者是即将面试的前端工程师,行内元素及块级元素都是非常重要的知识点,在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 (一)块级元素 div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre HTML5:header、section、a...

Errorong的博客 5174

行内元素和块级元素

一、行内元素与块级元素的区别1.块级元素的特点: 总是从新行开始 高度,行高、外边距以及内边距都可以控制。 宽度默认是容器的100% 可以容纳内联元素和其他块元素 2.内联元素的特点: 和相邻行内元素在一行上。 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 默认宽度就是它本身内容的宽度。 内联元素只能容纳文本或则其他内联元素。 常见的块级元素有:div、p、f

OpenWorld1的博客 1956
上一篇: 伪元素/伪类
下一篇: [转载] 使用8种方法实现竖直水平居中
CodingBleeding
博客等级 码龄10年 1粉丝 13原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值