css 塊狀元素和內聯元素

2024-07-11 08:46:15

字體：大中小

來源：轉載

供稿：網友

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

復制代碼

上一篇：CSS 理解盒子模型

下一篇：CSS 盒模型、塊狀元素與內聯元素、CSS選擇器