`

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

    博客分类:
  • css
 
阅读更多

一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。
      行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。

 

二、在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。

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

不可替换元素

(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

如:<h1>我是标题</h1>

 替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素。

如:<img src="tigger.jpg"/>

     <input type="submit" name="Submit" value="提交"/>

替换元素一般有内在尺寸,所以具有width和height,可以设定。例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度。

对于表单元素,浏览器也有默认的样式,包括宽度和高度。

分享到:
评论

相关推荐

    html中的行内元素和块级元素有哪些.pdf

    HTML中的行内元素和块级元素 在 HTML 中,元素可以分为两大类:行内...需要注意的是,块级元素的宽度会继承其父元素,但只有为行内元素设置 display:block; 才会有这样的效果,其他转换之后并不会默认带来这个效果。

    行内元素和块级元素 displayDemo.html

    例如`&lt;a&gt;`(超链接)、`&lt;span&gt;`、`&lt;b&gt;`(粗体)、`&lt;i&gt;`(斜体)、`&lt;img&gt;`(图像)和`&lt;input&gt;`(表单元素)等。行内元素的特点包括: - 不会占据整行,只占用自身内容所需的空间。 - 相邻的行内元素可以并排显示,...

    关于块级元素和行内元素

    行内元素是指只占据自身宽度的元素,它们不能包含其他元素,例如 a、span、img、input 等。行内元素的特点是: * 只占据自身宽度 * 不能包含其他元素 * 只能设置水平方向的 margin 和 padding 常用的行内元素包括...

    行内块级元素.txt

    ### 行内与块级元素概述 在HTML中,元素主要分为两大类:块级元素和行内元素。这两种类型的元素具有不同的显示特性和布局方式,掌握它们的区别对于编写高效且美观的网页至关重要。 #### 块级元素 块级元素(Block...

    全面了解行内元素与块级元素的区别

    常见的行内元素包括, , &lt;img&gt;, &lt;input&gt;, , , , , , 等。行内元素的宽度和高度会根据内容自动调整,因此一般不能直接设置宽度和高度。但是可以设置行高(line-height)和左右的外边距(margin)以及内边距(padding)。...

    对行内元素和块级元素的一些认识

    一、常见块级元素有哪些: button,div , dl ,dt ,form , h1 ,h2 ,h3 , h4 ,h5 ,hr ,li ,ul ,table系列,button; 二、常见行内元素有哪些: img ,a ,input ,textarea ,b ,br ,span, select ,label ,map ,strong ; 三...

    css中行内元素和块级元素的区别

    此外,`display: inline-block`还可以创建一种“行内块级元素”,它结合了行内元素和块级元素的特性,可以在一行内显示,同时可以设置宽高和内外边距。 5. **总结** CSS中的行内元素和块级元素是网页布局的基础,...

    详解HTML常用的标签中行内元素和块级元素

    块级元素和行内元素的不同主要体现在它们的布局方式上,以及如何与周围的元素交互。 首先,块级元素(block element)的特性是它们会独占一行显示,其后自动换行,好像一个盒子一样,占据一整行空间。块级元素可以...

    《网友设计与开发》中块元素与行内元素详解

    块元素是指占据一整行空间的元素,而行内元素是指只占据所需空间的元素。下面我们将对块元素和行内元素进行详细的介绍。 块元素(block element) 块元素是指占据一整行空间的元素。块元素通常具有以下特点: * ...

    CSS块级元素与行级元素详解

    此外,还有内联块级元素(Inline-block Elements),如`&lt;img&gt;`和`&lt;button&gt;`,它们既有内联元素的特性(在同一行内显示),又有块级元素的特性(可以设置宽度和高度)。 在HTML5中,引入了一些新的元素,如`&lt;header&gt;...

    为何img、input等内联元素可以设置宽高

    总的来说,img和input等内联元素可以设置宽高的原因在于它们的替换元素特性以及CSS中对行内元素的宽高处理规则。这种灵活性允许开发者在保持文本流的同时,调整这些元素的视觉效果,从而实现更加精致和多样化的网页...

    css中display如何使用.docx

    而`img`元素则显示为蓝色背景的行内块级元素,可以设置其宽高并与其他行内元素并排。 总结来说,`display`属性是CSS中控制元素布局的关键工具,理解并熟练运用这些不同的值,可以帮助开发者实现复杂的网页布局和...

    web前端笔试题(含答案).doc

    答:行内元素(a、b、span、img、input、select、label、em、button、textarea)在一条直线上排列,都是同一行的,水平方向排列。块级元素(div、ul、li、dl、dt、dd、p、h1-h6)各占据一行,垂直方向排列。块级元素...

    前端开发面试题2.pdf

    行内元素有:a, b, span, img, input, select, strong(强调的语气) 块级元素有:div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4… 3. CSS 盒模型? CSS 盒模型是指将 HTML 元素看作一个装了东西的盒子,盒子里面...

    浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

    `可能无效,除非将行内元素转换为块级或行内块级。 了解这些基本概念对于理解和创建响应式的HTML页面至关重要。通过灵活运用不同的显示模式和CSS属性,开发者可以实现丰富的网页布局和设计效果。在编写HTML时,合理...

    替换元素与非替换元素

    值得注意的是,通过CSS的`display`属性,可以改变元素的默认行为,使得替换元素表现得像非替换元素,或者让块级元素和行内元素互相转换,这为网页设计提供了极大的灵活性。例如,将一个`&lt;div&gt;`的`display`属性设为`...

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    行内块级元素是指同时具有块级元素和行内元素的特性,例如input、button等。 CSS基础三大特性: 三大特性是指CSS的三个基本特性:继承、层叠和优先级。 1. 继承: 继承是指子元素从父元素继承样式。 2. 层叠: ...

    HTML 80 道面试题及答案.docx

    常见的空元素有 br、hr、img、input、link 等。 8. link 标签定义 link 标签定义文档与外部资源的关系。link 元素是空元素,它仅包含属性。此元素只能存在于 head 部分,不过它可出现任何次数。link 标签中的 rel ...

Global site tag (gtag.js) - Google Analytics