溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css中行元素與塊元素怎么互相轉換”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中行元素與塊元素怎么互相轉換”吧!
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在HTML中，標簽分為兩種等級：
行內元素：與其他行內元素并排；不能設置寬高，默認的寬度就是文字的寬度。
塊級元素：霸占一行，不能與其他任何元素并列；能接受寬高，如果不設置寬度，那么寬度將默認變為父級的100%。
例：<p>標簽就是一個塊級元素，<span>標簽就是一個行內元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
background: paleturquoise;
}
span{
background: paleturquoise;
}
</style>
</head>
<html>
<body>
<p>測試代碼 p標簽</p>
<p>測試代碼 p標簽</p>
<span>測試代碼 span標簽</span>
<span>測試代碼 span標簽</span>
</body>
</html>
但元素的類型是進行轉換的，我們可以利用css display屬性實現行元素和塊元素的相互轉換。
display 屬性規定元素應該生成的框的類型。
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline 默認。此元素會被顯示為內聯（行內）元素，元素前后沒有換行符。
將行元素轉為塊元素
在行內元素中設置display:block;就可以讓行內元素變成塊級元素。
將塊元素轉為行元素
在塊級元素中設置display:inline;就可以讓塊級元素變成行內元素。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
background: paleturquoise;
display: inline;
}
span{
background: paleturquoise;
display: block;
}
</style>
</head>
<html>
<body>
<p>測試代碼 p標簽</p>
<p>測試代碼 p標簽</p>
<span>測試代碼 span標簽</span>
<span>測試代碼 span標簽</span>
</body>
</html>
到此，相信大家對“css中行元素與塊元素怎么互相轉換”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
