注：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109揖铜；firefox 67.0洗贰；ie 11柿隙。
一 心得體會
最大的收獲是第一次知道了outline（輪廓）這個屬性，之前都沒有使用過余掖，所以沒有注意到這個屬性寸爆，還有就是對（display）顯示類型有了一個新的認(rèn)識，除了常用的一些顯示類型盐欺，還有很多其他獨(dú)特的顯示類型赁豆，這為我們頁面布局提供了很多新的選擇。
在這里建議初學(xué)者一定要把css文檔從頭到尾完整的看一遍冗美，有一個初步的印象魔种，如果有時間可以把每個屬性及屬性值都實(shí)驗(yàn)一遍，加深印象粉洼。
二 相關(guān)知識點(diǎn)
1 盒模型的概念
盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型兩種节预，其寬高取值方式如下圖叶摄，第一張為標(biāo)準(zhǔn)盒模型，第二張為怪異盒模型安拟。
在測試的瀏覽器中均默認(rèn)的是標(biāo)準(zhǔn)盒模型蛤吓，較為統(tǒng)一。標(biāo)準(zhǔn)盒模型和怪異盒模型均可以通過box-sizing來設(shè)置去扣，語法如下：
box-sizing: border-box(怪異盒模型) | content-box(標(biāo)準(zhǔn)盒模型)
2.盒子的溢出
當(dāng)盒子尺寸固定是柱衔，里面內(nèi)容可能會超出設(shè)置的大小，那么超出部分該如何顯示呢愉棱？這里我們需要引入overflow屬性唆铐，其語法為：
overflow: auto | hidden | visible | scroll
取值含義分別是：
- auto： 由瀏覽器定奪，如果內(nèi)容被修剪奔滑，就會顯示滾動條
- hidden：超出部分內(nèi)容隱藏艾岂，無法查看
- visible：超出部分不隱藏，顯示在盒子外面
- scoll：超出部分內(nèi)容會隱藏朋其，出現(xiàn)滾動條王浴，通過滾動查看隱藏內(nèi)容
3.盒子的背景剪裁
《CSS之圓角邊框漸變的實(shí)現(xiàn)》中講述的三個跟背景相關(guān)的屬性background-origin,background-clip,background-size即為背景剪裁的要素，這里不重復(fù)敘述了梅猿。
4.盒子的輪廓
簡單來講氓辣，outline（輪廓）跟border（邊框）屬性及屬性值都一樣，我們可以理解成其是邊框的外邊框袱蚓，下圖所示的是輪廓盒邊框的相對位置钞啸。
與border不同的是，outline不占位置喇潘，不影響布局体斩。
注：outline在不同瀏覽器的層疊順序不同，在chrome/firefox/opera中前面的outline會遮擋后面的內(nèi)容（如果outline的寬度夠遮擋）颖低，而在ie中前面的outline會在后面的內(nèi)容下面（如果outline的寬度夠遮擋）絮吵。有興趣的可以試驗(yàn)一下。
5.盒子的顯示類型
display屬性控制著盒子的顯示類型忱屑，其部分屬性值為：
display: none | block | inline | inline-block | flex | grid |table
取值含義分別是：
- none —— 隱藏元素蹬敲，并從布局中刪除元素，屏幕閱讀技術(shù)無法訪問
- block —— 塊元素嘗試獲取整個寬度莺戒，并在布局中開始新行
- inline —— 內(nèi)聯(lián)元素與其他內(nèi)聯(lián)元素保持在同一行伴嗡，不會開始新行，設(shè)置寬高無效
- inline-block —— 內(nèi)聯(lián)塊元素在外部視為內(nèi)聯(lián)元素脏毯，但在內(nèi)部屬于塊元素闹究，可以設(shè)置寬高
- flex —— 彈性布局脫離塊元素和內(nèi)聯(lián)元素的約束，屬于一種全新的布局食店，很重要渣淤，后面單獨(dú)講述赏寇，詳細(xì)內(nèi)容還可以參考阮一峰老師的《Flex 布局教程》
- grid —— 網(wǎng)格布局，一種不是很常見的布局方式价认，后面單獨(dú)講述
- table —— 是元素具備表格的特征嗅定，避免濫用表格
注：display還有很多其他不常用的屬性值，有時間可以自己研究一下
