块转行内:display:inline
行内转块:display:block
块、行内元素转换为行内块:display:inline-block
块转行内:
div{
width: 100px;
height: 100px;
background-color: skyblue;
display:inline; /*块级标签转化为行内标签*/
}
<div>123</div>
<div>456</div>
<div>789</div>
行内转块:
span{
width: 100px;
height: 100px;
background-color:hotpink;
display: block; /*行内标签转化为块级标签显示模式 */
}
<span>qwe</span>
<span>rty</span>
<span>uio</span>
块、行内元素转换为行内块:
a{
width: 50px;
height: 20px;
background-color: deeppink;
display: inline-block;/*行内标签转化为行内块块级标签显示模式 */
}
<a href="#">123</a>
<a href="#">456</a>
本文介绍了如何使用CSS将块级元素转换为行内元素,行内元素转换为块级元素,以及如何将两者转换为行内块元素。通过具体的样式设置和示例代码,帮助读者更好地理解不同显示模式的应用场景。
648

被折叠的 条评论
为什么被折叠?



