方框區塊概念

在不改變元素預設樣式前提下,元素在HTML中會“佔用”一個位置“,而佔用位置則是由元素的盒子模型來決定。

一、方框區塊概念圖示

 1,瀏覽器將每個標籤元素由上往下排列,每個元素個佔據一個空間

<h1>,<p>標籤,為區塊類型,各自佔據一整個水平空間,
彼此不會左右並排

2.利用DIV標籤(division)【區域分配】,將網頁有效率規劃

(1) Id名稱:在一張網頁裡頭只能 出現一次

(2) Class類別名稱:在一張網頁裡頭可以出現無數次

(3) css 裡頭名稱大小寫是有差別的

二、HTML布局的基本要點
(Box model & Normal flow)

1.盒子模式(Box model)

在HTML中元素的盒子模型分為兩種:塊狀元素(Block)及行内元素(Inline)
與Display屬性中的inline、block兩個屬性值不同

圖示示意:

總結

如果你不改變元素的預設樣式前提下,元素在HTML的普通流中會“佔用”一個位置“佔用”位置的大小、位置則是由元素的盒子模型來決定。

因此,在後續講的Position、Float屬性是否會使元素脫離這個普通流是一個關鍵點

2.HTML的普通流(Normal Flow)

(1)流覽器在讀取HTML原始程式碼的時候是根據元素在代碼出現的順序讀取

(2)最終元素的呈現方式是依據元素的盒子模型來決定的

(3)行內元素是從左到右,塊狀元素是從上到下

 

End