CSS之——盒子模型、盒子的定位與浮動
一、CSS盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model):
- Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
- Content(內容) - 盒子的內容,顯示文字和影象。
二、網頁佈局與盒子模型
1,標準文件流
標準文件流:指在不使用其他與排列和定位相關的特殊 CSS 規則時,各種元素的排列規則;
2,塊級元素 VS 行內元素
塊級元素:以一個塊的形式展現,跟同級的兄弟塊依次豎直排列,左右撐滿,比如<div>; 行內元素:以普通的一個 DOM 節點展現,跟同級的兄弟元素橫向排列,排滿後,自動換行,比如<span>;
三、盒子再標準流中的定位
1,行內元素之間的水平 margin
marin-right+margin-left
2,塊級元素之間的豎直 margin
Margin-bottommargin-top 以大的為標準
3,巢狀盒子之間的 margin
子塊的 margin 將以父塊的內容為參考
4,margin 屬性可以設定成負值
四、盒子的浮動與定位
1,盒子浮動 float
Float 屬性: 預設是 none ,按照標準流來定位;
Left:左懸浮;
Right:右懸浮;
2,使用 clear 清除浮動的影響
Clear 屬性: 預設是 none,允許兩邊都可以有浮動物件;
Left: 不允許左邊有浮動物件
Right:不允許右邊有浮動物件
Both:不允許有浮動物件
3,盒子定位 position
Position 屬性: 預設是 static,按照標準流來定位;
Relative:相對定位,相對於原本的標準位置偏移指定的距離;
Absolute:絕對定位,以它的包含框為基準進行偏移;(包含框是指含有posistion屬性的盒子)
Fixed:固定定位,以瀏覽器視窗為基準進行定位
4,z-index 空間位置
Z-index 空間位置,預設是 0,z-index 值大的頁面位於其值小的上方;
5,盒子 display 屬性
Display: Inline:把元素變成內聯元素;
Block:把元素變成塊級元素