一、 css常見佈局
文檔流（normal flow）
- 網頁是一個多層的結構，一層摞着一層
- 通過CSS可以分別爲每一層來設置樣式
- 作爲用戶來講只能看到最頂上一層
- 這些層中，最底下的一層稱爲文檔流，文檔流是網頁的基礎
我們所創建的元素默認都是在文檔流中進行排列
- 對於我們來元素主要有兩個狀態
在文檔流中
不在文檔流中（脫離文檔流）
- 元素在文檔流中有什麼特點：
- 塊元素
- 塊元素會在頁面中獨佔一行(自上向下垂直排列)
- 默認寬度是父元素的全部（會把父元素撐滿）
- 默認高度是被內容撐開（子元素）
- 行內元素
- 行內元素不會獨佔頁面的一行，只佔自身的大小
- 行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素
則元素會換到第二行繼續自左向右排列（書寫習慣一致）
- 行內元素的默認寬度和高度都是被內容撐開
二、盒模型
內容區（content），元素中的所有的子元素和文本內容都在內容區中排列
內容區的大小由width 和 height兩個屬性來設置
width 設置內容區的寬度
height 設置內容區的高度
邊框（border），邊框屬於盒子邊緣，邊框裏邊屬於盒子內部，出了邊框都是盒子的外部
邊框的大小會影響到整個盒子的大小
要設置邊框，需要至少設置三個樣式：
邊框的寬度 border-width
邊框的顏色 border-color
邊框的樣式 border-style
盒模型、盒子模型、框模型（box model）
- CSS將頁面中的所有元素都設置爲了一個矩形的盒子
- 將元素設置爲矩形的盒子後，對頁面的佈局就變成將不同的盒子擺放到不同的位置
- 每一個盒子都由一下幾個部分組成：
內容區（content）
內邊距（padding）
邊框（border）
外邊距（margin）
三、盒模型邊框
border-width: 10px;
默認值，一般都是 3個像素
border-width可以用來指定四個方向的邊框的寬度
值的情況
四個值：上 右 下 左
三個值：上 左右 下
兩個值：上下 左右
一個值：上下左右
除了border-width還有一組 border-xxx-width
xxx可以是 top right bottom left
用來單獨指定某一個邊的寬度
border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框
規則和border-width一樣
border-color也可以省略不寫，如果省略了則自動使用color的顏色值
border-style 指定邊框的樣式
solid 表示實線
dotted 點狀虛線
dashed 虛線
double 雙線
border-style的默認值是none 表示沒有邊框
border簡寫屬性，通過該屬性可以同時設置邊框所有的相關樣式，並且沒有順序要求
除了border以外還有四個 border-xxx
border-top
border-right
border-bottom
border-left
內邊距（padding）
- 內容區和邊框之間的距離是內邊距
- 一共有四個方向的內邊距：
padding-top
padding-right
padding-bottom
padding-left
- 內邊距的設置會影響到盒子的大小
- 背景顏色會延伸到內邊距上
一共盒子的可見框的大小，由內容區 內邊距 和 邊框共同決定，
所以在計算盒子大小時，需要將這三個區域加到一起計算
外邊距（margin）
- 外邊距不會影響盒子可見框的大小
- 但是外邊距會影響盒子的位置
- 一共有四個方向的外邊距：
margin-top
- 上外邊距，設置一個正值，元素會向下移動
margin-right
- 默認情況下設置margin-right不會產生任何效果
margin-bottom
- 下外邊距，設置一個正值，其下邊的元素會向下移動
margin-left
- 左外邊距，設置一個正值，元素會向右移動
- margin也可以設置負值，如果是負值則元素會向相反的方向移動
- 元素在頁面中是按照自左向右的順序排列的，
所以默認情況下如果我們設置的左和上外邊距則會移動元素自身
而設置下和右外邊距會移動其他元素
- margin的簡寫屬性
margin 可以同時設置四個方向的外邊距 ，用法和padding一樣
- margin會影響到盒子實際佔用空間
元素的水平方向的佈局：
元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
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 = 其父元素內容區的寬度 （必須滿足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 以上等式必須滿足，如果相加結果使等式不成立，則稱爲過度約束，則等式會自動調整
- 調整的情況：
- 如果這七個值中沒有爲 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
- 這七個值中有三個值和設置爲auto
width
margin-left
maring-right
- 如果某個值爲auto，則會自動調整爲auto的那個值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
- 如果將一個寬度和一個外邊距設置爲auto，則寬度會調整到最大，設置爲auto的外邊距會自動爲0
- 如果將三個值都設置爲auto，則外邊距都是0，寬度最大
- 如果將兩個外邊距設置爲auto，寬度固定值，則會將外邊距設置爲相同的值
所以我們經常利用這個特點來使一個元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;
子元素是在父元素的內容區中排列的，
如果子元素的大小超過了父元素，則子元素會從父元素中溢出
使用 overflow 屬性來設置父元素如何處理溢出的子元素
可選值：
visible，默認值 子元素會從父元素中溢出，在父元素外部的位置顯示
hidden 溢出內容將會被裁剪不會顯示
scroll 生成兩個滾動條，通過滾動條來查看完整的內容
auto 根據需要生成滾動條
overflow-x:
overflow-y:
垂直外邊距的重疊（摺疊）
- 相鄰的垂直方向外邊距會發生重疊現象
- 兄弟元素
- 兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
- 特殊情況：
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
- 兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要進行處理
- 父子元素
- 父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）
- 父子外邊距的摺疊會影響到頁面的佈局，必須要進行處理
四、行內塊元素的盒模型
display 用來設置元素顯示的類型
可選值：
inline 將元素設置爲行內元素
block 將元素設置爲塊元素
inline-block 將元素設置爲行內塊元素
行內塊，既可以設置寬度和高度又不會獨佔一行
table 將元素設置爲一個表格
none 元素不在頁面中顯示
visibility 用來設置元素的顯示狀態
可選值：
visible 默認值，元素在頁面中正常顯示
hidden 元素在頁面中隱藏 不顯示，但是依然佔據頁面的位置
重置樣式表：專門用來對瀏覽器的樣式進行重置的
reset.css 直接去除了瀏覽器的默認樣式
normalize.css 對默認樣式進行了統一
默認樣式：
- 通常情況，瀏覽器都會爲元素設置一些默認樣式
- 默認樣式的存在會影響到頁面的佈局，
通常情況下編寫網頁時必須要去除瀏覽器的默認樣式（PC端的頁面）
默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定
box-sizing 用來設置盒子尺寸的計算方式（設置width和height的作用）
可選值：
content-box 默認值，寬度和高度用來設置內容區的大小
border-box 寬度和高度用來設置整個盒子可見框的大小
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小