为什么有些行内元素可以设置宽高

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。

1. 替换和不可替换元素

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

a) 替换元素

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

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

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

[html] view plain copy

  1. <img src=”cat.jpg” />
  2. <input type="submit" name="Submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素

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

[html] view plain copy

  1. <p>段落的内容</p>

段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

2. 显示元素

除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。

a) 块级元素

在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。

典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。

通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。

但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。

b) 行内元素

行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。

不过元素的类型也不是固定的,通过设定CSS 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。

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

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

时间: 2024-10-15 02:08:56

为什么有些行内元素可以设置宽高的相关文章

行内元素能设置宽高吗

除了行内非替换元素,table-rows,and row groups 其他元素都能设置宽 除了行内非替换元素,table-colums,colum-groups 其他元素都能设置高 行内元素包含行内替换元素(img等)和行内非替换元素(a span等) 行内替换元素是可以设置宽高的,行内非替换元素是不能设置宽高的. 当给行内元素设置 float:left; float:right; 或者 position:absolute; position:fixed; 行内非替换元素也是可以设置宽高的,究

可替换元素—行级元素可以设置宽高?

上篇文章讲的是行级元素与块级元素,明明说了行级元素不可设置width,height属性,而为何img.input等行级元素可以设置宽.高??? 看官莫急,下面我会详细解答. 可替换元素 1. 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而 如果查看(X)HTML代码,则看不到图片的实际内容:又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等. 2. 他们区别一般i

水平居中——行内元素、定宽块、不定宽块

声明:来自http://www.imooc.com/learn/9 学习 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 定宽块状元素 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的. 1 margin:0 auto; 不定宽块状元素 不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多): 加入 table 标签 设置 display;inline 方法 设置 po

行内元素可以设置padding和margin吗

第一:行内元素与宽度宽度不起作用span {width:200px;}没有变化 第二:行内元素与高度高度不起作用span{height:200px;}没用变化 第三:行内元素与padding,marginspan{padding:200px;}影响左右,不影响上下 行内元素(inline-block)的padding左右有效 ,但是由于设置padding上下不占页面空间,无法显示效果,所以无效.其margin-top和padding-bottom上下会合并,所以不建议使用. 原文地址:http:

关于行元素可以设置宽高的那些事

CSS:haslayout知多少 我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 因为布局是专门针对显示引擎内部工作方式的概念,所以一般情况下不需要了解它.但是,布局问题是许多IE显示bug的根源,所以理解这个概念以及它如何影响CSS对修复bug是有帮助的. 一.什么是haslayout haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分.

HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别

1.行内元素 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> <head> <meta charset="utf-8" /> <title>行内元素</title> <style type="text/css"> span { width: 120px; /*设置宽高无效*/ height

内联(行级)元素不能设置margin-top

内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性.如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素.

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

一.行内元素和块级元素的区别 1. 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列: 块级元素会占据一行,垂直方向排列. 2. 块级元素可以包含行内元素和块级元素:行内元素不能包含块级元素. 3. 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 二.行内元素和块级元素的相互转换 行内元素转化为块元素: display:block; 块元素转化为行内元

深度理解CSS中块级元素与行内元素的区别(个人易错点)

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ