行内元素与块级元素

首先，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.yuyutoo.com/zb_users/theme/tx_hao/script/social-share.min.js"></script>
    </div>
    
        <div class="info-tag">
        <a href="http://www.yuyutoo.com/tags-281.html" title="查看更多displayblock内容" rel="tag" target="_blank">displayblock</a>    </div>
    </div>



<div class="info-next">
    <ul class="row">
        <li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.yuyutoo.com/post/7891.html" title="让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华">让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华</a></li>
        <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.yuyutoo.com/post/7893.html" title="你的自我界限够强大吗?_你的自我界限够强大吗英文">你的自我界限够强大吗?_你的自我界限够强大吗英文</a></li>
    </ul>
</div>

            </div>
            <h2 class="tx-title">相关推荐</h2>
            <div class="home-news">
                                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7900.html" title="史上最全的浏览器兼容性问题和解决方案" class="f-black" target="_blank">史上最全的浏览器兼容性问题和解决方案</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dd class="news-img">
                        <a href="http://www.yuyutoo.com/post/7899.html" class="img-box" data-ratio="16:9" title="平面设计基础知识_平面设计基础知识实验收获与总结" target="_blank"><img src="images/dustan.jpg" alt="平面设计基础知识_平面设计基础知识实验收获与总结"></a>
                    </dd>
                    <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7899.html" title="平面设计基础知识_平面设计基础知识实验收获与总结" class="f-black" target="_blank">平面设计基础知识_平面设计基础知识实验收获与总结</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">CSS构造颜色，背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变：display:inline（是内联的...</p>
                    </dd>
                    <dd class="news-time">
                        <p class="f-gray f-12"><span class="mr10">2025-02-21 16:01</span> yuyutoo</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7898.html" title="写作排版简单三步就行-工具篇_作文排版模板" class="f-black" target="_blank">写作排版简单三步就行-工具篇_作文排版模板</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">和我们工作中日常word排版内部交流不同，这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考，排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的，在排...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7897.html" title="写一个2048的游戏_2048小游戏功能实现" class="f-black" target="_blank">写一个2048的游戏_2048小游戏功能实现</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">1.创建HTML文件1.打开一个文本编辑器，例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中：html...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7896.html" title="今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……" class="f-black" target="_blank">今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">　　最近的天气暖和得让很多小伙伴们喊“热”！！！　　昨天的气温到底升得有多高呢？你家有没有榜上有名？...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7895.html" title="CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式" class="f-black" target="_blank">CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义CSS变量，自定义主题颜色。布局...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7894.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 pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7893.html" title="你的自我界限够强大吗?_你的自我界限够强大吗英文" class="f-black" target="_blank">你的自我界限够强大吗?_你的自我界限够强大吗英文</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">我的结果:A、该设立新的界限...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7892.html" title="行内元素与块级元素，以及区别_行内元素和块级元素有什么区别?" class="f-black" target="_blank">行内元素与块级元素，以及区别_行内元素和块级元素有什么区别?</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">行内元素与块级元素首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）。块级元素：（以下列举比较常...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dd class="news-img">
                        <a href="http://www.yuyutoo.com/post/7891.html" class="img-box" data-ratio="16:9" title="让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华" target="_blank"><img src="http://xinhuaapp-img.img.aliyuncs.com/Party/7/110090/content/2018/03/08/2018030813420333061514.jpg?x-oss-process=image/crop,x_0,y_0,w_0,h_0/quality,q_80/format,jpg" alt="让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华"></a>
                    </dd>
                    <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7891.html" title="让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华" class="f-black" target="_blank">让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">去年的两会期间，习近平总书记在参加人大会议四川代表团审议时，对治蜀兴川提出了明确要求，指明了前行方向，并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...</p>
                    </dd>
                    <dd class="news-time">
                        <p class="f-gray f-12"><span class="mr10">2025-02-21 16:00</span> yuyutoo</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7890.html" title="今年国家综合性消防救援队伍计划招录消防员15000名" class="f-black" target="_blank">今年国家综合性消防救援队伍计划招录消防员15000名</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">记者24日从应急管理部获悉，国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名，其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7889.html" title="一起盘点最新 Chrome v133 的5大主流特性 ?" class="f-black" target="_blank">一起盘点最新 Chrome v133 的5大主流特性 ?</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值，类似于var()函数替换自定义属性值的方式。...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7888.html" title="竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使" class="f-black" target="_blank">竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">style="text-align:center;"data-mce-style="text-align:...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7887.html" title="学物理能做什么?_学物理能做什么 卢昌海" class="f-black" target="_blank">学物理能做什么?_学物理能做什么 卢昌海</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">作者：曹则贤中国科学院物理研究所原标题：《物理学：ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中，主持人问过我一个的问题：“学物理的人，如果日后不...</p>
                    </dd>
                                                        </dl>
                                <dl class="news-box clearfix pd15">
                                                            <dd class="news-img">
                        <a href="http://www.yuyutoo.com/post/7886.html" class="img-box" data-ratio="16:9" title="你不知道的关于这只眯眼兔的6个小秘密" target="_blank"><img src="<br>http://img02.yohoboys.com/contentimg/2016/04/25/18/022c712822b8e585d41119767f4d6d4af2.gif" alt="你不知道的关于这只眯眼兔的6个小秘密"></a>
                    </dd>
                    <dt class="f-20 mb10"><a href="http://www.yuyutoo.com/post/7886.html" title="你不知道的关于这只眯眼兔的6个小秘密" class="f-black" target="_blank">你不知道的关于这只眯眼兔的6个小秘密</a></dt>
                    <dd class="news-txt">
                        <p class="f-gray f-13">在你们忙着给熊本君做表情包的时候，要知道，最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年，它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...</p>
                    </dd>
                    <dd class="news-time">
                        <p class="f-gray f-12"><span class="mr10">2025-02-21 16:00</span> yuyutoo</p>
                    </dd>
                                                        </dl>
                
            </div>

                        <div class="pd15">
                

<div class="tx-comments mb20">
        <label id="AjaxCommentBegin"></label>
        <label id="AjaxCommentEnd"></label>
</div>

<!--评论框-->

<div class="post tx-comment" id="divCommentPost">
    <h3><a id="cancel-reply" href="#divCommentPost" class="fr hide"><small>取消回复</small></a>欢迎 <span class="f-red">你</span> 发表评论:</h3>
    <form id="frmSumbit" target="_self" method="post" action="http://www.yuyutoo.com/zb_system/cmd.php?act=cmt&postid=7892&key=8052a0d2cfb66d57bb4eb250b0e2eb37" class="clearfix">
        <input type="hidden" name="inpId" id="inpId" value="7892">
        <input type="hidden" name="inpRevID" id="inpRevID" value="0">
                <div class="tx-comment-box tx-comment-ul3"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" placeholder="名称(*)"> </div>
                <div class="tx-comment-box tx-comment-ul3 tx-comment-ul3-2"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"></div>
                        <div class="tx-comment-box tx-comment-ul3"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"></div>
                
                <div class="tx-comment-box tx-comment-textarea">
            <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎你的交流评论，但是垃圾评论不受欢迎">
            
        
    

            
            
        
        

                                    

                
一周热门
                

                    

                                                

                            
                                                                
织梦(Dedecms)建站教程 织梦建站详细步骤
                            
                        
                                                

                            
                                                                
【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)
                            
                        
                                                

                            
                                                                
2024PHP在线客服系统源码+完全开源 带详细搭建教程
                            
                        
                                                

                            
                                                                
2024php在线客服系统实时聊天系统源码
                            
                        
                                                

                            
                                                                
2024最新php在线客服系统源码(免费开源+全新UI+终身使用)
                            
                        
                                                

                            
                                                                
【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)
                            
                        
                                                

                            
                                                                
如何做一个搜索网站?如何做一个外贸网站?dedecms建站教程全集
                            
                        
                                                

                            
                                                                
网站建站基础第十二课(dedecms基础搭建教程)
                            
                        
                                                

                            
                                                                
dedecms网站如何logo设计和ico站标如何替换
                            
                        
                                                

                            
                                                                
SEO入门学习之安装Dede模板网站-耀途盛世
                            
                        
                                            
                
            
                                    


最近发表



史上最全的浏览器兼容性问题和解决方案
平面设计基础知识_平面设计基础知识实验收获与总结
写作排版简单三步就行-工具篇_作文排版模板
写一个2048的游戏_2048小游戏功能实现
今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……
CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式
柠檬科技肖勃飞:大数据风控助力信用社会建设
你的自我界限够强大吗?_你的自我界限够强大吗英文
行内元素与块级元素，以及区别_行内元素和块级元素有什么区别?
让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华





标签列表



mybatis plus (70)
scheduledtask (71)
css滚动条 (60)
java学生成绩管理系统 (59)
结构体数组 (69)
databasemetadata (64)
javastatic (68)
jsp实用教程 (53)
fontawesome (57)
widget开发 (57)
vb net教程 (62)
hibernate 教程 (63)
case语句 (57)
svn连接 (74)
directoryindex (69)
session timeout (58)
textbox换行 (67)
extension_dir (64)
linearlayout (58)
vba高级教程 (75)
iframe用法 (58)
sqlparameter (59)
trim函数 (59)
flex布局 (63)
contextloaderlistener (56)



                    
    






    

                    




    

        
 首页
                        
收录
                                
 顶部
    



表格中的标准单元格

定义表头单元格