CSS_盒子模型
2016-10-22
《css入門經典》第6章
1.每個HTML元素對應于一個顯示盒子，但不是所有的元素都顯示在屏幕上。
2.HTML元素顯示為CSS顯示盒子的真正方法稱為“可視格式化方式”。可視格式化方式告訴瀏覽器應該如何在屏幕上顯示HTML內容。
3.元素類型：
（1）塊元素（block）：以新行開始和結束。<div>，<blockqute>,<br>等。
（2）內聯元素（inline）：沒有獨占一行，而是包含于文本流之中。<em>，<input>，<a>,<img>等。
4.display屬性
通過設置display屬性值可以改變元素的類型
display:none;不顯示
display:block;設置為塊元素
display:inline;設置為內聯元素
5.匿名盒
當標簽包含混合內容，比如文本和一些HTML標簽時，會產生沒有HTML標簽的盒子，稱為匿名盒。匿名盒的樣式設置與其包含盒相同。
eg.<h1>Hello <em>World!</em></h1>? 由圖可知：文本Hello為匿名盒。
6.在HTML中，<head>標簽的定義為display:none;。所以我們在頁面中看不到<head>標簽的內容。
7.盒子的顯示屬性
邊距：margin
邊框：border
填充：padding
（1）邊距margin:即兩個盒子之間的間距。邊距總是透明的。
注意：重疊邊距，即兩個垂直方向的盒子，它們在垂直方向的間距使用兩個元素間的最大值。邊距只在塊元素上重疊，并且是在垂直方向重疊，不是水平方向。
（2）邊框border：
border屬性設置：選擇符{ border:大小 樣式 顏色; }
| border-width | 規定邊框的寬度。 |
| border-style | 規定邊框的樣式。 |
| border-color | 規定邊框的顏色。 |
| inherit | 規定應該從父元素繼承 border 屬性的設置。 |
?
Width:
| thin | 定義細的邊框。 |
| medium | 默認。定義中等的邊框。 |
| thick | 定義粗的邊框。 |
| length | 允許您自定義邊框的寬度。 |
| inherit | 規定應該從父元素繼承邊框寬度。 |
?
Style:
| 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 | 規定應該從父元素繼承邊框樣式。 |
?
?
描述
最不可預測的邊框樣式是 double。它定義為兩條線的寬度再加上這兩條線之間的空間等于 border-width 值。不過，CSS 規范并沒有說其中一條線是否比另一條粗或者兩條線是否應該是一樣的粗，也沒有指出線之間的空間是否應當比線粗。所有這些都有用戶代理決定，創作人員對這個決定沒有任何影響。（W3School）
（3）填充padding:內容周圍的空間。填充總是和內容本身的背景顏色相同。
注意：
（1）表格單元<td>即不是內聯元素也不是塊元素，表格單元的顯示值為display:table-cell。table-cell元素不能有邊距。
（2）行長em：在CSS中，一行長定義為等于位置大小的量度，是一個正方形，高度和寬度等于字體的高度。
轉載于:https://www.cnblogs.com/LinSL/p/5987857.html
總結
- 上一篇： MIT JOS学习笔记01：环境配置、B
- 下一篇： JavaScript、HTML、CSS学