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