1、標準文檔流
什麼是標準文檔流
瀏覽器在解析頁面的時候，從上到下從左到右這樣的一個解析過程，被稱爲標準文檔流。
標籤的分類（二）
容器級別：h1~h6 ol ul dl li dt dd table div
文本級別：p img a input label select textarea span
塊級標籤：h1~h6 ol ul dl li dt dd table div p
行內標籤：img a input label select textarea span
行塊的特點
塊級標籤：
塊級標籤相當霸道，如果不設置寬和高，那麼它的寬將是它爹的寬，它的高將是內容撐開的高，如果設置寬和高，那麼它的寬和高將是設置的寬和高。就算設置了寬高，它還是霸道的佔據它爹的一行。
行內標籤：
行內標籤非常懦弱。如果不設置寬高，那麼它的寬和高都是由內容撐開的。如果設置了寬和高，行內標籤也不會理睬，它的寬和高還是內容的寬和高。也就是說，行內標籤的寬和高無論在什麼時候都是由內容所決定的。行內標籤它不會獨自的佔據它爹的一行，如果幾個行內標籤在一起，那麼它們會並排一行。只有它爹的寬不夠它們並排的時候纔會換行。
可置換行內標籤和不可置換行內標籤：
可置換元素雖然是行內標籤，但是他也可以設置寬和高，比如img input textarea，不可置換元素無法設置寬和高。
行塊轉換：
如果想要一個塊級標籤當做行內去用，那麼可以給這個塊級標籤添加display：inline這樣的話，這個塊級標籤就會變成行內標籤，它的特點也就和行內標籤無異了。
如果想要一個行內標籤當做塊級去用，那麼可以給這個行內標籤添加display：block這樣的話，這個行內標籤就會變成塊級標籤，它的特點也就和塊級標籤無異了。
2、盒子模型
盒子模型包含4部分內容，盒子的大小最終由這四部分決定：
內容區域
邊框
內邊距
外邊距
外邊距的表示方式
- 綜合表示法（上 右 下 左）
margin：100px；代表上下左右都是100px；
margin：100px 50px；代表上下100px，左右50px；
margin：100px 50px 30px：代表上100px 右50px 下30px 左50px；
margin：100px 50px 30px 20px：代表上100 右50 下30 左20； - 按照方向去設置
margin-top：100px；
margin-right：100px；
margin-bottom：100px；
margin-left：100px；
內邊距的表示方式
參照外邊距
邊框的設置方式
-
綜合設置法：
border：1px solid red；綜合設置四個邊的邊框。
-
按照方向綜合設置
border-top：1px solid red；
border-right：2px dashed green；
border-bottom：5px dotted yellowgreen；
border-left：10px double blue； -
按照屬性來綜合設置
border-width：1px 2px 3px 4px；
border-style：solid dotted dashed double；
border-color：red green blue black； -
按照方向和屬性來設置
border-top-width：10px；
border-top-style：dotted；
border-top-color；red；
3、盒子模型當中的一些小問題
- 行內元素垂直方向上margin和padding失效；
- 在標準文檔流當中，垂直方向margin有塌陷現象；
- 文本在盒子當中水平居中，
text-align：center； - 單行文本在盒子正中心，
text-align：center；line-height=盒子高度； - 盒子在盒子中水平居中，
margin：0 auto； - margin描述的是兄弟的關係，padding描述的是父子的關係，在碰到父子之間間距問題的時候，要善於運用父親的padding而不是兒子的margin。當運用父親的padding把兒子往下擠完了以後，父親會默默的變大，這會我們要去精確還原父親的盒子的大小。什麼方向上padding了就在什麼方向上減小內容的區域，這就是精確還原盒子。
4、其他
1 vertical-align：middle
vertical-align 只能用在行內標籤上。
通常情況用在圖片和文字並排在一行的時候，默認圖片是底部和行內基線對齊的（就是文字底部），想要讓文字排在圖片中線位置，就要對圖片添加vertical-align：middle；讓圖片中線默認和行內基線對齊。
2 字間距和詞間距
- 字間距：
letter-spacing：1em；控制中文漢字之間的間距，還有英文字母和字母之間的間距； - 詞間距：
word-spacing：1em；控制英文單詞和單詞之間的間距;
3 首行縮進
首行縮進：text-indent：2em；
4 background-image
background-image：url(圖片的相對或絕對路徑)；這個屬性是在盒子當中引入一張背景圖片。background-repeat：no-repeat；
當引入背景圖片後，默認背景圖片是重複平鋪的，x軸和y軸同時重複。但是我們一般不讓背景重複，所以常需要設置這個屬性爲no-repeat；如果僅僅想在x軸方向重複可以設置爲repeat-x；如果僅僅想在y軸方向重複可以設置爲repeat-y；background-size：100% 100%；這個屬性用來設置背景圖片的大小，通常情況我們是讓背景恰好和盒子一樣大小。這個屬性可以設置兩個值，表示的是背景圖片的寬和高。寬和高可以用px，也可以用其它的大小單位表示。
這個屬性還有一個值，一個cover 一個contain；
cover是覆蓋的意思，它會等比縮放我們的圖片，當恰好覆蓋住盒子爲止，如果圖片大了就會被裁掉。（以盒子爲參考）
contain是包含的意思，它也會等比縮放我們的圖片，當盒子恰好能夠包含這張圖片的時候爲止。這個圖片可能縮放的比盒子小，也就是說可能會比盒子小。（以圖片爲參考）background-position：100% 100%；
這個屬性非常重要，後面我們在學習CSS精靈圖（雪碧圖）的時候也要用到這個屬性，它是背景定位的意思。- 當背景圖片比盒子小的時候，我們可以用這個屬性控制整張圖片在盒子當中的位置。這個屬性和屬性值也是兩個值，第一個代表圖片左上角距盒子左邊的距離，第二個值代表圖片左上角距盒子上邊的距離。如果設置爲100% 100%那麼代表背景圖片在盒子右下角。如果設置爲50%50%代表圖片在盒子正中心。我們常用的是這種兩個值的設置方式。也有單詞的表示方式，通常用來表示9個特殊的位置，用起來方便，但是有侷限性，不能表示所有你想要的位置。這個屬性值可以是負數，如果是負數，那麼會往相反的方向定位，超出盒子的部分會被裁剪掉。
- 當背景圖片比盒子大的時候，這個屬性可以控制讓這個盒子顯示背景圖片的那個位置。因爲圖片比盒子大，超出盒子的部分是看不到的。通過這個屬性可以讓背景圖片在盒子當中移動。雪碧圖通常就是這樣做的。一般這個屬性值爲負。