块级元素和内联元素怎么转化（块元素和行内元素怎么转换）

大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。

可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。

块级元素和内联元素怎么转化,块元素和行内元素怎么转换(1)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .inline1 { display: inline; } /**每个子元素制定inline1很麻烦,通过父组件指向子组件的方式统一定义样式*/ /**样式下的某个组件用空格**/ .inline2 li { display: inline; } .block1 span { display: block; } </style> </head> <body> <div> <pre> 块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 内联元素(inline)特性：和相邻的内联元素在同一行; </pre> <div> <span>如ul中每个li都是块级元素默认情况,每个li都独占一行</span> <ul> <li>a</li> <li>b</li> </ul> <span>默认的块级元素内容变成内联元素,同级元素显示在一行,用display:inline</span> <ul> <li class="inline1">a</li> <li class="inline1">b</li> </ul> <span>默认的块级元素内容变成内联元素,同级元素显示在一行,用display:inline (样式下的某个组件用空格: .inline2 li)</span> <ul class="inline2"> <li>a</li> <li>b</li> </ul> <span>如span是内联元素,默认情况,每个span都会显示在一行</span> <div> <span>span2</span> <span>span3</span> <span>span3</span> </div> <span>默认的内联元素变成块级元素,同级元素显示为快,独占一行,用display:block</span> <div class="block1"> <span>span2</span> <span>span3</span> <span>span3</span> </div> </div> </div> </body> </html>