資訊專欄INFORMATION COLUMN
摘要：盒子的寬度設置固定寬度的情況在盒子模型中，我們設置的寬度都是內容寬度，不是整個盒子的寬度。這樣我們改四個中的其中一個，都會導致盒子寬度的改變。包裹內容的情況這種情況下比較簡單，盒子的寬度將隨著內容寬度的增加而增加。
1.引言
從這一節開始，我們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種布局和呈現的特性。包括兩類：文字、塊。
第一類——文字。這部分相對比較簡單一些，例如設置字號、字體、顏色、背景色、是否加粗等。重點的地方在于設置字體、設置行高、文字相關的距離都盡量用相對值（em）。另外還有一個重點，就是web端最流行的字體庫fontAwesome，可參見《請用fontAwesome代替網頁icon小圖標》，這里就不再重復去講了。
padding，border和margin，即內邊距、邊框、外邊距，它們三者就構成了一個“盒子”。比如收到的快遞，本來買了一個小小的iphone，收到的卻是那么大一個盒子。因為iphone白色包裝盒與iphone機器之間有間隔層（內邊距），iphone白色盒子有厚度，雖然很薄（邊框），盒子和快遞箱子之間還有一層泡沫板（外邊距）。這就是一個典型的盒子。
如上圖，真正的內容就是這些文字，文字外圍有10px的內邊距，5px的border，10px的外邊距。
3.盒子的寬度 3.1 設置固定寬度的情況在盒子模型中，我們設置的寬度都是內容寬度，不是整個盒子的寬度。而整個盒子的寬度是：（內容寬度 + padding寬度 + border寬度 + margin寬度）之和。這樣我們改四個中的其中一個，都會導致盒子寬度的改變。這對我們來說不友好。
沒關系，這個東西不友好早就有人發現了，而且已經解決，下文再說。
3.2 充滿父容器的情況默認情況下，div的display:block，不設置固定寬度時，寬度會充滿整個父容器。
但是別忘記，這個div是個盒子模型，它的整個寬度包括（內容寬度 + padding寬度 + border寬度 + margin寬度），是整個的寬度充滿了父容器。
問題就在這里。如果父容器寬度不變，我們手動增大margin、border或padding其中一項的寬度值，都會導致內容寬度的減少。極端情況下，如果內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那么瀏覽器會強迫增加父容器的寬度。這可不是我們想要看到的。
這種情況下比較簡單，盒子的寬度將隨著內容寬度的增加而增加。
4.再看盒子的寬度前面提到，為盒子模型設置寬度，結果只是設置了內容的寬度，這個不合理。如何解決這一問題？答案就是：box-sizing:border-box
如上圖，div設置了box-sizing:border-box;之后，盒子寬度300px就變為（內容寬度 + padding寬度 + border寬度）之和（不包括margin寬度），這樣就比較符合我們的實際要求了。
建議大家在為系統寫css時候，第一個樣式是：
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 選擇器中，我們為什么不這樣做呢？
5.margin的縱向重疊切記，margin有一個特性——縱向重疊，如下圖，
的縱向margin是16px，那么兩個
之間縱向的距離按常理來說應該是 16 + 16 = 32px，但是答案仍然是 16px。因為縱向的margin是會重疊的，大的會把小的“吃掉”（可以自己去實驗）。
6.用div畫“三角”“三角”在日常的網頁中是很常見的，例如百度首頁：
你當然可以使用背景圖片、fontAwesome來實現這一效果，但是你也可以用div來實現這一效果，很簡單，而且可以封裝通用：
原理很簡單：只讓一側border顯示，另外三側都設為透明。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112113.html
摘要：本系列文章重拾主要參考王福朋知多少，結合自己的理解和學習需要，修改或添加了一些內容，難免有失偏頗，僅供自我學習參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統學習有關，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統學習css的想法。 本系列文章（重拾css）...
摘要：瀏覽器默認樣式中規定了元素哪些屬于塊剩下的就是流。上圖可知，針對的標簽，你設置寬度和高度是無效的，通過監控可以知道，該元素實際的寬度和高度都是，并不是我們設定的值。因此，的特點可以總結為外部看來是流，但是自身卻是一個塊。 1.引言 html元素，除了塊就是流（即平時常說的塊級元素和行內元素），而且流都包含在塊中，例如body就是一個塊，而a就是一個流。瀏覽器默認樣式中規定了html元素...
摘要：來不及解釋，快上車有些瀏覽器不完全支持，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項常用的標簽，它們的屬性一般默認為和。的設計初衷是什么具有包裹性例如和兩者的寬度是不一樣的，不信可以為加上背景色試試。 來不及解釋，快上車... ... 有些瀏覽器不完全支持css3，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？ 常用的html標簽，它們的display屬性一般默認...
摘要：如果我們以為重點看，從上圖中我們可以總結出學習的三個突破點。這次我們向瀏覽器這位機器人學習一下，看看它寫出來的能給我們什么幫助。對選擇器來說，有一個很重要的話題級別。布局布局是的重頭戲，每個系統的布局都有其各自的特點。 眾所周知，css的運行環境是瀏覽器，那么我們有必要先來認識下瀏覽器。 1.瀏覽器是怎樣工作的 有篇文章叫《瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘》，文中言簡意賅的介紹...
摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。 十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...
閱讀 3136·2021-11-11 16:54
閱讀 2290·2021-09-04 16:48
閱讀 3219·2019-08-29 16:08
閱讀 641·2019-08-29 15:13
閱讀 1343·2019-08-29 15:09
閱讀 2660·2019-08-29 12:45
閱讀 1926·2019-08-29 12:12
閱讀 444·2019-08-26 18:27
