前端菜鳥筆記 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，它表示框的哪些邊不該該挨着浮動框。

在這裏將不會進一步詳細的說明浮動和清理的深刻用法和機制說明（主要是本身暫時不太喜歡用，到時候涉及到的時候再開專題說明吧，咕咕咕）。

---

我的靜態博客：

• 氣泡的前端日記： rheabubbles.github.io