刚学前端的小伙伴，大概率都纠结过这个问题：块级元素和行内元素，到底能不能相互转换啊？答案很明确——能！而且这是前端开发里，天天都会用到的小操作，算不上啥高深技术，但踩坑的人真不少。
先掰扯下俩元素的区别，别搞混了。块级元素就像单独占了一整行的“大块头”，比如div、p标签，不管内容多少，都得独自占一行，还能随便设置宽高；行内元素就不一样，像“小跟班”，比如span、a标签，跟其他行内元素挤在一行，设置宽高也不管用，特别“不听话”。
转换的关键，就靠CSS里的display属性，就这么一个属性，就能轻松切换，不用写复杂代码。说俩最常用的，新手记牢这俩就够。
把行内元素转成块级元素，用display: block; 比如你想让a标签（行内）独占一行，还能设置宽高，加这句就行。我平时做导航栏，就常把a标签转成块级，这样才能均匀分配宽度，看着整齐。
反过来，把块级元素转行内元素，用display: inline; 比如div标签，本来独占一行，加了这句，就能跟span挤在一行，适合做一些 inline 的小布局。不过有个小坑，转行内后，宽高设置就失效了，这点一定要注意。
还有个常用的display: inline-block; 算是“折中款”，既能像行内元素一样同行显示，又能像块级元素一样设置宽高，平时做按钮、卡片排列，用这个最顺手。
直接上综合实例，复制就能运行，一看就懂：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.link-block { display: block; width: 200px; height: 40px; background: #eee; margin: 10px 0; text-align: center; line-height: 40px; }
.div-inline { display: inline; width: 300px; height: 50px; color: red; }
.inline-block { display: inline-block; width: 150px; height: 40px; background: #ccc; margin: 0 5px; }
</style>
</head>
<body>
<!-- 行内转块级实例 -->
<a href="#">行内转块级按钮</a>
<a href="#">第二个按钮</a>
<!-- 块级转行内实例 -->
<div>块级转行内1</div>
<div>块级转行内2（宽高无效）</div>
<!-- inline-block实例 -->
<div>折中款1</div>
<div>折中款2</div>
</body>
</html>
[VIP第5年] 指数:5
