块级元素和块元素，行内级元素和行内元素 ，置换元素与非置换元素 （img是行内元素，但是可以设置高度，因为他本身具有一定的高度和宽度，是置换元素，所以可以设置高度和宽度）

最新推荐文章于 2023-03-16 15:42:52 发布
最新推荐文章于 2023-03-16 15:42:52 发布
阅读量670 收藏 2
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/claudia_dawn/article/details/52413885
版权

1. 什么是块级元素？

块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性的：block, list-item, table, flex, grid 值都可以将一个元素设置成块级元素。

举个例子来说，li 是一个 块级元素，但也有人会说它是一个 块元素。嗯，li 确实是一个块级元素，但并不是一个块元素，为什么？

2. 什么是块元素？

块元素是 display 属性值为 block 的元素，它应该是 块级元素 的一个子集，而不是等同的，一个 块元素 是一个 块级元素，但一个 块级元素 不一定是一个 块元素，所以不要混淆。

3.什么是行内级元素？

行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素。display 属性的：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以将一个元素设置成行内级元素。

4.什么是行内元素？

如同块元素之于块级元素的关系，行内元素仅仅是 display 属性值为 inline 的元素，这里不再赘述。

5：置换元素和非置换元素

http://blog.doyoe.com/2015/03/15/css/%E7%BD%AE%E6%8D%A2%E5%92%8C%E9%9D%9E%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0/

claudiaWarm
关注
专栏目录
html 置换元素和非置换元素
skysys的研究小屋
11-09 682
什么是行内元素？什么是块级元素？ 一般我们都会答：行内元素不能设置宽高，不会新起一行，行内元素只能包含数据或者行内元素，不能设置上下margin等等。块级元素当然，能够新起一行，能够设置宽高，margin，并且可以包含块级元素，行内元素和数据。 好的，没问题，那么再问： img是行内元素吗？马上回答，是的。 那么img能够设置宽高吗？有点基础的都会说可以吧，但是等等，上面说过什么了，行内元素不是不能设置宽高吗？？？ 所以选择闭嘴了… 其实这里就牵扯到置换元素和非置换元素。 置换元素官方w3c解释： “An
CSS | 置换元素（可替换元素）
MGsniper的博客
01-23 5245
置换元素是一类CSS格式渲染时只知道其固有尺寸（intrinsic dimensions）的元素，通常，浏览器根据元素的标签和属性，来决定元素的具体显示内容。
行内元素和块状元素的区别以及特列--img是行内元素，但是可以设置宽高。
Handsome2013的博客
05-10 807
我们习惯将html中元素分类为行内元素和块级元素，如下： ·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等； ·常见行内元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等
微信内置浏览器动态生成二维码并长按识别
全栈道路
06-07 1839
现如今围绕微信生态相关开发已经非常常见，本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存 说几个知识点 微信长按弹出识别选项的原理 微信客户端检测到用户长按img标签微信主动进行截屏并识别图片，二维码识别采用的是截屏而不是通过img标签微信识别成功后执行相关操作 Base64 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法.
img是行元素还是块元素
最新发布
weixin_43465508的博客
03-16 3737
img属于行内可替换元素，height、width、padding、margin均可用，效果 html5的img不是块级元素。img、input、textarea、select、object 都是替换元素。这些元素往往没有实际的内容，即是一个空元素。可替换元素的性质同设置了display:inline-block的元素一致。又因为img是可替换元素，具有独立的宽高，宽高就是图片本身的宽高。浏览器根据元素的标签和属性，来决定元素的具体显示内容，src:源属性,源属性的值是图像的 URL 地址。
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）
zhouzuoluo的博客
07-16 9724
我们习惯将html中元素分类为行内元素和块级元素，如下：·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；·常见行内元素有：span、a、img、textarea、button、input、br、label、selec...
img标签和p标签是行内元素还是块级元素？以及p标签中可以放img标签吗？
热门推荐
吴冬雪的博客
05-21 2万+
其他块级元素：常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table另外还有：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir、块级元素，默认宽度占满一行。HTML 是段落标签，除了可以添加文字内容外，完全可以添加其他。类似于 inline-block ，可以被p标签包裹。比如p是居中，图片也中了。也包括IMG图片标签。
html中的行内元素和块级元素有哪些.pdf
05-08
在 HTML 中，元素可以分为两大类：行内元素（inline element）和块级元素（block element）。这两种元素在布局和样式上有着很大的不同。 行内元素（inline element） 行内元素是指在一行中可以与其他元素共存的...
CSS | 盒类型 与 display 显示属性
MGsniper的博客
01-23 719
文章目录前言盒类型1.块级元素与块盒1.1块级匿名盒2.行内元素与行盒2.1行内匿名盒display 属性 前言 本文重点讲述CSS 2.1规定的盒类型，以及相应的display属性。flex，grid等CSS3内容会另开新篇。 盒类型 1.块级元素与块盒 1.1块级匿名盒 2.行内元素与行盒 2.1行内匿名盒 display 属性 inline block inline-block none ...
CSS元素类型
weixin_52032313的博客
03-02 784
CSS元素类型
块元素 、行内元素、置换元素 、非置换元素
meimeilive的专栏
07-26 1036
搬砖~ 块元素 块级元素前后会单独换行 块级元素可设置width,height,margin,padding属性有效 可以容纳行内元素和其他块元素，<form>只能容纳其他块元素 块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。块级元素即使设置了宽度,仍然是独占一行...
html替换和不可替换元素
linda_417的博客
07-20 1212
从元素本身的特点来讲，可以分为替换和不可替换元素。 1、替换元素 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 (X)HTML中的img、input、textarea、se
html css笔试题答案,html+css笔试附答案
weixin_34539480的博客
06-05 1455
里面的题目都是有标准答案的,希望能给大家带来帮助,感谢大家的阅读。正确答案：C82、 给边框加1px蓝色实线的是( )A、b order:1px dashed blue;padding:1px solid blue; B、C、b order: 1px solid blue;D、p adding: 1px dashed blue;正确答案：C83、 下面关于CSS的说法不正确的有( )A、C SS...
HTML5考试题（二）
HAI6545的博客
12-18 5663
一、单选题（共30题，每题2分） 1.何时使用margin值描述错误的是 A需要在border外侧添加空白 B需要在border内侧添加空白 C两个盒子上下外侧之间的空白 D两个盒子左右外侧需要空白时 正确答案: B 解析:margin外边距，B项描述是内填充padding 2.关于文本溢出属性描述错误的是? Ahidden:内容会被修剪,并且其余内容是不可见的 Bscroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容 Cinherit:规定不能继承父元素overflo
什么时候用MARGIN和PADDING
zach90的博客
06-01 826
1.背景介绍日常使用中盒子模型是一个绕不开的话题，margin和padding都是用来产生空间，它们两个之间还是存在一些差别，这些差别表现在不同的使用方面。The CSS margin properties are used to generate space around elements. The margin properties set the size of the white spac...
img标签到底是行内元素还是块级元素
Cangjie627的博客
01-15 687
面试官问你<img>是什么元素时你怎么回答写这篇文章源自我之前的一次面试，题目便是问img标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，面试官追问为什么能够设置 <img /> 标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。阅读本文您将收获<img />标签的基本使用MDN关于元素的定义特殊的可替换...
四大浏览器内核
08-03 831
转自：http://lanhy2000.blog.163.com/blog/static/4367860820081115105452943/ 目前世界上主要有来自四个不同机构的四种的Web浏览器内核，分别是和IE搭配的Trident、和Firefox搭配的Gecko、和Safari搭配的WebKit以及跟Opera搭配的Presto。 目前世界上主要有来自四个不同机构的四种的We
img是行内元素，为什么也可以设置框高？
BigDaddy233333的博客
11-17 1457
尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。 那么什么又是“置换元素”呢？ 置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。 比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素  ...
学习笔记——关于HTML（含HTML5）的块级元素和行级（内联）元素总结
weixin_30278237的博客
08-18 281
1.首先我们要知道什么是块级元素和行级（内联）元素? 块级（block）元素的特点： ①总是在新行上开始； ②高度，行高以及外边距和内边距都可控制； ③宽度缺省是它的容器的100%，除非设定一个宽度； ④它可以容纳内联元素和其他块元素。 内联（inline）元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变...
深入解析CSS中的块级元素与行内元素
"深入理解CSS中的块级元素与行内元素" 在CSS编程中，了解块级元素（Block Elements）和行内元素（Inline Elements）是非常基础且重要的概念。这两个概念构成了网页布局的基础，帮助开发者控制网页元素的排列方式。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值