元素分類(lèi)--塊級(jí)元素

什么是塊級(jí)元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素,從而使a元素具有塊狀元素特點(diǎn)。

a{display:block;}

塊級(jí)元素特點(diǎn):

1、每個(gè)塊級(jí)元素都從新的一行開(kāi)始,并且其后的元素也另起一行。(真霸道,一個(gè)塊級(jí)元素獨(dú)占一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

3、元素寬度在不設(shè)置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設(shè)定一個(gè)寬度。

iv id="js-editor-container" class="cwrap-autoheight editor-container">
||

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>內(nèi)聯(lián)塊狀元素</title>
<style type="text/css">
div,p{background:pink;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>歡迎來(lái)到品用官網(wǎng)</p>
</body>

</html>





元素分類(lèi)--內(nèi)聯(lián)元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素行內(nèi)元素)(inline)元素。當(dāng)然塊狀元素也可以通過(guò)代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素,從而使 div 元素具有內(nèi)聯(lián)元素特點(diǎn)。

 div{ display:inline; }

......

<div>我要變成內(nèi)聯(lián)元素</div>

內(nèi)聯(lián)元素特點(diǎn):

1、和其他元素都在一行上;

2、元素的高度、寬度及頂部和底部邊距不可設(shè)置;

3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

小伙伴們你們觀(guān)查一下下邊代碼段,有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題,內(nèi)聯(lián)元素之間有一個(gè)間距問(wèn)題,感興趣的小伙伴可以去查看。

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行內(nèi)元素標(biāo)簽</title>
<style type="text/css">
a,span,em{ background:pink;/*設(shè)置a、span、em標(biāo)簽背景顏色都為粉色*/ }
</style>
</head>
<body>
<a href="">百度</a> <a href="">品用</a> <span>33333</span>
</ body>

</html>


  哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀(guān)的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無(wú)需額外費(fèi)用,即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。