網頁佈局的本質

網頁佈局過程：

1. 先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。
2. 利用 CSS 設定好盒子樣式，然後擺放到相應位置。
3. 往盒子裡面裝內容.
   網頁佈局的核心本質： 就是利用 CSS 擺盒子。

盒子模型：

就是把 HTML 頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
CSS 盒子模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊框、外邊距、內邊距、和 實際內容

邊框（border）

border可以設定元素的邊框,邊框屬性允許你指定一個元素邊框的樣式和顏色。
邊框有三部分組成:邊框寬度(粗細) 邊框樣式 邊框顏色
語法：

border : border-width || border-style || border-color
 

邊框樣式 border-style 可以設定如下值：

 none：沒有邊框即忽略所有邊框的寬度（預設值）
 solid：邊框為單實線(最為常用的) 
 dashed：邊框為虛線 
 dotted：邊框為點線

邊框簡寫：

border: 1px solid red; 沒有順序 

邊框分開寫法：

border-top: 1px solid red; /* 只設定上邊框， 其餘同理 */

注意：
雖然border-width,、border-style和 border-color 簡寫屬性接受最多4個引數來為不同的邊設定寬度、風格和顏色，但boder屬性只接受三個引數，分別是寬度、風格和顏色，所以這樣會使得四條邊的邊框相同。

表格的細線邊框

border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。
語法：

border-collapse:collapse;

collapse 單詞是合併的意思,border-collapse: collapse; 表示相鄰邊框合併在一起

邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小。因此我們有兩種方案解決:

1. 測量盒子大小的時候,不量邊框.
2. 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度