一、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中的行内元素和块级元素 在 HTML 中,元素可以分为两大类:行内...需要注意的是,块级元素的宽度会继承其父元素,但只有为行内元素设置 display:block; 才会有这样的效果,其他转换之后并不会默认带来这个效果。
例如`<a>`(超链接)、`<span>`、`<b>`(粗体)、`<i>`(斜体)、`<img>`(图像)和`<input>`(表单元素)等。行内元素的特点包括: - 不会占据整行,只占用自身内容所需的空间。 - 相邻的行内元素可以并排显示,...
行内元素是指只占据自身宽度的元素,它们不能包含其他元素,例如 a、span、img、input 等。行内元素的特点是: * 只占据自身宽度 * 不能包含其他元素 * 只能设置水平方向的 margin 和 padding 常用的行内元素包括...
### 行内与块级元素概述 在HTML中,元素主要分为两大类:块级元素和行内元素。这两种类型的元素具有不同的显示特性和布局方式,掌握它们的区别对于编写高效且美观的网页至关重要。 #### 块级元素 块级元素(Block...
常见的行内元素包括, , <img>, <input>, , , , , , 等。行内元素的宽度和高度会根据内容自动调整,因此一般不能直接设置宽度和高度。但是可以设置行高(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 ; 三...
此外,`display: inline-block`还可以创建一种“行内块级元素”,它结合了行内元素和块级元素的特性,可以在一行内显示,同时可以设置宽高和内外边距。 5. **总结** CSS中的行内元素和块级元素是网页布局的基础,...
块级元素和行内元素的不同主要体现在它们的布局方式上,以及如何与周围的元素交互。 首先,块级元素(block element)的特性是它们会独占一行显示,其后自动换行,好像一个盒子一样,占据一整行空间。块级元素可以...
块元素是指占据一整行空间的元素,而行内元素是指只占据所需空间的元素。下面我们将对块元素和行内元素进行详细的介绍。 块元素(block element) 块元素是指占据一整行空间的元素。块元素通常具有以下特点: * ...
此外,还有内联块级元素(Inline-block Elements),如`<img>`和`<button>`,它们既有内联元素的特性(在同一行内显示),又有块级元素的特性(可以设置宽度和高度)。 在HTML5中,引入了一些新的元素,如`<header>...
总的来说,img和input等内联元素可以设置宽高的原因在于它们的替换元素特性以及CSS中对行内元素的宽高处理规则。这种灵活性允许开发者在保持文本流的同时,调整这些元素的视觉效果,从而实现更加精致和多样化的网页...
而`img`元素则显示为蓝色背景的行内块级元素,可以设置其宽高并与其他行内元素并排。 总结来说,`display`属性是CSS中控制元素布局的关键工具,理解并熟练运用这些不同的值,可以帮助开发者实现复杂的网页布局和...
答:行内元素(a、b、span、img、input、select、label、em、button、textarea)在一条直线上排列,都是同一行的,水平方向排列。块级元素(div、ul、li、dl、dt、dd、p、h1-h6)各占据一行,垂直方向排列。块级元素...
行内元素有:a, b, span, img, input, select, strong(强调的语气) 块级元素有:div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4… 3. CSS 盒模型? CSS 盒模型是指将 HTML 元素看作一个装了东西的盒子,盒子里面...
`可能无效,除非将行内元素转换为块级或行内块级。 了解这些基本概念对于理解和创建响应式的HTML页面至关重要。通过灵活运用不同的显示模式和CSS属性,开发者可以实现丰富的网页布局和设计效果。在编写HTML时,合理...
值得注意的是,通过CSS的`display`属性,可以改变元素的默认行为,使得替换元素表现得像非替换元素,或者让块级元素和行内元素互相转换,这为网页设计提供了极大的灵活性。例如,将一个`<div>`的`display`属性设为`...
行内块级元素是指同时具有块级元素和行内元素的特性,例如input、button等。 CSS基础三大特性: 三大特性是指CSS的三个基本特性:继承、层叠和优先级。 1. 继承: 继承是指子元素从父元素继承样式。 2. 层叠: ...
常见的空元素有 br、hr、img、input、link 等。 8. link 标签定义 link 标签定义文档与外部资源的关系。link 元素是空元素,它仅包含属性。此元素只能存在于 head 部分,不过它可出现任何次数。link 标签中的 rel ...