盒子模型2+浮動

盒子居中和文字居中

1.設置盒子中存儲的文字/圖片水平居中：text-align：center；
2.讓盒子本身水平居中：margin：0 auto；

清空默認邊距

1.爲何要清空默認邊距（外邊距和內邊距）？
在企業開發中爲了更好的控制盒子的寬高和計算盒子的寬高等等，因此在企業開發中，編寫代碼以前第一件事就是清空默認的邊距。
2.如何清空？
格式：* { margin：0；padding：0；}
3.注意點：通配符選擇器會找到（遍歷）當前界面中全部的標籤，因此性能很差。企業開發中能夠從這個網址中拷貝：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高和字號

1.注意點：行高和盒子高度不是同一個概念。
2.規律：
2.1）文字在行高中默認是垂直居中的。
2.2）在企業開發中咱們常常將盒子的高度和行高設置爲同樣，那麼這樣就能夠保證一行文字在盒子的高度中是垂直居中 的。簡而言之就是：要想一行文字在盒子中垂直居中，那麼只須要設置這行文字的行高等於盒子的高便可。
2.3）在企業開發中若是一個盒子中有多行文字，那麼咱們就不能使用設置行高等於盒子高來實現讓文字垂直居中，只能經過設置padding來讓文字居中。

還原字體和字號

注意點：
1.在企業開發中，若是一個盒子中存儲的是文字，那麼通常狀況下咱們會以盒子左邊的內邊距爲基準，不會以右邊的內邊距爲基準，由於這個右邊的內邊距有偏差。
2.右邊內邊距的誤從何而來？由於右邊若是放不下一個文字，那麼文字就會換行顯示，因此文字和內邊距之間的距離就會有偏差。
3.頂部的內邊距並非邊框到文字頂部的距離，而是邊框到行高頂部的距離。

例題

什麼是網頁的佈局方式？

網頁的佈局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的。
1.標準流（文檔流/普通流）排版方式
1.1）瀏覽器默認的排版方式就是標準流的排版方式。
1.2）在CSS中將元素分爲三類，分別是塊級元素/行內元素/行內塊元素。
1.3）在標準流中有兩種排版方式，一種是垂直排版（若是是塊級元素，就是垂直排版），一種是水平排版（若是是行內元素/行內塊元素，就是水平排版）。
2.浮動流排版方式
2.1）浮動流是一種"半脫離標準流"的排版方式。
2.2）浮動流只有一種排版方式, 就是水平排版。它只能設置某個元素左對齊或者右對齊。
2.3）注意點:
2.3.1）浮動流中沒有居中對齊, 也就是沒有center這個取值。
2.3.2）在浮動流中是不可使用margin: 0 auto; 。
2.4）特色:
2.4.1）在浮動流中是不區分塊級元素/行內元素/行內塊級元素的，不管是塊級元素/行內元素/行內塊級元素均可以水平排版。
2.4.2）在浮動流中不管是塊級元素/行內元素/行內塊級元素均可以設置寬高。
2.4.3）綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像。

浮動元素脫標

1.什麼是浮動元素的脫標?
脫標: 脫離標準流。
當某一個元素浮動以後, 那麼這個元素看上去就像被從標準流中刪除了同樣, 這個就是浮動元素的脫標。
2.浮動元素脫標以後會有什麼影響?
若是前面一個元素浮動了, 然後面一個元素沒有浮動 , 那麼這個時候前面一個元素就會蓋住後面一個元素。

浮動元素排版規則

1.浮動元素排序規則
1.1）相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面。


1.2）不一樣方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動。

1.3）浮動元素浮動以後的位置, 由浮動元素浮動以前在標準流中的位置來肯定。
備註：1左浮 2不浮 3左浮 4不浮

備註：1左浮 2不浮 3左浮 4左浮

浮動元素貼靠現象

1.什麼是浮動元素貼靠現象?
1）若是父元素的寬度可以顯示全部浮動元素, 那麼浮動的元素會並排顯示。
2）若是父元素的寬度不能顯示全部浮動元素, 那麼會從最後一個元素開始往前貼靠。



3）若是貼靠了前面全部浮動元素以後都不能顯示, 最終會貼靠到父元素的左邊或者右邊。

浮動元素字圍現象

1.什麼是浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現。

來自爲知筆記(Wiz)