一、块元素转行内元素：display:inline
二、行内元素转块元素：display:block
div{ display: inline; /*无效 500px; height: 500px; */ background-color: red; } p{ display: inline-block; } span{ display: block; 400px; height: 300px; background-color: blue; } </style> </head> <body> <div>块内元素转行内元素</div> <span>行内元素转块元素</span>
三、块和行内元素转行内块元素：display:inline-block
<style type="text/css"> div,a,span,strong{ display: inline-block; width: 200px; height: 200px; background-color: yellow; text-align: center; vertical-align: top; } </style> </head> <body> <div>块元素转行内块元素</div> <a href="#">a行内元素转行内块元素</a> <span>span行内元素转行内块元素</span> <strong>strong行内元素转行内块元素</strong>