CSS學習筆記二

盒子模型：（重點）

• 盒子模型（CSS框模型）規定了元素框處理元素內容、內邊距、邊框、外邊框等樣式

記住上面這一張圖！一定要記住！一定！一定！

內邊距、邊框和外邊距是可選參數屬性，預設值：0 ；很多元素由用戶代理樣式表設置外邊距和邊框，通過將元素的 margin外邊距和padding內邊距設置為 0 來覆蓋這些瀏覽器樣式

在CSS中，width和height指的是內容區域的寬度和高度；增加內邊距、邊框和外邊距不會影響內容區域的尺寸控制項，但是會增加元素框的總尺寸；

#box {
    width: 70px;
    padding: 5px;
    margin: 10px;
}

內邊距：

• 元素的內邊距在邊框和內容元素區之間。

• padding屬性：定義元素邊框於元素內容之間的空白區域

  padding接受 長度值、百分比值，但不允許負數

單邊內邊距屬性：

• padding-top：上內邊距
• padding-right：右內邊距
• padding-bottom：下內邊距
• padding-left：左內邊距

h1 {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

當然，css也支持內邊距一起設計內邊距

h1 {
    padding:10px 20px 10px 20px;<!-- 上右下左順序 -->
}

邊框：

• 元素的邊框（border）是元素內容與內邊距的一條或多條線

邊框與背景：

邊框繪製在 元素的背景 之上！

邊框樣式：

• border-style屬性： 定義10個不同的樣式

  none	定義無邊框。
  hidden	與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
  dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
  dashed	定義虛線。在大多數瀏覽器中呈現為實線。
  solid	定義實線。
  double	定義雙線。雙線的寬度等於 border-width 的值。
  groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
  ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
  inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
  outset	定義 3D outset 邊框。其效果取決於 border-color 的值。
  inherit	規定應該從父元素繼承邊框樣式。

如果定義無邊框，就需要設置樣式為：none或者outset

• 定義單邊邊框樣式：
  • border-top-style：上
  • border-right-style：右
  • border-bottem-style：下
  • border-left-style：左

邊框寬度：

• border-width屬性：定義邊框的寬度
  • 指定長度之：px / em
  • 關鍵字：thin、medium（預設）、thick
• 定義單邊寬度（方法雷同）

邊框顏色：

• border-color屬性：定義邊框的顏色
• 定義單邊顏色（方法雷同）

總結：

外邊距：

• margin屬性：設置外邊距

值複製：

p {margin: 0.5em 1em 0.5em 1em;}
等價於：
p {margin: 0.5em 1em;}

如果缺少左外邊距，則使用右外邊距的值；以此類推

單邊外邊距：

• margin-top:
• margin-right:
• margin-bottom:
• margin-left:

外邊距合併：

• 當兩個垂直外邊距相遇是，形成一個外邊距

• 合併後的外邊距的高度等於兩個發生合併的外邊的最大者

當一個元素包含另一個元素中時，它們的上/下外邊距會發生合併：

CSS 定位：

• CSS定位，屬於允許對元素進行定位

定位：

定位和浮動：

CSS為定位和浮動提供了一些屬性，利用屬性可以建立列式佈局，將佈局的一部分重疊。

一切皆為框

div , h1 , p等元素都屬於塊級元素。

• display屬性：

定位機制：

CSS基本定位機制：普通流，浮動和絕對定位

除非專門單獨定義，否則所有框都是預設在普通流中定位

塊級框從上到下一個接一個排列，框之間的垂直距離是由框的垂直外邊距計算出來的。

行內框在一行內的水平佈置，使用水平內邊距、邊框、外邊距來調整之間的間距，但是，垂直內邊距、邊框和外邊距不影響行內框的高度，由一行形成的水平框：行框（Line Box），行框的高度總是容納包含的所有行內框，但是可以通過設置行高（框的高度）

position屬性：

• position屬性：可以選擇4種不同類型的定位
  • static：正常生成框體，塊級元素框會是一個矩形框，作為文本流的一部分，行內元素會創建一個或多個行框
  • relative：元素框偏移某個距離，元素保存其定位前的形狀
  • absolute：元素框從文檔流完全刪除，相對於其包含塊定位
  • fixed：元素框表現類似將position設置為absolute，不過其包含塊是視窗本身
• CSS 定位屬性允許你對元素進行定位。

相對定位：relative

相對定位：對一個元素進行相對定位，通過設置垂直或水平位置，讓元素相對於起點進行移動

#box {
    position: relative;
    left: 30px;
    top: 20px;
}

如上；將top設置為20px表示框從上往下（距離上）偏移20px，將left設置為30px表示框從左往右（距離左）便宜30px。

絕對定位：absolute

絕對定位：通過設置垂直或水平位置，讓元素絕對定位（以視窗左上角做起點）

#box {
    position: absolute;
    left: 30px;
    top: 20px;
}

浮動定位：float

浮動的框可以向左/向右移動，知道外邊接觸到另一個框的邊框停止

由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊表現的向浮動窗不存在一樣。

浮動：

框1向右浮動，直到框1接觸到它所在框的邊緣時候才停止。

框1從右側向左側浮動，由於不占用文檔空間，所以框1會覆蓋框2

如果所有框都向左移動，那麼框1接觸到元素框的邊框停止，另外兩個框接觸到前一個框的邊框，停止浮動。

如果元素框大小無法接受三個浮動框的大小，就會向下移動……

float屬性：

• float屬性實現元素的浮動

行框和清理：

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框

因此，創建浮動框可以使文本圍繞圖像：

clear屬性：