1. display
定義：規(guī)定元素應(yīng)該生成的框的類型。
-
常用屬性值：
值 描述 none 此元素不會(huì)被顯示张遭。 block 此元素將顯示為塊級(jí)元素瞬项，此元素前后會(huì)帶有換行符。 inline 默認(rèn)朋沮。此元素會(huì)被顯示為內(nèi)聯(lián)元素蛇券，元素前后沒有換行符。 inline-block 行內(nèi)塊元素樊拓。（CSS2.1 新增的值） list-item 此元素會(huì)作為列表顯示纠亚。 run-in 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。 compact CSS 中有值 compact筋夏，不過由于缺乏廣泛支持蒂胞，已經(jīng)從 CSS2.1 中刪除。 marker CSS 中有值 marker条篷，不過由于缺乏廣泛支持骗随，已經(jīng)從 CSS2.1 中刪除蛤织。 table 此元素會(huì)作為塊級(jí)表格來顯示（類似 <table>），表格前后帶有換行符鸿染。 inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來顯示（類似 <table>）指蚜，表格前后沒有換行符。 table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <tbody>）牡昆。 table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <thead>）姚炕。 table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 <tfoot>）。 table-row 此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）丢烘。 table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示（類似 <colgroup>）柱宦。 table-column 此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>） table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>） inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 -
display屬性值inline播瞳、block和inline-block的區(qū)別：
block元素會(huì)獨(dú)占一行掸刊，默認(rèn)情況下，block元素寬度自動(dòng)填滿父級(jí)元素的寬度赢乓；
block元素可以設(shè)置width和height屬性忧侧，即使設(shè)置了寬度，仍然獨(dú)占一行牌芋；
block元素可以設(shè)置margin和padding屬性蚓炬；
inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里面躺屁，其寬度隨元素的內(nèi)容而變化肯夏；
inline元素設(shè)置margin和padding屬性無效；
inline元素的margin和padding屬性在水平方向上能產(chǎn)生編劇效果犀暑，垂直方向不會(huì)產(chǎn)生邊距效果驯击；
inline-block：簡單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)耐亏。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)徊都。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性广辰。
-
display:inline-block元素顯示間隙
消除標(biāo)簽之間空格的辦法：
使用margin-left或margin-right取負(fù)值暇矫；
對(duì)父元素設(shè)置font-size為0，然后對(duì)font-size初始化择吊；
對(duì)父元素設(shè)置letter-spacing（字符間距）為負(fù)值袱耽，然后設(shè)置元素的letter-spacing為0；
對(duì)父元素設(shè)置word-spacing（單詞間距）為負(fù)值干发，然后設(shè)置元素的word-spacing為0；
-
display:table和本身的table區(qū)別
區(qū)別在于史翘，display：table的css聲明能夠讓一個(gè)html元素和它的子節(jié)點(diǎn)像table元素一樣枉长，使用基于表格的css布局冀续，是我們能夠輕松定義一個(gè)單元格的邊界，背景等樣式必峰，而不會(huì)產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽導(dǎo)致的語義化問題洪唐。
現(xiàn)在逐漸淘汰了table系表格元素，是因?yàn)橛胐iv+css編寫出來的文件比用table邊寫出來的文件小吼蚁，而且table必須在頁面完全加載后才顯示凭需，div則是逐行顯示，table的嵌套性太多肝匆，沒有div簡潔粒蜈，非表格內(nèi)容用table來裝，不符合標(biāo)簽語義化要求旗国，不利于SEO枯怖。
-
設(shè)置float屬性會(huì)更改display的值
不論是inline、inline-block還是block能曾，在設(shè)置了float屬性后display的值都變成了block度硝。
設(shè)置元素浮動(dòng)后，該元素的display值是 block寿冕。
浮動(dòng)元素是 float 的計(jì)算值非 none 的元素蕊程。
由于float意味著使用塊布局，它在某些情況下修改display 值的計(jì)算值
2. 盒子模型
在CSS3中引入了box-sizing屬性驼唱，默認(rèn)是box-sizing:content-box
box-sizing:content-box; 表示標(biāo)準(zhǔn)的盒子模型藻茂，寬度即為內(nèi)容的寬度
box-sizing:border-box; 表示的是IE盒子模型，IE盒子的寬度為：左右border+左右padding+width
box-sizing:padding-box,這個(gè)屬性值的寬度包含了左右padding+width（曙蒸？）
inherit：繼承父元素的box-sizing
標(biāo)準(zhǔn)盒模型（W3C盒模型）：一個(gè)塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
IE盒模型：一個(gè)塊的總寬度=width+margin（左右）（既width已經(jīng)包含了padding和border值）
使用場(chǎng)景：若設(shè)置子元素的margin或border時(shí)可能撐破父元素的尺寸捌治，就需要使用box-sizing:border-box將border包含進(jìn)元素的尺寸中。
初學(xué)者一枚纽窟，如有問題歡迎指正~
