css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素

這篇文章主要介紹了css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都定制網(wǎng)站方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及崗?fù)?/a>等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

在css中，可以使用display屬性來(lái)將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素，只需要給內(nèi)聯(lián)元素添加“display: block;”樣式即可。display屬性用于定義建立布局時(shí)元素生成的顯示框類型，當(dāng)該屬性的值為“block”時(shí)，指定元素就會(huì)以塊級(jí)元素類型顯示。

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

根據(jù)css顯示分類，HTML元素被分為 三種類型：塊狀元素，內(nèi)聯(lián)元素，內(nèi)聯(lián)塊元素。

其中：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
             a,p{
                background-color: red;
				height: 100px;
				width: 100px;
				margin-top: 50px;
				margin-bottom: 50px;
            }
        </style>
    </head>

    <body>
        <a href="#">a標(biāo)簽</a> <a href="#">a標(biāo)簽</a><span>span標(biāo)簽</span>
		<p>p標(biāo)簽</p>
		<span>span標(biāo)簽</span>
    </body>

</html>

css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素

說(shuō)明：a和p標(biāo)簽設(shè)置了同樣的樣式，但a是行內(nèi)元素，height、width、margin-top、margin-bottom屬性都無(wú)法起作用；而p是塊狀元素，這些屬性可以起作用。

css將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素

在css中，只需要給內(nèi)聯(lián)元素設(shè)置display：block樣式即可將其轉(zhuǎn)換為塊元素；當(dāng)然，塊級(jí)元素也可使用“display:inline”樣式轉(zhuǎn)為內(nèi)聯(lián)元素。

display屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于 HTML 等文檔類型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒(méi)有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。

示例1：內(nèi)聯(lián)元素 轉(zhuǎn)為 塊級(jí)元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span{
				background-color: pink;
			}
			.box{
				display: block;	/*內(nèi)聯(lián)元素 轉(zhuǎn)為塊級(jí)元素 */
			}
		</style>
	</head>

	<body>
		<span>內(nèi)聯(lián)元素1</span>
		<span class="box">內(nèi)聯(lián)元素2</span>
		<span class="box">內(nèi)聯(lián)元素3</span>
	</body>

</html>

css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素

示例2：塊級(jí)元素轉(zhuǎn)為內(nèi)聯(lián)元素

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

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

</html>

css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素

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

當(dāng)前題目：css如何將內(nèi)聯(lián)元素轉(zhuǎn)為塊級(jí)元素
URL分享：http://www.muchs.cn/article16/ippjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站制作、App開(kāi)發(fā)、外貿(mào)建站、定制網(wǎng)站、面包屑導(dǎo)航

廣告

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

成都定制網(wǎng)站建設(shè)