一. 盒子模型簡介
css將頁面中的所有元素都設定成了乙個矩形的盒子
將元素設定為矩形的盒子後，對頁面的布局就變成了將不同的盒子擺放到不同的位置
每乙個盒子都由以下幾個部分組成：內容區（content）、內邊距（padding）、邊框（border）、外邊距（margin）
二. 內容區（content）
使用width來設定盒子內容區的寬度
使用height來設定盒子內容區的高度
三. 邊框（border）
邊框屬於盒子的邊緣，邊框裡邊屬於盒子的內容，出了邊框都是盒子的外部
要為乙個元素設定邊框必須指定三個樣式：border-width: 邊框的寬度、border-color: 邊框的顏色、border-style: 邊框的樣式
使用border-width可以分別指定四個邊框的寬度
(1) 如果指定四個值，則四個值會分別設定給上、右、下、左（順時針方向）
(2) 如果指定三個值，則三個值會分別設定給上、左右、下
(3) 如果指定兩個值，則兩個值會分別設定給上下、左右
(4) 如果指定乙個值，則四邊全都是該值
除了border-width，css中還提供了border-top-width、border-right-width、border-bottom-width、border-left-width，專門用來設定指定邊的寬度
color也可以分別指定四個邊框的樣式，規則和width一致，同時它也提供border-***-color四個樣式，來分別設定四個邊
可選值(1) none: 沒有邊框（預設值）
(2) solid：實線
(3) dotted: 點狀邊框
(4) dashed: 虛線
(5) double: 雙線
style也可以分別指定四個邊框的樣式，規則和width一致，同時它也提供border-***-style四個樣式，來分別設定四個邊
border是邊框的簡寫樣式，通過它可以同時設定四個邊框的樣式、寬度、顏色，並且沒有順序要求
border一指定就是同時指定四個邊，不能分別指定
border-top、border-right、border-bottom、border-left可以單獨設定四個邊的樣式，規則和border一樣，只不過它僅對乙個邊生效
四. 內邊距（padding）
內邊距指的是盒子的內容區與盒子邊框之間的距離
一共有四個方向的內邊距，可以通過padding-top、padding-right、padding-bottom、padding-left來設定四個方向的內邊距
使用padding可以同時設定四個邊框的樣式，規則和border-width一致
五. 外邊距（margin）
外邊距指的是當前盒子與其他盒子之間的距離，它會影響到盒子的位置
盒子有四個方向的外邊距：margin-top、margin-right、margin-bottom、margin-left
由於頁面中的元素都是靠左靠上擺放的，當設定上和左外邊距時，會導致盒子自身的位置發生改變，如果是設定右和下外邊距會改變其他盒子的位置
(1) margin-top：上外邊距，設定乙個正值，元素會向下移動
(2) margin-right：右外邊距，預設情況下設定margin-right不會產生任何效果
(3) margin-bottom：下外邊距，設定乙個正值，其他元素會向下移動
(4) margin-left：左外邊距，設定乙個正值，元素會向右移動
外邊距也可以指定乙個負值，如果外邊距設定的是負值，則元素會向反方向移動
外邊距可以使用簡寫屬性margin，同時設定四個方向的外邊距，規則和border-width一樣
垂直外邊距的重疊
(1) 在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊
(2) 兄弟元素：
① 兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
② 如果相鄰垂直外邊距一正一負，則取兩者的和
③ 如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
(3) 父子元素：
① 父子元素間的相鄰垂直外邊距，子元素的會傳遞給父元素
② 父子外邊距的重疊會影響到頁面的布局，必須要進行處理
box-sizing：用來設定盒子尺寸的計算方式（設定width和height的作用）
(1) content-box：寬度和高度用來設定內容區的大小（預設值）
(2) border-box：寬度和高度用來設定整個盒子可見框的大小（width和height指的是內容區+內邊距+邊框的總大小）
六. 水平方向的布局
元素在其父元素中水平方向的位置由以下幾個屬性共同決定：
margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
乙個元素在其父元素中，水平布局必須要滿足以下的等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right等於其父元素內容區的寬度
以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，等式會自動進行調整
調整的情況：
(1) 如果這七個值沒有為auto的情況，則瀏覽器會自動調整margin-right值以使等式滿足
(2) 這七個值中有三個值可以設定為auto：width、margin-left、margin-right
① 如果某個值為auto，則會自動調整為auto的那個值以使等式成立
② 如果將乙個寬度和其中乙個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動調整為0
③ 如果將三個值都設定為auto，則外邊距都是0，寬度最大
④ 如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值，所以經常利用這個特點來使乙個元素在其父元素中水平居中
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...