css 塊狀元素和內(nèi)聯(lián)元素

2024-07-11 08:26:54

字體：大中小

供稿：網(wǎng)友

在用CSS布局頁面的時(shí)候，我們會(huì)將HTML標(biāo)簽分成兩種，塊狀元素和內(nèi)聯(lián)元素（我們平常用到的div和p就是塊狀元素，鏈接標(biāo)簽a就是內(nèi)聯(lián)元素）。是在CSS布局頁面中很重要的兩個(gè)概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內(nèi)聯(lián)元素的定義。
注：這節(jié)課看似挺長，其實(shí)內(nèi)容很少，通過舉例子讓大家更容易理解而已，不要被眼前的文字和代碼嚇到喲~
塊狀元素
一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。
內(nèi)聯(lián)元素
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，它允許其他內(nèi)聯(lián)元素與其位于同一行，但寬度(width)高度(height)不起作用。常見內(nèi)聯(lián)元素為“a”。
做了個(gè)對(duì)比表，幫助大家更容易理解。
塊狀元素內(nèi)聯(lián)元素
是否允許其他元素同處一行 no yes
width和height是否起作用 yes no
對(duì)于上面的概念，我們用實(shí)例的方式給大家講明白，要注意聽喲~
要求：ID為div1的紅色(#900)區(qū)域，寬度和高度均為300像素，并且包含一個(gè)ID為div2的綠色區(qū)域，長度寬度
均為100像素的div2。
CSS代碼如下：
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
HTML代碼如下：
<div id="div1">
<div id="div2"></div>
</div>
為了方便初學(xué)者更好的學(xué)習(xí)，我把完整的代碼發(fā)出來

復(fù)制代碼

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>“可容納內(nèi)聯(lián)元素和其他塊狀元素”</title>
<style type="text/css">

</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

怎么樣，是不是下面的效果