透過設定元素的display屬性實作轉換
display取值:inline(行內)、block(區塊層級)、inline-block(行內區塊層級)
(影片教學建議:css影片教學)
下面這個實例就是將span的顯示模式轉換為區塊級,將div的顯示屬性轉換為行內區塊級,將img的顯示模式轉換為區塊級
<style> /*将span转换为块级元素--*/ *{ margin: 0; padding: 0; } span{ display: block; background-color: red; width: 400px; height: 400px; } /*将div转换为行内块级元素*/ div{ display: inline-block; background-color: green; width: 300px; height: 300px; } /*将img转换为块级元素*/ img{ display: block; width: 200px; } </style>
效果圖如下:
#建議教學:css快速入門
以上是如何轉換css元素的顯示模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!