行内元素与块级元素

首先，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/3467.html" title="JPA实体类注解，看这篇就全会了" class="f-black" target="_blank">JPA实体类注解，看这篇就全会了</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3466.html" title="Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用" class="f-black" target="_blank">Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3465.html" title="用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码" class="f-black" target="_blank">用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码</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/3464.html" title="B 客户端流RPC (clientstream Client Stream)" class="f-black" target="_blank">B 客户端流RPC (clientstream Client Stream)</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3463.html" title="我的模型我做主02——训练自己的大模型:简易入门指南" class="f-black" target="_blank">我的模型我做主02——训练自己的大模型:简易入门指南</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3462.html" title="开源项目MessageNest打造个性化消息推送平台多种通知方式" class="f-black" target="_blank">开源项目MessageNest打造个性化消息推送平台多种通知方式</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3461.html" title="使用投机规则API加快页面加载速度" class="f-black" target="_blank">使用投机规则API加快页面加载速度</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3460.html" title="JSONP安全攻防技术" class="f-black" target="_blank">JSONP安全攻防技术</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3459.html" title="大数据Doris(六):编译 Doris遇到的问题" class="f-black" target="_blank">大数据Doris(六):编译 Doris遇到的问题</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3458.html" title="网页内嵌PDF获取的办法" class="f-black" target="_blank">网页内嵌PDF获取的办法</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3457.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/3456.html" title="下周重要财经数据日程一览 (1229-0103)" class="f-black" target="_blank">下周重要财经数据日程一览 (1229-0103)</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3455.html" title="PyTorch 深度学习实战(38):注意力机制全面解析" class="f-black" target="_blank">PyTorch 深度学习实战(38):注意力机制全面解析</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3454.html" title="聊聊Spring AI的EmbeddingModel" class="f-black" target="_blank">聊聊Spring AI的EmbeddingModel</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/3453.html" title="前端分享-少年了解过iframe么" class="f-black" target="_blank">前端分享-少年了解过iframe么</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...</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/513.html" title="b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢" target="_blank">
                                                                <h2 class="f-15">b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1118.html" title="接口测试遇到500报错?别慌，你的头部可能有点问题" target="_blank">
                                                                <h2 class="f-15">接口测试遇到500报错?别慌，你的头部可能有点问题</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1123.html" title="漏洞系列一一看我一招征服漏洞 SSRF" target="_blank">
                                                                <h2 class="f-15">漏洞系列一一看我一招征服漏洞 SSRF</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1120.html" title="Web前端需要学什么?Web前端开发需要学习哪些?" target="_blank">
                                                                <h2 class="f-15">Web前端需要学什么?Web前端开发需要学习哪些?</h2>
                            </a>
                        </li>
                                                <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/1140.html" title="「资讯」为强迫用户使用Edge浏览器，微软又出新招数" target="_blank">
                                                                <h2 class="f-15">「资讯」为强迫用户使用Edge浏览器，微软又出新招数</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/1682.html" title="HTML 简介（html简介及优缺点）" target="_blank">
                                                                <h2 class="f-15">HTML 简介（html简介及优缺点）</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1242.html" title="HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端" target="_blank">
                                                                <h2 class="f-15">HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端</h2>
                            </a>
                        </li>
                                                <li>
                            <a href="http://www.zhezhongyun.com/post/1499.html" title="现在页面实时聊天都使用Websocket技术实现吗?" target="_blank">
                                                                <h2 class="f-15">现在页面实时聊天都使用Websocket技术实现吗?</h2>
                            </a>
                        </li>
                                            </ul>
                </dd>
            </dl>
            
            

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


<ul><li><a title="JPA实体类注解，看这篇就全会了" href="http://www.zhezhongyun.com/post/3467.html">JPA实体类注解，看这篇就全会了</a></li>
<li><a title="Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用" href="http://www.zhezhongyun.com/post/3466.html">Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用</a></li>
<li><a title="用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码" href="http://www.zhezhongyun.com/post/3465.html">用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码</a></li>
<li><a title="B 客户端流RPC (clientstream Client Stream)" href="http://www.zhezhongyun.com/post/3464.html">B 客户端流RPC (clientstream Client Stream)</a></li>
<li><a title="我的模型我做主02——训练自己的大模型:简易入门指南" href="http://www.zhezhongyun.com/post/3463.html">我的模型我做主02——训练自己的大模型:简易入门指南</a></li>
<li><a title="开源项目MessageNest打造个性化消息推送平台多种通知方式" href="http://www.zhezhongyun.com/post/3462.html">开源项目MessageNest打造个性化消息推送平台多种通知方式</a></li>
<li><a title="使用投机规则API加快页面加载速度" href="http://www.zhezhongyun.com/post/3461.html">使用投机规则API加快页面加载速度</a></li>
<li><a title="JSONP安全攻防技术" href="http://www.zhezhongyun.com/post/3460.html">JSONP安全攻防技术</a></li>
<li><a title="大数据Doris(六):编译 Doris遇到的问题" href="http://www.zhezhongyun.com/post/3459.html">大数据Doris(六):编译 Doris遇到的问题</a></li>
<li><a title="网页内嵌PDF获取的办法" href="http://www.zhezhongyun.com/post/3458.html">网页内嵌PDF获取的办法</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="HTML 参考手册" href="http://www.zhezhongyun.com/tags-52.html">HTML 参考手册<span class="tag-count"> (28)</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-56.html">HTML中如何键入空格<span class="tag-count"> (27)</span></a></li>
<li><a title="HTML常用标签" href="http://www.zhezhongyun.com/tags-58.html">HTML常用标签<span class="tag-count"> (29)</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>
</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=2024-12-04"></script>
</body>
</html><!--111.05 ms , 13 queries , 3593kb memory , 0 error-->
表格中的标准单元格

定义表头单元格