行内元素与块级元素，以及区别（行内元素和块级元素的区别有哪些）

zhezhongyun 2025-03-24 01:27 33 浏览
行内元素与块级元素
首先，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/4970.html" title="3 分钟!AI 从零开发五子棋全过程曝光，网友:这效率我服了" class="f-black" target="_blank">3 分钟!AI 从零开发五子棋全过程曝光，网友:这效率我服了</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13"><!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4969.html" title="一行代码实现display&quot;过渡动画&quot;原理" class="f-black" target="_blank">一行代码实现display&quot;过渡动画&quot;原理</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">作者：Peter谭老师转发链接：https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章，提到如何让display出现过渡动画，却没有仔...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4968.html" title="脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下" class="f-black" target="_blank">脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4967.html" title="浏览器的渲染机制、重绘、重排" class="f-black" target="_blank">浏览器的渲染机制、重绘、重排</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">1、什么是重排和重绘网页生成过程：HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树，生成一棵渲染树(RenderTree)生成布局（flo...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4966.html" title="托福写作高频考题写作思路&amp;词汇丨考虫独家" class="f-black" target="_blank">托福写作高频考题写作思路&amp;词汇丨考虫独家</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/4965.html" title="在优麒麟上使用 Electron 开发桌面应用" class="f-black" target="_blank">在优麒麟上使用 Electron 开发桌面应用</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">使用Web标准来创建桌面GUI，上手快、成本低、跨平台、自适应分辨率，这些都是Electron的优势。作者/来源：优麒麟Electron是由Github开发，用HTML、CSS和...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4964.html" title="php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒" class="f-black" target="_blank">php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘，但是没有找到怎么填充文字，只好把轮盘弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖点击抽...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4963.html" title="用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来" class="f-black" target="_blank">用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">兄弟们，今天咱来搞点好玩的——用CSS整一个3D轮播图！咱野生程序员就是要在代码里找乐子，技术和快乐咱都得要！代码是写不完的，但咱能自己敲出快乐来，走起！一、先整个容器，搭个舞台咋先写一个...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4962.html" title="实现一个超酷的 3D 立体卡片效 #前端开发" class="f-black" target="_blank">实现一个超酷的 3D 立体卡片效 #前端开发</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片，鼠标悬停的时候图片会跳出卡片，并将影子投射到背景卡片上，在视觉上有一个3D立体感。html主要分成3个部分：容器→背景层...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4961.html" title="Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;" class="f-black" target="_blank">Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了？"团队协作开发后台系统时，小张第N次遇到这个问题。多层嵌套的组件结构里，弹窗被overfl...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4960.html" title="让交互更加生动!有意思的鼠标跟随 3D 旋转动效" class="f-black" target="_blank">让交互更加生动!有意思的鼠标跟随 3D 旋转动效</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯CSS...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4959.html" title="填坑:transform元素导致zindex失效终极方法" class="f-black" target="_blank">填坑:transform元素导致zindex失效终极方法</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">今天遇到了使用css3动画的元素层级被放大置顶的问题，ios浏览器上没问题，安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效，兄弟元素设置多高的z-index都盖不住解决办...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4958.html" title="诡异的层级错乱:一个被transform隐藏的CSS陷阱" class="f-black" target="_blank">诡异的层级错乱:一个被transform隐藏的CSS陷阱</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">周五下午三点十七分，设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单，此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系，手指下意识地敲下z-index:9999，心里清楚这不过是程序...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4957.html" title="动画篇--碎片动画" class="f-black" target="_blank">动画篇--碎片动画</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">本文授权转载，作者：Sindri的小巢（简书）前言从最开始动笔动画篇的博客，至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章，发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4956.html" title="Nature:大洋转换断层处的拉张构造与两阶段地壳增生" class="f-black" target="_blank">Nature:大洋转换断层处的拉张构造与两阶段地壳增生</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">Nature：大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一，全球总长度超过48000km（Bird,2003），它们的发现为板块构造理论的建立奠定了重要的基础（Wil...</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/1123.html" title="漏洞系列一一看我一招征服漏洞 SSRF" target="_blank">
                                                                <h2 class="f-15">漏洞系列一一看我一招征服漏洞 SSRF</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/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/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/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/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="3 分钟!AI 从零开发五子棋全过程曝光，网友:这效率我服了" href="http://www.zhezhongyun.com/post/4970.html">3 分钟!AI 从零开发五子棋全过程曝光，网友:这效率我服了</a></li>
<li><a title="一行代码实现display&quot;过渡动画&quot;原理" href="http://www.zhezhongyun.com/post/4969.html">一行代码实现display&quot;过渡动画&quot;原理</a></li>
<li><a title="脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下" href="http://www.zhezhongyun.com/post/4968.html">脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下</a></li>
<li><a title="浏览器的渲染机制、重绘、重排" href="http://www.zhezhongyun.com/post/4967.html">浏览器的渲染机制、重绘、重排</a></li>
<li><a title="托福写作高频考题写作思路&amp;词汇丨考虫独家" href="http://www.zhezhongyun.com/post/4966.html">托福写作高频考题写作思路&amp;词汇丨考虫独家</a></li>
<li><a title="在优麒麟上使用 Electron 开发桌面应用" href="http://www.zhezhongyun.com/post/4965.html">在优麒麟上使用 Electron 开发桌面应用</a></li>
<li><a title="php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒" href="http://www.zhezhongyun.com/post/4964.html">php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒</a></li>
<li><a title="用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来" href="http://www.zhezhongyun.com/post/4963.html">用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来</a></li>
<li><a title="实现一个超酷的 3D 立体卡片效 #前端开发" href="http://www.zhezhongyun.com/post/4962.html">实现一个超酷的 3D 立体卡片效 #前端开发</a></li>
<li><a title="Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;" href="http://www.zhezhongyun.com/post/4961.html">Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;</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="HTML button formtarget 属性" href="http://www.zhezhongyun.com/tags-218.html">HTML button formtarget 属性<span class="tag-count"> (30)</span></a></li>
<li><a title="CSS 水平对齐 (Horizontal Align)" href="http://www.zhezhongyun.com/tags-260.html">CSS 水平对齐 (Horizontal Align)<span class="tag-count"> (30)</span></a></li>
<li><a title="opacity 属性" href="http://www.zhezhongyun.com/tags-319.html">opacity 属性<span class="tag-count"> (32)</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><!--134.12 ms , 13 queries , 3427kb memory , 0 error-->
表格中的标准单元格

定义表头单元格