据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
内联元素(行内元素)内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
相关推荐
块级元素和行内元素在 CSS 中的应用 在 CSS 中,我们可以通过设置 display 属性来控制元素的显示方式。例如,我们可以将块级元素设置为行内元素,反之亦然。 块级元素的 display 属性可以设置为 block、inline、...
常见的块级元素有`<div>`、`<p>`(段落)、`<h1>`到`<h6>`(标题)、`<ul>`(无序列表)、`<ol>`(有序列表)和`<li>`(列表项)等。块级元素的特点: - 自动占据整行,即使内容很少,也会独占一行。 - 相邻的块级...
可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...
### CSS文档流与块级元素、内联...理解和掌握CSS文档流以及块级元素与内联元素的概念,对于构建灵活、响应式和语义化的网页布局至关重要。通过合理利用这些元素的特性和CSS属性,可以创建出既美观又实用的网页设计。
当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。 Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以...
块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...
### CSS文档流与块级元素(block)、内联元素(inline)详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前,我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...
理解行内元素和块级元素的差异是前端开发的基础之一。合理利用这些元素可以帮助开发者更好地组织网页结构、控制布局,并最终实现美观且易于维护的网站设计。在实际应用中,开发者还可以结合CSS对这些元素进行更细致...
总的来说,理解和掌握CSS盒模型及块级元素与行内元素的概念,对于创建响应式、灵活的网页布局至关重要。通过熟练运用这些知识,开发者能够精确控制网页元素的外观和交互,从而实现理想的网页设计效果。
在CSS布局中,块级元素(Block Element)和行内元素...总之,了解CSS块级元素和行内元素的特性和交互方式是构建高效网页布局的基础。掌握这些概念有助于更好地控制网页元素的排列和样式,从而实现理想的网页设计效果。
在CSS布局中,行内元素和块级元素的居中处理是常见的需求,尤其是在网页设计中。本篇文章主要探讨了这两种元素的水平居中和垂直居中的实例分析。 一、水平居中 1. **行内元素居中**:对于行内元素(如`<span>`、`...
块级元素可以包含行内元素和其他块级元素,比如常用的、、到、、、、、等都是典型的块级元素。块级元素默认宽度为100%,除非通过CSS进行宽度控制。 行内元素(inline element),也称为内联元素,特点是它们不会...
一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行内元素不能包含...
* `div`:常用块级元素,也是 CSS 布局的主要标签 * `dl`:定义列表元素,用于显示定义列表 * `fieldset`:表单控制组元素,用于将表单控件分组 * `form`:交互表单元素,用于创建表单 * `h1-h6`:标题元素,用于...