行内元素与块级元素

首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）。

块级元素：（以下列举比较常用的块级元素，详情可在w3cschool查询）

定义文档中的分区或节

定义最大的标题

定义副标题

定义标题

定义标题

定义标题

定义最小的标题

定义无序列表

定义有序列表

定义有序列表或无序列表的列表项目

定义自定义列表

定义自定义列表中的条目

定义自定义列表中的项目

创建一条水平线

定义段落

定义表格

标签定义表格的表头

定义表格中的行
行内元素：（以下列举比较常用的行内元素，详情可在w3cschool查询）
定义超链接

字体加粗

定义在文档中的行内元素

向网页中插入题图像

输入框

小号字体效果


换行

字体加大加粗

强调的语气

创建单选或多选菜单

定义文本域，多行的文本输入控件</pre><p><strong>行内元素与块级元素的区别：</strong></p><p>1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素<strong>display：inline</strong>，块级元素<strong>display：block</strong>。</p><p>2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；</p><p>块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。</p><p>3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；</p><p>块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。</p><p>4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；</p><p>行内元素不能包含块级元素，只能容纳文本或者其他行内元素。</p><p><strong>如有何见解或疑问可私密我，大家共同学习进步。</strong></p></div>

<div class="clearfix mb10">
        <div class="share fr">
        <div class="social-share mb20 ta-c" data-initialized="true">
            <a href="#" class="social-share-icon iconfont icon-weibo"></a>
            <a href="#" class="social-share-icon iconfont icon-qq"></a>
            <a href="#" class="social-share-icon iconfont icon-wechat"></a>
            <a href="#" class="social-share-icon iconfont icon-qzone"></a>
        </div>
        <script src="http://www.zhezhongyun.com/zb_users/theme/tx_hao/script/social-share.min.js"></script>
    </div>
    
        <div class="info-tag">
        <a href="http://www.zhezhongyun.com/tags-171.html" title="查看更多标签内容" rel="tag" target="_blank">标签</a>    </div>
    </div>



<div class="info-next">
    <ul class="row">
        <li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.zhezhongyun.com/post/2920.html" title="简单介绍一下前端各框架中的模板标签">简单介绍一下前端各框架中的模板标签</a></li>
        <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.zhezhongyun.com/post/2922.html" title="做电工或通讯工作，地址线号标签打印很重要">做电工或通讯工作，地址线号标签打印很重要</a></li>
    </ul>
</div>

            </div>
            <h2 class="tx-title">相关推荐</h2>
            <div class="home-news">
                                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5406.html" title="Python入门学习记录之一:变量_python怎么用变量" class="f-black" target="_blank">Python入门学习记录之一:变量_python怎么用变量</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5405.html" title="python变量命名规则——来自小白的总结" class="f-black" target="_blank">python变量命名规则——来自小白的总结</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5404.html" title="Python入门学习教程:第 2 章 变量与数据类型" class="f-black" target="_blank">Python入门学习教程:第 2 章 变量与数据类型</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5403.html" title="绘制学术论文中的“三线表”具体指导" class="f-black" target="_blank">绘制学术论文中的“三线表”具体指导</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5402.html" title="Python基础语法知识--变量和数据类型" class="f-black" target="_blank">Python基础语法知识--变量和数据类型</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5401.html" title="一文搞懂 Python 中的所有标点符号" class="f-black" target="_blank">一文搞懂 Python 中的所有标点符号</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5400.html" title="Python变量类型和运算符_python中变量的含义" class="f-black" target="_blank">Python变量类型和运算符_python中变量的含义</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5399.html" title="从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序" class="f-black" target="_blank">从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5398.html" title="Python中下划线 ‘_’ 的用法，你知道几种" class="f-black" target="_blank">Python中下划线 ‘_’ 的用法，你知道几种</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5397.html" title="解锁Shell编程:变量_shell $变量" class="f-black" target="_blank">解锁Shell编程:变量_shell $变量</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5396.html" title="一文学会Python的变量命名规则!_python的变量命名有哪些要求" class="f-black" target="_blank">一文学会Python的变量命名规则!_python的变量命名有哪些要求</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5395.html" title="更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for" class="f-black" target="_blank">更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5394.html" title="C++第五课:变量的命名规则_c++中变量的命名规则" class="f-black" target="_blank">C++第五课:变量的命名规则_c++中变量的命名规则</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5393.html" title="Rust编程-核心篇-不安全编程_rust安全性" class="f-black" target="_blank">Rust编程-核心篇-不安全编程_rust安全性</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/5392.html" title="探秘 Python 内存管理:背后的神奇机制" class="f-black" target="_blank">探秘 Python 内存管理:背后的神奇机制</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...</p>
    </dd>
    </dl>                
            </div>

            
        </div>

                <div class="side-box col-6 col-m-24 col2-">
                                    <dl class="side-hot">
                <dt>一周热门</dt>
                <dd>
                    <ul>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1689.html" title="前端Flex布局可视化布局工具介绍，vue和html5快速设计利器" target="_blank">
                                                                <h2 class="f-15">前端Flex布局可视化布局工具介绍，vue和html5快速设计利器</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1682.html" title="HTML 简介（html简介及优缺点）" target="_blank">
                                                                <h2 class="f-15">HTML 简介（html简介及优缺点）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1684.html" title="关于HTML5被简称做H5，你怎么看?（html5缩写）" target="_blank">
                                                                <h2 class="f-15">关于HTML5被简称做H5，你怎么看?（html5缩写）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1516.html" title="前端开发规范(一、HTML篇)" target="_blank">
                                                                <h2 class="f-15">前端开发规范(一、HTML篇)</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1668.html" title="html5 工业web组态-开发自定义的组件 (炫酷按钮)" target="_blank">
                                                                <h2 class="f-15">html5 工业web组态-开发自定义的组件 (炫酷按钮)</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1787.html" title="Python每日一库之Beautiful Soup（python mtime）" target="_blank">
                                                                <h2 class="f-15">Python每日一库之Beautiful Soup（python mtime）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1688.html" title="怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）" target="_blank">
                                                                <h2 class="f-15">怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/2348.html" title="HTML标签速查手册?别死记硬背了，带你从原理上掌握它!" target="_blank">
                                                                <h2 class="f-15">HTML标签速查手册?别死记硬背了，带你从原理上掌握它!</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/3005.html" title="用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）" target="_blank">
                                                                <h2 class="f-15">用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/2527.html" title="推荐36种免费React模板和主题「干货」" target="_blank">
                                                                <h2 class="f-15">推荐36种免费React模板和主题「干货」</h2>
                            </a>
                        </li>
                                            </ul>
                </dd>
            </dl>
            
            

<dl class="function" id="divPrevious">
<dt class="function_t">最近发表</dt><dd class="function_c">


<ul><li><a title="2025cpu性能天梯图（2025cpu性能天梯图手机）" href="http://www.zhezhongyun.com/post/5668.html">2025cpu性能天梯图（2025cpu性能天梯图手机）</a></li>
<li><a title="联想笔记本电脑推荐2025（十大公认最耐用的电脑）" href="http://www.zhezhongyun.com/post/5667.html">联想笔记本电脑推荐2025（十大公认最耐用的电脑）</a></li>
<li><a title="下载安装163邮箱（下载163邮箱并安装使用）" href="http://www.zhezhongyun.com/post/5666.html">下载安装163邮箱（下载163邮箱并安装使用）</a></li>
<li><a title="c盘虚拟内存设置多少合适（电脑c盘虚拟内存设置多大合适）" href="http://www.zhezhongyun.com/post/5665.html">c盘虚拟内存设置多少合适（电脑c盘虚拟内存设置多大合适）</a></li>
<li><a title="最新油价消息（最新油价消息及预测）" href="http://www.zhezhongyun.com/post/5664.html">最新油价消息（最新油价消息及预测）</a></li>
<li><a title="win10菜单栏点击没反应（win10菜单栏没反应怎么关机）" href="http://www.zhezhongyun.com/post/5663.html">win10菜单栏点击没反应（win10菜单栏没反应怎么关机）</a></li>
<li><a title="笔记本电脑怎么清理c盘（硬盘不显示在我的电脑）" href="http://www.zhezhongyun.com/post/5662.html">笔记本电脑怎么清理c盘（硬盘不显示在我的电脑）</a></li>
<li><a title="电脑的内存条在哪个位置（电脑主机的内存条在哪个位置）" href="http://www.zhezhongyun.com/post/5661.html">电脑的内存条在哪个位置（电脑主机的内存条在哪个位置）</a></li>
<li><a title="台式机装机配置清单（台式机主机组装配置清单）" href="http://www.zhezhongyun.com/post/5660.html">台式机装机配置清单（台式机主机组装配置清单）</a></li>
<li><a title="视频无法播放如何修复（视频无法播放怎么修复）" href="http://www.zhezhongyun.com/post/5659.html">视频无法播放如何修复（视频无法播放怎么修复）</a></li>
</ul>

</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt><dd class="function_c">


<ul><li><a title="HTML 教程" href="http://www.zhezhongyun.com/tags-1.html">HTML 教程<span class="tag-count"> (33)</span></a></li>
<li><a title="HTML 简介" href="http://www.zhezhongyun.com/tags-3.html">HTML 简介<span class="tag-count"> (35)</span></a></li>
<li><a title="HTML 实例/测验" href="http://www.zhezhongyun.com/tags-46.html">HTML 实例/测验<span class="tag-count"> (32)</span></a></li>
<li><a title="HTML 测验" href="http://www.zhezhongyun.com/tags-47.html">HTML 测验<span class="tag-count"> (32)</span></a></li>
<li><a title="JavaScript 和 HTML DOM 参考手册" href="http://www.zhezhongyun.com/tags-54.html">JavaScript 和 HTML DOM 参考手册<span class="tag-count"> (32)</span></a></li>
<li><a title="HTML 拓展阅读" href="http://www.zhezhongyun.com/tags-55.html">HTML 拓展阅读<span class="tag-count"> (30)</span></a></li>
<li><a title="HTML文本框样式" href="http://www.zhezhongyun.com/tags-60.html">HTML文本框样式<span class="tag-count"> (31)</span></a></li>
<li><a title="HTML滚动条样式" href="http://www.zhezhongyun.com/tags-61.html">HTML滚动条样式<span class="tag-count"> (34)</span></a></li>
<li><a title="HTML5 浏览器支持" href="http://www.zhezhongyun.com/tags-113.html">HTML5 浏览器支持<span class="tag-count"> (33)</span></a></li>
<li><a title="HTML5 新元素" href="http://www.zhezhongyun.com/tags-114.html">HTML5 新元素<span class="tag-count"> (33)</span></a></li>
<li><a title="HTML5 WebSocket" href="http://www.zhezhongyun.com/tags-131.html">HTML5 WebSocket<span class="tag-count"> (30)</span></a></li>
<li><a title="HTML5 代码规范" href="http://www.zhezhongyun.com/tags-132.html">HTML5 代码规范<span class="tag-count"> (32)</span></a></li>
<li><a title="HTML5  标签" href="http://www.zhezhongyun.com/tags-135.html">HTML5  标签<span class="tag-count"> (717)</span></a></li>
<li><a title="HTML5  标签 (已废弃)" href="http://www.zhezhongyun.com/tags-137.html">HTML5  标签 (已废弃)<span class="tag-count"> (75)</span></a></li>
<li><a title="HTML5电子书" href="http://www.zhezhongyun.com/tags-141.html">HTML5电子书<span class="tag-count"> (32)</span></a></li>
<li><a title="HTML5开发工具" href="http://www.zhezhongyun.com/tags-142.html">HTML5开发工具<span class="tag-count"> (34)</span></a></li>
<li><a title="HTML5小游戏源码" href="http://www.zhezhongyun.com/tags-143.html">HTML5小游戏源码<span class="tag-count"> (34)</span></a></li>
<li><a title="HTML5模板下载" href="http://www.zhezhongyun.com/tags-144.html">HTML5模板下载<span class="tag-count"> (30)</span></a></li>
<li><a title="HTTP 状态消息" href="http://www.zhezhongyun.com/tags-159.html">HTTP 状态消息<span class="tag-count"> (33)</span></a></li>
<li><a title="HTTP 方法：GET 对比 POST" href="http://www.zhezhongyun.com/tags-160.html">HTTP 方法：GET 对比 POST<span class="tag-count"> (33)</span></a></li>
<li><a title="键盘快捷键" href="http://www.zhezhongyun.com/tags-168.html">键盘快捷键<span class="tag-count"> (35)</span></a></li>
<li><a title="标签" href="http://www.zhezhongyun.com/tags-171.html">标签<span class="tag-count"> (226)</span></a></li>
<li><a title="opacity 属性" href="http://www.zhezhongyun.com/tags-319.html">opacity 属性<span class="tag-count"> (32)</span></a></li>
<li><a title="transition 属性" href="http://www.zhezhongyun.com/tags-360.html">transition 属性<span class="tag-count"> (33)</span></a></li>
<li><a title="1-1. 变量声明" href="http://www.zhezhongyun.com/tags-415.html">1-1. 变量声明<span class="tag-count"> (31)</span></a></li>
</ul>

</dd>
</dl>
        </div>
            </div>
</div>



</div>
<div class="footer">
    <div class="wide ta-c f-12">
                    </div>
</div>


<div class="fixed-box ">
    <ul>
        <li class="pchide wapflex"><a href="http://www.zhezhongyun.com/"><i class="fa fa-home"></i> 首页</a></li>
                        <li><a href="http://www.zhezhongyun.com/shoulu.html" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li>
                                <li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li>
    </ul>
</div>
<script src="http://www.zhezhongyun.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2025-07-27"></script>
</body>
</html><!--128.43 ms , 13 queries , 3576kb memory , 0 error-->
表格中的标准单元格

定义表头单元格