web十三講，CSS框模型
CSS框模型
-
CSS框模型(Box Model)規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。
-
元素框的最內部是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框外面是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。
-
padding內邊距
-
內邊距、邊框和外邊距都是可選的，預設值是零。
* { margin:0; padding:0; } -
width和height
-
在CSS中，width和height指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但會增加元素框的總尺寸。
-
例如：假設框的每個邊上有10個畫素的外邊距和5個畫素的內邊距。如果希望這個元素框達到100個畫素，就需要將內容的寬度設定為70畫素，請看下圖：
# box { width:70px; margin:10px; padding:5px; }
-
-
+ 提示：內邊距、邊框和外邊距可以作用於一個元素的所有邊，也可以作用於單獨的邊。
+ 提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
-
內邊距邊距屬性
屬性 描述 padding 設定元素的內邊距屬性。 padding-bottom 設定下內邊距 padding-left 設定左內邊距 padding-right 設定右內邊距 padding-top 設定上內邊距 -
CSS padding屬性定義內邊距，padding接受長度值或百分比值，但不允許使用負值。
-
例如：
-
所有h1元素的各邊都有10畫素的內邊距。
h1 {padding:10px;} -
還可以按照上、右、下、左的順序，分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值。
h1 {padding:10px 0.25em 2ex 20%;}- 假設給padding3個值，那麼第一個值是上內邊距、第二個值是右邊距和左邊距、第三個值是下邊距。
- 假設給padding2個值，那麼第一個值是上邊距、下內邊距，第二個值是左內邊距、右內邊距。
- 假設只給padding1個值，那麼所有的內邊距都使用這個值。
-
-
內邊距的百分比數值
-
可以為元素的內邊距設定百分比數值。百分比數值是相當於父元素的width計算的，這一點與外邊距一樣。所以，若父元素的width改變，它們也會改變。
-
注意：上下內邊距和左右內邊距一致，即上下內邊距的百分比數值會相對於父元素寬度設定，而不是相當於高度。
-
例如：若一個段落的父元素是div，那麼它的內邊距要根據div的width計算。
<div style="width:200px;" <p> This paragraph is contained within a DIV that has a width of 200 pixels.</p> </div>
-
-
單邊內邊距屬性
-
通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：
-
padding-top
-
padding-right
-
padding-bottom
-
padding-left
h1{ padding-top:10px; /* px 是畫素，相對於顯示器螢幕解析度而言。 */ padding-right:0.25em; /* em 是相對長度，相對於當前元素內文字的字型尺寸 */ padding-bottom:2ex; /* ex 相對長度單位。相對於字元“x”的高度。此高度通常為字型尺寸的一半 */ padding-left:20%; }
-
-
-
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type="text/css"> .test1 { padding: 1.5cm; } .test2 { padding: 1.5cm 0.5cm; } .test3{ padding:0px 10px 20px 40px; } </style> <title>內邊距</title> </head> <body> <table border="1"> <tr> <td class="test1"> 這個表格單元的每個邊擁有相等的內邊距1.5cm。 </td> </tr> </table> <br /> <table border="1"> <tr> <td class="test2"> 這個表格單元的上和下內邊距是 1.5cm，左和右內邊距是 0.5cm。 </td> </tr> </table> <br /> <table border="1"> <tr> <td class="test3"> 這個表格單元的上和下內邊距相同。 </td> </tr> </table> </body> </html>
-
border邊框
-
樣式border-style，邊框樣式有以下這些種類：
-
none：無邊框，預設值
-
hidden：隱藏邊框，常用於解決邊框衝突。
-
dotted：點線邊框，在很多瀏覽器中會呈現實線。
-
dashed：虛線邊框，在很多瀏覽器中會呈現實線。
-
solid：實線邊框。
-
double：雙線邊框。
-
groove：定義3D凹槽邊框，效果和border-color、border-width值相關。
-
ridge：定義3D壟狀邊框，效果和border-color、border-width值相關。
-
inset，定義3D inset邊框，效果和border-color、border-width值相關。
-
outset，定義3D outset邊框，效果和border-color、border-width值相關。
-
inherit，從父元素繼承邊框樣式。
-
邊框風格可以分別定義，順序是上、右、下、左，案例如下：
p.aside{border-style:solid dotted dashed double;} /* 上實線，右點線 下虛線 左雙線 */ -
定義單邊樣式：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
-
-
寬度border-width
-
通過border-width屬性為邊框指定寬度。
-
可定義單邊寬度
- 按照top-right-bottom-left的順序設定元素的各邊邊框。
-
也可以通過屬性分別設定邊框的寬度
-
bordder-top-width
-
bordder-right-width
-
bordder-bottom-width
-
bordder-left-width
案例：
p{ border-style:solid; bordder-top-width:15px; bordder-right-width:5px; bordder-bottom-width:15px; bordder-left-width:5px; }
-
-
注意：如果沒指定邊框樣式，那就沒有寬度。若希望邊框出現，就必須宣告一個邊框樣式。例如：
-
p {border-style:none;border-width:50px} -
儘管給邊框指定了寬度為50px，但由於邊框樣式為none，此時不僅邊框樣式不存在且寬度也會變成0——即邊框消失了。
-
-
-
顏色border-color
-
CSS使用一個簡單的border-color屬性，它一次可接受最多4個顏色值，即上、右、下、左這四條邊的顏色。
p{ border-style:solid; border-color:blue rgb(25%,35%,45%) #909090 red; } -
定義單邊顏色。
-
bordder-top-color
-
bordder-right-color
-
bordder-bottom-color
-
bordder-left-color
h1{ border-style:solid; border-color:black; border-right-color:red; }
-
-
透明邊框：transparent。這個顏色用於建立有寬度的不可見邊框。
a:link,a:visited{ border-stye:solid; border-width:5px; border-color:transparent; } a:hove {border-color:gray;}
-
-
-
margin外邊距
-
圍繞在元素邊框的空白區域是外邊距。
-
圍繞外邊距會在元素外建立額外的“空白”
-
設定外邊距的最簡單方法是使用margin屬性，這個屬性接受任何長度單位、百分比數值設定負值。
-
設定規則：
- 若缺少左外邊距的值，則使用右外邊距的。
- 若缺少下外邊距的值，則使用上外邊距的。
-
單邊外邊距屬性：
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
h2{ margin-top:20px; margin-right:30px; margin-bottom:30px; margin-left:20px; }
-
-
CSS外邊距合併
-
外邊距合併指的是，當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。
-
合併後外邊距的高度等於兩個發生合併的外邊距的高度中較大者。
-
-
+ 當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開)，它們的上外邊距和下外邊距也會發生合併。
-
外邊距合併的意義
-
若沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。
-
若外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。
-
+ 只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
小結
- CSS盒模型，把頁面元素當作“盒子”，則元素有：
- 邊界(margin)、
- 邊框(border)、
- 填充(padding)、
- 元素內容(content)
- 盒子具有4條邊，所以這些屬性都各有4個單邊子屬性，在使用時可以直接對某一條邊應用單邊子屬性設定其樣式，也可以按照一定順序依次設定各邊的樣式，設定方式比較靈活。