为什么img input标签是inline元素还可以设置宽高

最新推荐文章于 2022-08-12 22:03:53 发布
最新推荐文章于 2022-08-12 22:03:53 发布
阅读量1k 收藏 4
点赞数 4
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WANGHONGP/article/details/107714625
版权

涉及到一个概念：可替换元素
可替换元素比如img input等
它们的内容不受当前文档的样式的影响
CSS 可以影响他们的位置，但不会影响到内容

他们的内容都不是通过在标签内添加文本，而是通过某个属性（比如src、data、label或js控制）来显示内容的

可替换元素拥有内置宽高，他们可以设置width和height。
他们的性质同设置了display:inline-block的元素一致。
所以img是inline元素但是可以设置宽高

头冷少女
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
IT修真院：初学者转行到互联网的聚集地
05-21 1260
这里是修真院前端小课堂，本篇分析的主题是 【常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？】 大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什...
为何img、input等内联元素可以设置宽高
09-27
本文主要介绍了img、input等内联元素可以设置宽高的原理，具有很好的参考价值，下面跟着小编一起来看下吧
元素类型
猫沙盆
04-13 3312
元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。  1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素替换元素
为什么img标签是inline元素还可以设置宽高？
weixin_42051913的博客
04-23 4712
之前刷面试题，看到一道题目 如题！？惊到了，以前写代码怎么没注意到这样的细节 (￣▽￣)" 真是才疏学浅了。 参考：可替换元素 - CSS：层叠样式表 | MDN img默认display: inline 原来CSS中还有一个概念：可替换元素 MDN上是这么解释的： 在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一...
img等行内元素为什么可以设置宽高
qq_36233876的博客
08-02 1593
一般来说行内元素是没法为其设置宽高的，但身为行内元素的img为什么却可以设置宽高？ 经查阅资料发现，img属于可替换元素，在css中可替换元素的展示效果是不由css来控制的 可替换元素是一种外部对象，它们外观的渲染，是独立于css的。 css可以影响这些元素的位置但是不能影响元素本身的样式（但是css里面设置宽高也可以 映射到img上，可能是继承了父文档的样式，问题先保留，以后有空了再研究） 可替换元素有 iframe video embed(嵌入元素，大部分浏览器已弃用) img 有些元素仅在特定情况
浅谈为何img、input等内联元素可以设置宽高
筱葭的博客
05-12 1530
1、CSS中元素的分类方式主要有两种： 1) 替换元素和不可替换元素 ①　替换元素 浏览器根据元素的标签和属性，来决定元素的具体显示内容。 eg1：浏览器根据标签的src属性的值来读取图片信息并显示。 eg2：浏览器根据标签的type属性来决定显示输入框的类型。 、、、等都是替换元素。 可替换元素往往没有实际的内容，即是一个空元素。 ②　不可替换元素 大多数元素是不可替换元素，其
行内元素img竟然可以设置宽高！
Schrodingers_Shiba的博客
10-11 3026
今天写静态页面时发现，img在限时模式设置为inline的时候，设置的宽度竟然还能生效。 原来img既是行内元素 又是置换元素（Replaced element） 。 所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容； 另外input select textare...
css中使input输入框与img(图片)在同一行居中对齐
09-25
在这个例子中，我们首先为img元素设置了`vertical-align: middle`，然后为input元素设置了相同的属性，并调整了其他相关样式，如宽度、高度、行高、内边距、外边距和边框，以确保输入框的外观符合预期。 2. 使用更...
使用vertical-align实现input和img对齐
09-28
如果`input`和`img`被包裹在一个行内元素（如`<span>`）或表格单元格中，那么需要确保这些容器元素的`display`属性设置为`inline-block`或者`table-cell`，以便`vertical-align`属性生效。 此外，有时候`vertical-...
为什么在input中加了display:inline;再加宽，还有作用？
weixin_33946605的博客
06-01 159
以前一直一位input是个行内元素，但是，行内元素的特性就是没有宽高的概念，元素多高，多宽，全凭内容撑起来的。 但是今天写了个demo,用chrome控制台显示：display:inline-block。 但是给label和input同时加上宽度和高度，input的高宽居然变了，但是奇怪的是在IE6.0下居然也生效，IE6.0不是不支持inline-block么？demo如下： &l...
inline元素也能设置宽高了？
weixin_39031806的博客
03-18 1244
标题有点误导，真正意义上的inline元素是不可以设置宽高等属性的。 那么我们也知道，img属于inline元素，那么为何img可以设置宽高呢？ 这就涉及到了另一个知识点，可替换元素。 可替换元素：可替换元素的展示效果不是由CSS来控制的。内部元素是被某些资源替换掉，具备inline-block属性。 常见的可替换元素 <iframe> <img> <vid...
img是inline元素
Melissa的博客
04-20 1507
img是inline元素，但是他同时也是replace元素，他有着特殊的表现：    1. 可以设置width/height;     2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置    3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到
input标签和button放在一行写:inline元素的空白间隙问题
qq_38874697的博客
11-25 861
问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行，类似如下的效果: 我的css设置如下： .same{ padding: 0; margin: 0; box-sizing: border-box; border: 0; height: 30px; }...
html中img标签特性及块元特性
weixin_46349935的博客
08-12 1328
1、行内元素：a img span b strong input select section。度如果不设置,默认为父元素的宽**(父元素宽度100%)** 父元素的高度不继承。2、块级元素：div p table ul ol li h1-h6 dl dt。2.元素高度,宽度,行高,和等边距都可以设置。,可以自由设置宽高,这种内容可替换的元素。1.img不会独占一行,一行可以放多个。1.每一个块级元素都是独占一行;2.img是行元素,但具有。...
＜img＞标签可设置宽高及可替换元素
平平无奇小码农的博客
03-18 2167
文章目录前言1、< img >是可替换元素2、什么是可替换元素 前言 为什么img标签是行内元素，但是却可以设置它的宽高 1、< img >是可替换元素 <img>是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为 <img> 标签设置 border/border-radius、padding/margin、width、height 等
前端面试——css篇（部分）
weixin_43912081的博客
09-20 165
1、inline-block、inline和block的区别；为什么img是inline还可以设置宽高 Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。 Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符 Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符 2、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档
魅族面试的一个问题，img是行内元素，为什么也可以设置框高？
热门推荐
kingliguo的博客
09-23 1万+
1.魅族一面面试官问我一个问题，img是什么元素？ 我第一反应是行内元素。判断一个元素是行内元素，还是块元素，无非就是看它是否是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。 2.接下来，面试官又问，既然img是行内元素，那为什么可以通过CSS设置框高呢？ 这一问，给我问住了，确实之前没有想过这个问题，翻了一下资料，大概比较好的解释就是: 尽管img是行内元素，
img为啥可以设置宽高？
蔻蔻
08-02 6888
今天写作业 发现 img明明是行内元素 为什么可以设置宽高啊  我还以为是我记错了 img不是行内元素。 img确实是行内元素 但它也是置换元素 。 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容； 又例如根据标签的type属性来决定是显示输入框，
html5中block inline inline-block元素？将标签全部列举出来，是全部
最新发布
06-03
好的，下面是HTML5中常见的block，inline和inline-block元素以及它们的标签： block元素： - div：用于组合其他HTML元素的容器。 - p：用于表示段落。 - h1-h6：用于表示标题，h1为最高级别的标题，h6为最低级别的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值