前端菜鳥筆記 Day-4 CSS佈局
文章大綱來源： 【Day 3】HTML複習 + CSS基礎
- CSS框模型
- 寬度和高度
- 內邊距
- 外邊距
- CSS定位
- 浮動
CSS框模型
內容引用： CSS 框模型概述
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
元素的背景應用於**由內容和內邊距(padding)、邊框(border)組成的區域。
邊框以外是外邊距(margin)，外邊距預設是透明的，因此不會遮擋其後的任何元素。
內邊距、邊框和外邊距都是可選的，預設值是零；內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。
寬度和高度
定義元素的寬高屬性。
width height
可以用 px 進行數字定義，如 1px ；也可以用百分比 100% 等表示，百分比表示佔父元素的百分之多少。
注：行內元素不能定義寬高，塊元素和行內塊元素可以。
內邊距
內容引用： CSS 內邊距
元素的內邊距在邊框和內容區之間。
padding 屬性定義元素的內邊距，接受長度值或百分比值，但不允許使用負值。
h1 { padding: 10px; }
還可以按照 上、右、下、左 的順序分別設定各邊的內邊距，各邊可以使用不同的單位或者百分比值：
h1 { padding: 10px 0.25em 2ex 20%; }
單邊內邊距屬性
也可以使用下面四個單獨的屬性分別設定：
- padding-top
- padding-right
- padding-bottom
- padding-left
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
內邊距的百分比
之前在寬高設定部分使用百分比，可以相對父元素的寬高設定。
內邊距的百分數值是相對於 父元素的寬度 計算的。
/* 段落的內邊距設定為父元素 width 的 10% */
p { padding: 10%; }
注意上面解釋定義的部分， padding 只參考了父元素的 width ，也就是上下內邊距也是參照的 width ，而不是參照常理上父元素的 height ； padding-top / padding-bottom 也是一樣參照的 width 。
外邊距
內容引用： CSS 外邊距
圍繞在元素邊框的透明區域是外邊距。
設定外邊距就是使用 margin 屬性，這個屬性接受任何長度單位（畫素、英寸、毫米或 em）、百分數值 甚至負值 。
margin 可以設定為 auto 。
基本上外邊距和內邊距 padding 書寫方式類似，甚至在百分數參考父元素 width 這一點上也是一樣的。
單邊外邊距屬性
與單邊內邊距屬性類似：
- margin-top
- margin-right
- margin-bottom
- margin-left
不再更多的說明。
值複製
有時會輸入一些重複的值：
p { margin: 0.5em 1em 0.5em 1em; }
通過值複製，可以不必重複的宣告屬性：
/* 上面的規則與下面的規則是等價的 */
p { margin: 0.5em 1em; }
CSS 定義了一些規則，允許為 外邊距 指定少於 4 個值：
- 缺少 左，則使用 右 的值
- 缺少 下，則使用 上 的值
- 缺少 右，則使用 上 的值
h1 { margin: 0.25em 1em 0.5em; }
/* 等價於 0.25em 1em 0.5em 1em */
h2 { margin: 0.5em 1em; }
/* 等價於 0.5em 1em 0.5em 1em */
p { margin: 1px; }
/* 等價於 1px 1px 1px 1px */
CSS定位
內容引用： CSS 定位 (Positioning)
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。
一切皆為框
div 、 h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為 一塊內容 ，即“ 塊框 ”。
與之相反， span 和 strong 等元素稱為行內元素，這是因為它們的內容顯示在行中，即“ 行內框 ”。
可以使用 display 屬性改變生成的框的型別。
如果一個框的屬性設定為 display:none ，該框及其所有內容就不再顯示，不佔用文件中的空間。
但是一種情況下， 即使沒有顯式定義（包括環繞標籤），也會建立塊級元素 ，這種情況發生在把一些文字新增到一個塊級元素（比如 div）的開頭。即使沒有把這些文字定義為段落，它也會被當作段落對待：
<div> some text <p>Some more text.</p> </div>
在這種情況下，這個框稱為 無名塊框 ，因為它不與專門定義的元素相關聯。
定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
所有框預設都在普通流中定位。
塊級框從上到下一個接一個地排列， 框之間的垂直距離 是由框的 垂直外邊距 計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是， 垂直 內邊距、邊框和外邊距 不影響行內框的高度 。
由一行形成的水平框稱為 行框 （Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
position 屬性
通過使用 position 屬性，我們可以選擇 4 種不同型別的定位。
-
static：元素框正常生成。 -
relative： 元素框偏移某個距離 。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。 -
absolute：元素框從文件流完全刪除，並相對於其包含塊定位。 -
fixed：類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
相對定位
內容引用： CSS 相對定位
設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
簡單來說就是，原來所佔位置還是佔那個位置，但是元素將會進行 偏移顯示 。
#box_relative {
position: relative;
/* 框將在原位置頂部下面20畫素的地方 */
top: 20px;
/* 框將在原位置左部右邊30畫素的地方 */
left: 30px;
}
絕對定位
內容引用： CSS 絕對定位
設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位。
絕對定位使元素的位置與文件流無關，因此不佔據空間，這一點與相對定位不同。
簡單來說就是，元素不再佔用任何文件流的空間，只剩下相對於包含塊的 定位顯示 。
#box_relative {
position: absolute;
/* 框將在包含塊頂部下面20畫素的地方 */
top: 20px;
/* 框將在包含塊左部右邊30畫素的地方 */
left: 30px;
}
注意以上說明的 包含塊的概念 是：
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（一般情況下是HTML元素）。
上述概念中， 已定位 指的就是 position 屬性設定了 relative 、 absolute 和 fixed 之一的元素； 最近的已定位 指的是元素父子鏈往從本元素向上尋找，其中最近的已定位祖先元素。
提示：因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。
浮動
內容引用： CSS 浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”。
float 屬性
使用浮動的方法：
img {
/* 把影象向右浮動 */
float: right;
}
float 可能的值：
-
none：預設值，元素不浮動，並會顯示在其在文字中出現的位置。 -
left：元素向左浮動。 -
right：元素向右浮動。 -
inherit：從父元素繼承float屬性的值。
行框和清理
浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以建立浮動框可以使文字圍繞影象。
註釋：這裡說的行框就是之前說的無名塊框。
如果想要阻止行框圍繞浮動框，需要對該框(?)應用 clear 屬性，屬性值可以是 left 、 right 、 both 或 none ， 它表示框的哪些邊不應該挨著浮動框 。
在這裡將不會進一步詳細的說明浮動和清理的深入用法和機制說明（主要是自己暫時不太喜歡用，到時候涉及到的時候再開專題說明吧，咕咕咕）。
個人靜態部落格：
- 氣泡的前端日記： https://rheabubbles.github.io