文件流（normal flow）
網頁是乙個多層的結構，一層摞著一層。通過css可以分別為每一層來設定樣式，作為使用者來講只能看到最頂上一層，這些層中，最底下的一層稱為文件流，文件流是網頁的基礎，我們所建立的元素預設都是在文件流中進行排列。對於我們來元素主要有兩個狀態： 在文件流中 ，不在文件流中（脫離文件流）
元素在文件流中有什麼特點：塊元素會在頁面中獨佔一行(自上向下垂直排列)，預設寬度是父元素的全部（會把父元素撐滿）， 預設高度是被內容撐開（子元素）。
行內元素不會獨佔頁面的一行，只佔自身的大小，行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素， 則元素會換到第二行繼續自左向右排列（書寫習慣一致）。行內元素的預設寬度和高度都是被內容撐開
盒模型、盒子模型、框模型（box model）
css將頁面中的所有元素都設定為了乙個矩形的盒子，將元素設定為矩形的盒子後，對頁面的布局就變成將不同的盒子擺放到不同的位置。每乙個盒子都由一下幾個部分組成：內容區（content），內邊距（padding），邊框（border），外邊距（margin）。
內容區（content），元素中的所有的子元素和文字內容都在內容區中排列 ，內容區的大小由width 和 height兩個屬性來設定。width 設定內容區的寬度， height 設定內容區的高度。
邊框（border），邊框屬於盒子邊緣，邊框裡邊屬於盒子內部，出了邊框都是盒子的外部。邊框的大小會影響到整個盒子的大小，要設定邊框，需要至少設定三個樣式： 邊框的寬度 border-width， 邊框的顏色 border-color，邊框的樣式 border-style。
border-width: 10px; 預設值，一般都是 3個畫素.border-width可以用來指定四個方向的邊框的寬度, 值的情況:四個值：上 右 下 左.
三個值：上 左右 下
兩個值：上下 左右
乙個值：上下左右
除了border-width還有一組 border-***-width，***可以是 top right bottom left，用來單獨指定某乙個邊的寬度。
border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框。規則和border-width一樣。 border-color也可以省略不寫，如果省略了則自動使用color的顏色值
border-style 指定邊框的樣式。solid 表示實線，dotted 點狀虛線，dashed 虛線，double 雙線。border-style的預設值是none 表示沒有邊框， border簡寫屬性，通過該屬性可以同時設定邊框所有的相關樣式，並且沒有順序要求。除了border以外還有四個 border-***： border-top，border-right，border-bottom， border-left。
內邊距（padding）： 內容區和邊框之間的距離是內邊距。一共有四個方向的內邊距： padding-top，padding-right，padding-bottom
padding-left。內邊距的設定會影響到盒子的大小，背景顏色會延伸到內邊距上。 一共盒子的可見框的大小，由內容區 內邊距 和 邊框共同決定，所以在計算盒子大小時，需要將這三個區域加到一起計算。padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距，規則和border-width 一樣。
外邊距（margin）：外邊距不會影響盒子可見框的大小， 但是外邊距會影響盒子的位置。一共有四個方向的外邊距：margin-top，上外邊距，設定乙個正值，元素會向下移動； margin-right-預設情況下設定margin-right不會產生任何效果。margin-bottom- 下外邊距，設定乙個正值，其下邊的元素會向下移動。 margin-left - 左外邊距，設定乙個正值，元素會向右移動。 margin也可以設定負值，如果是負值則元素會向相反的方向移動。
元素在頁面中是按照自左向右的順序排列的，所以預設情況下如果我們設定的左和上外邊距則會移動元素自身， 而設定下和右外邊距會移動其他元素。margin的簡寫屬性： margin 可以同時設定四個方向的外邊距 ，用法和padding一樣，margin會影響到盒子實際占用空間
盒子的布局
3.1水平布局：元素在其父元素中水平方向的位置由以下幾個屬性共同決定：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（ 圖中箭頭的長度）= 其父元素內容區的寬度 （必須滿足）
如果將乙個寬度和乙個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0。如果將三個值都設定為auto，則外邊距都是0，寬度最大。如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值，所以我們經常利用這個特點來使乙個元素在其父元素中水平居中。
3.2 垂直布局
子元素是在父元素的內容區中排列的， 如果子元素的大小超過了父元素，則子元素會從父元素中溢位。使用 overflow 屬性來設定父元素如何處理溢位的子元素
可選值： visible，預設值 子元素會從父元素中溢位，在父元素外部的位置顯示
hidden 溢位內容將會被裁剪不會顯示
scroll 生成兩個滾動條，通過滾動條來檢視完整的內容
auto 根據需要生成滾動條
3.3 垂直外邊距的重疊（摺疊）,相鄰的垂直方向外邊距會發生重疊現象
兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
特殊情況：如果相鄰的外邊距一正一負，則取兩者的和,如果相鄰的外邊距都是負值，則取兩者中絕對值較大的。兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要進行處理
父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）。父子外邊距的摺疊會影響到頁面的布局，必須要進行處理。
行內元素的盒模型
行內元素不支援設定寬度和高度。
行內元素可以設定padding，但是垂直方向padding不會影響頁面的布局
行內元素可以設定border，垂直方向的border不會影響頁面的布局
行內元素可以設定margin，垂直方向的margin不會影響布局
display 用來設定元素顯示的型別
可選值：inline 將元素設定為行內元素
block 將元素設定為塊元素
inline-block 將元素設定為行內塊元素 。行內塊，既可以設定寬度和高度又不會獨佔一行
table 將元素設定為乙個**
none 元素不在頁面中顯示
visibility 用來設定元素的顯示狀態
可選值：visible 預設值，元素在頁面中正常顯示
hidden 元素在頁面中隱藏 不顯示，但是依然佔據頁面的位置
預設樣式
通常情況，瀏覽器都會為元素設定一些預設樣式，預設樣式的存在會影響到頁面的布局，通常情況下編寫網頁時必須要去除瀏覽器的預設樣式（pc端的頁面）。
重置樣式表：專門用來對瀏覽器的樣式進行重置的
reset.css 直接去除了瀏覽器的預設樣式
normalize.css 對預設樣式進行了統一
盒子的大小
預設情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定。 box-sizing 用來設定盒子尺寸的計算方式（設定width和height的作用）可選值：
content-box 預設值，寬度和高度用來設定內容區的大小
border-box 寬度和高度用來設定整個盒子可見框的大小
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小
7. 輪廓和圓角
outline 用來設定元素的輪廓線，用法和border一模一樣。輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小。
box-shadow 用來設定元素的陰影效果，陰影不會影響頁面布局
第乙個值 水平偏移量 設定陰影的水平位置 正值向右移動 負值向左移動
第二個值 垂直偏移量 設定陰影的水平位置 正值向下移動 負值向上移動
第三個值 陰影的模糊半徑
第四個值 陰影的顏色。
border-radius: 用來設定圓角 圓角設定的圓的半徑大小。
border-top-left-radius:
border-top-right-radius：
border-bottom-left-radius:
border-bottom-right-radius:
border-top-left-radius:50px 100px;
border-radius 可以分別指定四個角的圓角
四個值 左上 右上 右下 左下
三個值 左上 右上/左下 右下
兩個個值 左上/右下 右上/左下
CSS入門基礎知識（十） CSS盒子模型（一）
網頁布局過程 1 先準備好相關網頁元素，網頁元素基本都是盒子box 2 利用css設定號盒子樣式，然後拜訪到相應的位置 3 往盒子裡面裝內容 網頁布局核心 利用css擺盒子 盒子模型 就是吧html頁面的布局元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器 盒子模型本子上是乙個盒子，封裝周圍的ht...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS基礎 盒子模型
width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度，當內容超出寬度和高度之後，不會自動填充擴...