元素分類--塊級元素
什么是塊級元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素,從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點:
1、每個塊級元素都從新的一行開始,并且其后的元素也另起一行。(真霸道,一個塊級元素獨占一行)
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。
<!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>歡迎來到品用官網(wǎng)</p>
</body>
</html>

元素分類--內(nèi)聯(lián)元素
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素(行內(nèi)元素)(inline)元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素,從而使 div 元素具有內(nèi)聯(lián)元素特點。
div{ display:inline; }
......
<div>我要變成內(nèi)聯(lián)元素</div>
內(nèi)聯(lián)元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設置;
3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。
小伙伴們你們觀查一下下邊代碼段,有沒有發(fā)現(xiàn)一個問題,內(nèi)聯(lián)元素之間有一個間距問題,感興趣的小伙伴可以去查看。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行內(nèi)元素標簽</title>
<style type="text/css">
a,span,em{ background:pink;/*設置a、span、em標簽背景顏色都為粉色*/
}
</style>
</head>
<body>
<a href="">百度</a> <a href="">品用</a> <span>33333</span>
</
body>
</html>

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