切换元素显示模式如何设置CSS属性
在网页前端开发中，常见的元素显示方式有块级元素显示、内联元素显示、行内块级元素显示，而且很多时候，我们需要通过修改css样式，来改变元素的默认显示方式以满足显示需要。那么，应该怎样设置css属性来切换元素的显示方式呢？下面，小编通实例演示来为大家逐一进行讲解。
2、1.直接在P标签内通过style属性进行设置。代码如下：<html> <head> <meta charset="utf-8"> <title>教程</title> </head> <body> <p style="display:inline;">我的第一个段落。</p>我在第一行，还是第二行？ <p>我的第二个段落。</p>我在第二行，还是第三行？ </body></html>可以看到这种方法只对定义了style属性的P标签起作用，而没有定义style属性的P标签仍然保持默认特性。
3、2.通过<style></style>标签对，在标签外部对所以P标签的默认属性进行修改。代码如下：<html> <head> <meta charset="utf-8"> <title>教程</title> <style> p{display:inline;height:200px;width:200px;border:1px solid #00F;} </style> </head> <body> <p>我的第一个段落。</p>我在第一行，还是第二行？ <p>我的第二个段落。</p>我在第一行，还是第二行？ </body></html>可以看到，这种方式对所有的P标签元素都产生作用，并且切换到内联模式后，设置的宽度、高度属性不再起作用。
4、3.定义分类样式，同样通过<style></style>标签对，在其中定义一个样式类，仅对引用了该类样式的元素产生作用。代码如下：<html> <head> <meta charset="utf-8"> <title>教程</title> <style> .class1 {display:inline;height:100px;width:100px;border:1px solid #00F;} </style> </head> <body> <h1 class="class1">我的第一个标题。</h1>我在第几行？ <p class="class1">我的第二个段落。</p>我在第几行？ </body></html>
5、如果要切换成其它显示模式，可以使用上面的三种方式，仅需修改display属性的值即可，切换成块级元素显示使用：display:block、行内块级元素显示使用：display:inline-block。利用CSS来display属性的值，可以轻易完成显示模式的切换。
