當前位置：
首頁 >
内联 块转换
發布時間：2025/6/15
32
豆豆
css 所有內聯（行內）元素 都可以通過 display： block 轉化成 塊元素
css 所有塊元素 都可以通過 display： inline轉化成內聯（行內）元素
一.內聯元素轉換為塊級元素:
讓內聯元素產生浮動或者將它的display屬性值設置為block即可。例如:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title> <style type="text/css"> .myfloat{ width:200px; height:200px; border:1px solid red; float:right; } .mydisplay{ width:200px; height:200px; border:1px solid green; display:block; } </style> </head> <body> <span class="myfloat">我將要浮動</span> <span class="mydisplay">我將要添加display屬性</span> </body> </html>可以看到span已經被轉換為塊級元素，因為塊級元素才可以設置寬度和高度。
塊級元素轉換為內聯元素:
將塊級元素的display屬性值設置為inline即可。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title> <style type="text/css"> .mytest{ width:200px; height:200px; border:1px solid red; display:inline; } </style> </head> <body> <div class="mytest">我將要浮動</div> </body> </html>上面的代碼中設置的寬度和高度都已經失效，說明對象已經被轉換為內聯元素。
總結
- 上一篇： CSS属性中Display与Visibi
- 下一篇： css清除浮动float的三种方法总结