行内元素与块级元素

首先，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/4316.html" title="JavaScript中常用数据类型，你知道几个?" class="f-black" target="_blank">JavaScript中常用数据类型，你知道几个?</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型，当然这并不是JavaScr...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4315.html" title="踩坑:前端的z-index 之bug一二（zh1es前端）" class="f-black" target="_blank">踩坑:前端的z-index 之bug一二（zh1es前端）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个：1.父标签position属性为relative;2.问题标签无posi...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4314.html" title="两栏布局、左边定宽200px、右边自适应如何实现?" class="f-black" target="_blank">两栏布局、左边定宽200px、右边自适应如何实现?</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">一、两栏布局（左定宽，右自动）1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。举例：HTM...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4313.html" title="前端代码需要这样优化才是一个标准的网站" class="f-black" target="_blank">前端代码需要这样优化才是一个标准的网站</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">　　网站由前端和后端组成，前端呈现给用户。本文将告诉您前端页面代码的优化，当然仍然是基于seo优化的。　　就前端而言，如果做伪静态处理，基本上是普通的html代码，正常情况下，这些页面内容是通过页面模...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4312.html" title="网页设计如何自学（初学网页设计）" class="f-black" target="_blank">网页设计如何自学（初学网页设计）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">1在Dreamweaver中搭建不同的页面，需要掌握HTML的语句了，通过调整各项数值就可以制作出排版漂亮的页面，跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学，希望可以帮助到各位。Dre...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4311.html" title="1、数值类型（数值类型有）" class="f-black" target="_blank">1、数值类型（数值类型有）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">1.1数据类型概览MySQL的数据类型可划分为三大类别：数值类型：旨在存储数字（涵盖整型、浮点型、DECIMAL等）。字符串类型：主要用于存储文本（诸如CHAR、VARCHAR之类）。日期/...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4310.html" title="网页设计的布局属性（网页设计的布局属性是什么）" class="f-black" target="_blank">网页设计的布局属性（网页设计的布局属性是什么）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">布局属性是网站设计中必不可少的一个重要的环节，主要用来设置网页的元素的布局，主要有以下属性。1、float：该属性设置元素的浮动方式，可以取none，left和right等3个值，分别表示不浮动，浮在...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4309.html" title="Grid网格布局一种更灵活、更强大的二维布局模型!" class="f-black" target="_blank">Grid网格布局一种更灵活、更强大的二维布局模型!</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">当涉及到网页布局时，display:flex;和display:grid;是两个常用的CSS属性，它们都允许创建不同类型的布局，但有着不同的用法和适用场景。使用flex布局的痛点当我们使...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4308.html" title="React 项目实践——创建一个聊天机器人" class="f-black" target="_blank">React 项目实践——创建一个聊天机器人</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">作者：FredrikStrandOseberg转发链接：https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4307.html" title="有趣的 CSS 数学函数（css公式）" class="f-black" target="_blank">有趣的 CSS 数学函数（css公式）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">前言之前一直在玩three.js，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在CSS中也用上这些数学函数，但发现CSS目前还没有，据说以后的新规范会纳入，估计也要等很久。然...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4306.html" title="web开发之-前端css(5)（css前端设计）" class="f-black" target="_blank">web开发之-前端css(5)（css前端设计）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">显示控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4305.html" title="2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)" class="f-black" target="_blank">2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">获课：keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一，它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局，前端布局技术经历了...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4304.html" title="教你轻松制作自动换行的CSS布局，轻松应对不同设备!" class="f-black" target="_blank">教你轻松制作自动换行的CSS布局，轻松应对不同设备!</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">在网页设计中，自动换行的CSS布局是非常常见的需求，特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸，保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...</p>
    </dd>
    </dl>                                
<dl class="news-box clearfix pd20 ">
        <dt class="f-18 mb10"><a href="http://www.zhezhongyun.com/post/4303.html" title="晨光微语!一道 CSS 面试题，伴你静享知识治愈时光" class="f-black" target="_blank">晨光微语!一道 CSS 面试题，伴你静享知识治愈时光</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/4302.html" title="2023 年的响应式设计指南（什么是响应式设计优缺点）" class="f-black" target="_blank">2023 年的响应式设计指南（什么是响应式设计优缺点）</a></dt>
    <dd class="news-txt">
        <p class="f-gray f-13">大家好，我是Echa。如今，当大家考虑构建流畅的布局时，没有再写固定宽度和高度数值了。相反，小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议，小编仍然看到网站遵循自适应设计模式，其中它有...</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/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="JavaScript中常用数据类型，你知道几个?" href="http://www.zhezhongyun.com/post/4316.html">JavaScript中常用数据类型，你知道几个?</a></li>
<li><a title="踩坑:前端的z-index 之bug一二（zh1es前端）" href="http://www.zhezhongyun.com/post/4315.html">踩坑:前端的z-index 之bug一二（zh1es前端）</a></li>
<li><a title="两栏布局、左边定宽200px、右边自适应如何实现?" href="http://www.zhezhongyun.com/post/4314.html">两栏布局、左边定宽200px、右边自适应如何实现?</a></li>
<li><a title="前端代码需要这样优化才是一个标准的网站" href="http://www.zhezhongyun.com/post/4313.html">前端代码需要这样优化才是一个标准的网站</a></li>
<li><a title="网页设计如何自学（初学网页设计）" href="http://www.zhezhongyun.com/post/4312.html">网页设计如何自学（初学网页设计）</a></li>
<li><a title="1、数值类型（数值类型有）" href="http://www.zhezhongyun.com/post/4311.html">1、数值类型（数值类型有）</a></li>
<li><a title="网页设计的布局属性（网页设计的布局属性是什么）" href="http://www.zhezhongyun.com/post/4310.html">网页设计的布局属性（网页设计的布局属性是什么）</a></li>
<li><a title="Grid网格布局一种更灵活、更强大的二维布局模型!" href="http://www.zhezhongyun.com/post/4309.html">Grid网格布局一种更灵活、更强大的二维布局模型!</a></li>
<li><a title="React 项目实践——创建一个聊天机器人" href="http://www.zhezhongyun.com/post/4308.html">React 项目实践——创建一个聊天机器人</a></li>
<li><a title="有趣的 CSS 数学函数（css公式）" href="http://www.zhezhongyun.com/post/4307.html">有趣的 CSS 数学函数（css公式）</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-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>
<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>
</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><!--123.09 ms , 13 queries , 3428kb memory , 0 error-->
表格中的标准单元格

定义表头单元格