Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于CSS的内联和块元素相关的知识，希望对你有一定的参考价值。
一般什么情况需要转换这2种元素？控制内联元素的间距是不是直接用margin就行了？
关于他们的应用有什么需要特别注意的地方？
内联元素可以理解为不能直接设置宽度和高度元素，比如span，你为他设置宽度和高度没有效果，除非你把它设置成块级元素。
如下面的代码把display:block;属性值去掉的话，宽度和高度都不会起作用了。
<span style="width:100px;height:100px;display:block;background-color:blue;"></span>margin可以控制内联和块级元素的间距，而不光是内联元素。
主要注意他们之间的转换问题，如块级元素加float属性会变为内联元素。
不同DTD下，盒子模型不同。
还要清楚那些默认是块级，那些默认是内联。
参考技术Adisplay使用的最多属性值为：block（块级元素），inline（内联元素），inline-block(内联块元素)
通俗易懂的说：
块级元素（block）：可以设置宽高，margin，padding值等；
<div>我是块级元素DIV！</div>上面的显示的结果：
我是块级元素DIV！内联元素（inline）：不可以设置宽高，margin，padding值等；
<span>我是内联元素SPAN！</span>上面显示的结果（会在一排显示，这时你设置的宽高，margin，padding值都不起作用）：
内联块元素(inline-block)：可以设置宽高，margin，padding值
css：
上面显示的效果会在一排，但是同时宽高，margin，padding值也起作用；
我是内联元素SPAN！ 我是内联元素EM！ 参考技术B行级元素会自动换行，可以设置行高，margin，高等，
内联元素，不会换行，设置行高和高都不管用，但是能设置宽度，（上下不管用，左右管用）
dispaly:block; 设为行级元素,
display:inline 默认。此元素会被显示为内联元素,
1.内联元素和块元素
内联元素：p、 div、 h1~h6
块级元素：span、a
区别：内联元素占空间全部宽度，自动换行；
块元素必须首先设置其相应的宽度，不会自动换行。
2.两者的相互转换
a.diaplay:inline;
内联元素转化为块元素，即将p元素设置占同一行，中间不显示换行。
代码如下：
<style> p {display:inline;} </style> <body> <p> display属性的值为 "inline"的结果</p> <p>两个元素之间没有距离.</p> </body>
b.display:block;
块元素转化为内联元素，即将span元素设置为自动换行。
代码如下：
<style> span {display:block;} </style> <body> <span> display属性的值为 "block"的结果</span> <span>两个元素之间有换行符距离.</span> </body>
以上是关于关于CSS的内联和块元素的主要内容，如果未能解决你的问题，请参考以下文章