CSS的块元素、内联元素和可变元素有哪些？

淩亂°似流年 2022-08-06 00:10 220阅读 0赞

>   
> 
> 
> 块元素(block element)和[内联元素][Link 1](inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让他也有每次都从新行开始的属性即成为块元素同样我们可以把块元素加上display:inline这样的属性，让他也在一行上排列。
> 
>   
> 
> 
> **block元素的特点：**
> 
> ①总是在新行上开始；
> 
> ②高度，行高以及外边距和内边距都可控制；
> 
> ③宽度缺省是它的容器的100%，除非设定一个宽度。
> 
> ④它可以容纳内联元素和其他块元素
> 
> **inline元素的特点：**
> 
> ①和其他元素都在一行上；
> 
> ②高，行高及外边距和内边距不可改变；
> 
> ③宽度就是它的文字或图片的宽度，不可改变
> 
> ④内联元素只能容纳文本或者其他内联元素
> 
>   
> 
> 
> **常见块元素(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和li \- 非排序列表

**常见内联元素(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 - 定义变量

**可变元素**

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

\* applet - java applet

\* button \- 按钮

\* del - 删除文本

\* iframe \- inline frame

\* ins - 插入的文本

\* map \- 图片区块(map)

\* object - object对象

\* script - 客户端脚本

[Link 1]: http://baike.so.com/doc/6985488.html

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML（3）块级元素、内联元素、可变元素

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制

心已赠人/ 2024年02月17日 21:56/ 0 赞/ 67 阅读

相关 CSS块级元素、内联元素

在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？其实，这两种

逃离我推掉我的手/ 2022年08月20日 04:23/ 0 赞/ 247 阅读

相关【WEB前端】3.CSS内联元素和块元素

HTML中内联元素和块元素分别有块元素(block element) 　　\ address - 地址　　\ blockquote - 块引用

比眉伴天荒/ 2022年08月19日 11:03/ 0 赞/ 145 阅读

相关 CSS的块元素、内联元素和可变元素有哪些？

> > > > 块元素(block element)和[内联元素][Link 1](inline element)都是html规范中的概念。块元素和内联元素的基本差异

淩亂°似流年/ 2022年08月06日 00:10/ 0 赞/ 221 阅读

相关 CSS开发基础——块级元素和内联元素

CSS开发基础——块级元素和内联元素 HTML 的元素可以分为两种：块级元素（block level element）内联元素（inline ele

迷南。/ 2022年07月13日 15:11/ 0 赞/ 214 阅读

相关块元素和内联元素精炼

块元素：没有任何属性时，默认是独占一行的，可以设置宽高内联元素：没有任何属性时，默认是同行排列，内容过多才会自动换行块元素特点 ①总是在新行上开始； ②高度，行高以

待我称王封你为后i/ 2022年07月11日 07:55/ 0 赞/ 188 阅读

相关 CSS-display、块级元素与内联元素

定义和用法： display属性规定元素应生成的框的类型。比较常用的值：完整详情：[http://www.w3school.com.cn/cssref/pr\_c

水深无声/ 2022年06月16日 14:54/ 0 赞/ 233 阅读

相关 CSS: 块级元素与内联元素（行内元素）

对于每一个CSS网页元素，都有一个默认的display属性，用于确定其元素类型。默认为display: block 块级元素，它的内容自动开始一个新行

布满荆棘的人生/ 2022年06月04日 04:44/ 0 赞/ 260 阅读

相关块级元素、行级（内联）元素、内联块元素的区别

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(paddin

阳光穿透心脏的1/2处/ 2022年05月30日 08:16/ 0 赞/ 255 阅读

相关玩转CSS中块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 1.块元素块元素，也可以称为行元素，布局

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 14:18/ 0 赞/ 347 阅读