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

最新推荐文章于 2024-05-06 21:49:54 发布
最新推荐文章于 2024-05-06 21:49:54 发布
阅读量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
    评论
为何img、input等内联元素可以设置宽高
09-27
本文主要介绍了img、input等内联元素可以设置宽高的原理，具有很好的参考价值，下面跟着小编一起来看下吧
元素类型
猫沙盆
04-13 3303
元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。  1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素替换元素
为什么img标签是inline元素还可以设置宽高？
weixin_42051913的博客
04-23 4640
之前刷面试题，看到一道题目 如题！？惊到了，以前写代码怎么没注意到这样的细节 (￣▽￣)" 真是才疏学浅了。 参考：可替换元素 - CSS：层叠样式表 | MDN img默认display: inline 原来CSS中还有一个概念：可替换元素 MDN上是这么解释的： 在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一...
img等行内元素为什么可以设置宽高
qq_36233876的博客
08-02 1517
一般来说行内元素是没法为其设置宽高的，但身为行内元素的img为什么却可以设置宽高？ 经查阅资料发现，img属于可替换元素，在css中可替换元素的展示效果是不由css来控制的 可替换元素是一种外部对象，它们外观的渲染，是独立于css的。 css可以影响这些元素的位置但是不能影响元素本身的样式（但是css里面设置宽高也可以 映射到img上，可能是继承了父文档的样式，问题先保留，以后有空了再研究） 可替换元素有 iframe video embed(嵌入元素，大部分浏览器已弃用) img 有些元素仅在特定情况
浅谈为何img、input等内联元素可以设置宽高
筱葭的博客
05-12 1506
1、CSS中元素的分类方式主要有两种： 1) 替换元素和不可替换元素 ①　替换元素 浏览器根据元素的标签和属性，来决定元素的具体显示内容。 eg1：浏览器根据标签的src属性的值来读取图片信息并显示。 eg2：浏览器根据标签的type属性来决定显示输入框的类型。 、、、等都是替换元素。 可替换元素往往没有实际的内容，即是一个空元素。 ②　不可替换元素 大多数元素是不可替换元素，其
为什么在input中加了display:inline;再加宽，还有作用？
weixin_33946605的博客
06-01 148
以前一直一位input是个行内元素，但是，行内元素的特性就是没有宽高的概念，元素多高，多宽，全凭内容撑起来的。 但是今天写了个demo,用chrome控制台显示：display:inline-block。 但是给label和input同时加上宽度和高度，input的高宽居然变了，但是奇怪的是在IE6.0下居然也生效，IE6.0不是不支持inline-block么？demo如下： &l...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
③宽高 高度 外边距 内边距可以控制（块级元素特点） 元素显示模式的转换 （1）行内元素转块级元素 display：block；√ （2）块级元素转换为行内元素 display：inline； （3）行内块 元素 display：inline-block√...
mainshi:前端面试测试
04-28
2. 常用元素类型有那些​行内元素（inline）：​不能设置宽高，不会自动换行。有：a,img,span,input,i,select(下拉标签)等。​块级元素（block）：​最常见的标签，常用作其他元素的容器，会自动换行，多个块元素会...
前端面试题及答案整理(二)
01-19
常见内联元素（行内元素）有a、b、span、i 、em、input、select 、img等 常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等 2 浮动相关 浮动布局指将元素脱离普通流/文档流，使其可以左右移动，直至它的外...
程序员面试刷题的书哪个好-html:前端开发工程师面试题
07-07
程序员面试刷题的书哪个好 ... span默认display属性值为“inline”，是“行内”元素。  　（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 
img是inline元素
Melissa的博客
04-20 1457
img是inline元素，但是他同时也是replace元素，他有着特殊的表现：    1. 可以设置width/height;     2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置    3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到
input标签和button放在一行写:inline元素的空白间隙问题
qq_38874697的博客
11-25 778
问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行，类似如下的效果: 我的css设置如下： .same{ padding: 0; margin: 0; box-sizing: border-box; border: 0; height: 30px; }...
CSS特性
lan_da_wang的博客
04-29 381
化简代码，定位问题，解决问题。
c3 笔记7 css基本语法
weixin_63492023的博客
05-02 543
单位pt与px的差别pt是印刷使用的字号单位，不管屏幕分辨率是多少，打印到纸上看起来都是相同的，lot的长度是0.01384英寸，相当于1/72英寸，我们常用的Word软件设置的字号就是以pt为单位；而px是屏幕使用的字号单位，px能够精确地表示组件在屏幕中的位置与大小，不管屏幕分辨率怎么调整，网页版面都不会变化太大，但是打印到纸面上时，就可能有差异，然而网页的目的是为了屏幕浏览，因此CSS大多会选择以px为单位。letter-spacing用来设置字符与字符的间距，输入负值，字符间距就会变得紧密。
特别的时钟：上次那个时钟布局和计算有问题，重新修改一下，用JS创建180多个li标签，自动生成数字
lulei5153的博客
04-29 200
【代码】特别的时钟：上次那个时钟布局和计算有问题，重新修改一下，用JS创建180多个li标签，自动生成数字。
【CSS】基础
2301_79765510的博客
04-28 537
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.声明的属性是键值对. 使用;区分键值对, 使用 : 区分键和值.层叠样式表 (Cascading Style Sheets).选择器 + {一条/N条声明}选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)
Vue 插槽
体系化很难，碎片归纳很简单。
05-06 394
Vue插槽是一种特殊的语法，用于在组件中定义可复用的模板部分。它允许开发者在组件的标记中声明一个或多个插槽，然后在使用该组件时，可以根据自己的需求将内容插入到这些插槽中。Vue插槽分为默认插槽和具名插槽两种。
前端科举八股文-CSS篇
星海拾遗
04-25 1150
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
CSS悬浮动画
最新发布
L_Y_J_21的博客
05-06 97
【代码】CSS悬浮动画。
html5中block inline inline-block元素？将标签全部列举出来，是全部
06-03
好的，下面是HTML5中常见的block，inline和inline-block元素以及它们的标签： block元素： - div：用于组合其他HTML元素的容器。 - p：用于表示段落。 - h1-h6：用于表示标题，h1为最高级别的标题，h6为最低级别的标题。 - ul和ol：分别用于表示无序列表和有序列表。 - li：用于表示列表中的每一项。 - dl、dt和dd：分别用于表示定义列表、定义项目和定义描述。 - table：用于表示表格。 - tr：用于表示表格中的行。 - td和th：分别用于表示表格中的单元格和表头单元格。 - form：用于表示表单。 - header：用于表示页面或章节的标题。 - nav：用于表示页面中的导航链接。 - section：用于表示页面中的章节。 - article：用于表示页面中的文章或独立内容块。 - aside：用于表示页面中的侧边栏或次要内容块。 - footer：用于表示页面或章节的页脚。 - main：用于表示页面主要内容。 inline元素： - span：用于分组HTML元素，通常用于通过CSS进行样式控制。 - a：用于表示链接。 - img：用于表示图片。 - strong和em：分别用于表示加粗和斜体的文本。 - input：用于表示用户输入框，如文本框、单选框等。 - button：用于表示按钮。 - label：用于表示表单标签。 - select：用于表示下拉菜单。 - option：用于表示下拉菜单的选项。 - textarea：用于表示多行文本输入框。 - bdo：用于表示文字方向。 - code：用于表示计算机代码。 - time：用于表示时间或日期。 - small：用于表示小号文本。 - sub和sup：分别用于表示下标和上标。 inline-block元素： - input：用于表示用户输入框，如文本框、单选框等。 - button：用于表示按钮。 - textarea：用于表示多行文本输入框。 - select：用于表示下拉菜单。 - img：用于表示图片。 - label：用于表示表单标签。 - progress：用于表示进度条。 - meter：用于表示度量值的范围和比例。 - video：用于表示视频文件。 - audio：用于表示音频文件。 - iframe：用于表示内嵌框架。 - details和summary：分别用于表示可展开的详细信息和概要。 - figure和figcaption：分别用于表示媒体对象和它们的标题。 - output：用于表示计算结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值