css如何將其他類型元素轉為內聯(lián)元素

這篇文章主要介紹了css如何將其他類型元素轉為內聯(lián)元素的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css如何將其他類型元素轉為內聯(lián)元素文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)主營牙克石網站建設的網絡公司,主營網站建設方案,重慶APP開發(fā),牙克石h5微信小程序定制開發(fā)搭建,牙克石網站營銷推廣歡迎牙克石等地區(qū)企業(yè)咨詢

在css中，可以使用display屬性來實現(xiàn)元素類型的轉換，將其他類型元素轉為內聯(lián)元素；只需要給塊級元素或內聯(lián)塊元素設置“display:inline”樣式即可。display屬性用于定義建立布局時元素生成的顯示框類型，當該屬性的值為“inline”時，指定元素就會以內聯(lián)元素類型顯示。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

HTML元素被分為三種類型：塊狀元素，內聯(lián)元素，內聯(lián)塊元素。

其中：

內聯(lián)元素：與其他行內元素并排；不能設置寬高，默認的寬度就是文字的寬度。
元素有：span i a b strong em sub sup u label br font

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span{
				width: 100px;/* 無效 */
				height: 100px;/* 無效 */
				background-color: plum;
			}
		</style>
	</head>

	<body>
		<span>元素1</span><span>元素1</span>
	</body>

</html>

css如何將其他類型元素轉為內聯(lián)元素

塊級元素：霸占一行，不能與其他任何元素并列；能接受寬高，如果不設置寬度，那么寬度將默認變?yōu)楦讣壍?00%。
元素有：div p h2-h7 hr ul ol li dl dd dt form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: plum;
				border: 1px solid red;
			}
			p{
				height: 50px;
				background-color: gray;
			}
		</style>
	</head>

	<body>
		<div>div元素1</div><div>div元素2</div>
		<p>p元素</p>
	</body>

</html>

css如何將其他類型元素轉為內聯(lián)元素

內聯(lián)塊元素：與其他行內元素并排；元素的高度、寬度、行高以及頂和底邊距都可設置。
元素有：img textarea input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width: 200px;/* 有效 */
			}
		</style>
	</head>

	<body>
		<img src="img/1.jpg" /><img src="img/1.jpg" />
		<textarea></textarea>
		<textarea style="width: 200px;height: 100px;"></textarea>
	</body>

</html>

css如何將其他類型元素轉為內聯(lián)元素

css將其他類型元素轉為內聯(lián)元素

在css中，可以使用display屬性實現(xiàn)元素類型的轉換。

display屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對于 XML，由于 XML 沒有內置的這種層次結構，所有 display 是絕對必要的。

block：此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline：默認。此元素會被顯示為內聯(lián)元素，元素前后沒有換行符。
inline-block：內聯(lián)塊元素。（CSS2.1 新增的值）

因此，只需要給塊級元素或內聯(lián)塊元素設置“display:inline”樣式即可將其轉換為內聯(lián)元素。

實例1：塊級元素轉內聯(lián)元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				background-color: pink;
			}
			.box{
				display: inline;	/* 塊級元素轉為內聯(lián)元素 */
			}
		</style>
	</head>

	<body>
		<div>塊級元素1</div>
		<div class="box">塊級元素2</div>
		<div class="box">塊級元素3</div>
	</body>

</html>

css如何將其他類型元素轉為內聯(lián)元素

實例2：內聯(lián)塊元素轉內聯(lián)元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img,textarea{
				display:inline;	/* 內聯(lián)塊元素轉為內聯(lián)元素 */
			}
		</style>
	</head>

	<body>
		<img src="img/1.jpg" />
		<img src="img/1.jpg" />
		<textarea></textarea>
		<textarea></textarea>
	</body>

</html>

css如何將其他類型元素轉為內聯(lián)元素

關于“css如何將其他類型元素轉為內聯(lián)元素”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“css如何將其他類型元素轉為內聯(lián)元素”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：css如何將其他類型元素轉為內聯(lián)元素
本文鏈接：http://m.rwnh.cn/article8/jcjeop.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、企業(yè)網站制作、云服務器、動態(tài)網站、App設計、品牌網站制作

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

css如何將其他類型元素轉為內聯(lián)元素