學(xué)習(xí)前端已有半年多，雖說(shuō)高級(jí)的框架還未怎么學(xué)習(xí)空凸，但簡(jiǎn)單的切切頁(yè)面還是比較熟練的较解。面對(duì)博大精深的CSS技術(shù)畜疾，總會(huì)感到一些迷茫，所以決定翻過(guò)頭來(lái)重新學(xué)習(xí)一下印衔。所以說(shuō)本系列是我對(duì)以往學(xué)過(guò)的知識(shí)的總結(jié)啡捶，若有什么地方有錯(cuò)誤或者遺漏了什么地方，還請(qǐng)不吝指出奸焙，小生在此先謝過(guò)了瞎暑。
display屬性是我們經(jīng)常用到而且比較熟悉的，像none, block, inline,inline-block這四個(gè)應(yīng)該是我們最常用的值与帆，下面就來(lái)總結(jié)以下它們的用法了赌。
<h1>none</h1>
display: none 可以關(guān)閉某個(gè)元素的顯示，這個(gè)元素的所有子元素也會(huì)被關(guān)閉顯示玄糟，文檔渲染時(shí)勿她，這個(gè)元素仿佛不存在。
這個(gè)屬性常被用于隱藏頁(yè)面中的元素阵翎，除此之外還可以用以下方法來(lái)隱藏元素逢并，下面來(lái)細(xì)數(shù)他們的區(qū)別。
display: none與visibility: hidden
這兩種方法的第一個(gè)區(qū)別就是被前者隱藏的元素不占據(jù)任何空間贮喧，被后者隱藏的元素卻實(shí)際占據(jù)空間筒狠。這個(gè)想必大家都知道就不舉例子了。第二個(gè)區(qū)別箱沦，被前者隱藏的元素的子元素即使設(shè)置了display: block也不會(huì)顯示辩恼，而被后者隱藏的子元素若被設(shè)置visibility: visible則可以顯示出來(lái)。
例子做的丑了些谓形，勿噴
height: 0;和overflow: hidden二者搭配使用灶伊，也可以起到隱藏元素的效果,被隱藏的元素不占據(jù)空間。
最后一種是通過(guò)設(shè)置透明度寒跳，即opacity :0, 被隱藏的元素占據(jù)空間聘萨，可通過(guò)position: absolute;使其不再占據(jù)空間。這種方法與以上三種方法的最大區(qū)別就是童太，被此方法隱藏的元素可以被點(diǎn)擊米辐，而其他三種方法則不可以胸完。
<h1>block和inline</h1>
display: block
有該屬性的元素為塊級(jí)元素，常見(jiàn)的有div翘贮，p赊窥，h1~h6，ul等狸页，塊級(jí)元素具有以下特點(diǎn)：
- 單獨(dú)占據(jù)一行顯示锨能，默認(rèn)情況下出皇，其寬度會(huì)自動(dòng)填滿(mǎn)父元素寬度爪模；
- 可以設(shè)置width，height屬性滋戳；
- 可以設(shè)置margin斋竞，padding屬性倔约。
display: inline
有該屬性的元素為內(nèi)聯(lián)元素，常見(jiàn)的有span坝初，a跺株，strong等，內(nèi)聯(lián)元素具有以下特點(diǎn)：
- 可以在一行排列脖卖，直到父元素寬度不夠才會(huì)換行；
- 不可以設(shè)置width巧颈，height屬性畦木，其寬度由內(nèi)容決定；
- 豎直方向上砸泛，即margin-top, margin-bottom, padding-top, padding-bottom無(wú)效十籍。水平方向上，即margin-left, margin-right, padding-left, padding-right有效唇礁。
<h1>inline-block</h1>
通過(guò)display: inline-block; 可以使元素對(duì)外表現(xiàn)出inline元素的特性勾栗，可以排列在一行；而對(duì)內(nèi)則是表現(xiàn)block屬性盏筐，可以設(shè)置height围俘，width，margin琢融，padding界牡。
但是inline-block常常會(huì)出現(xiàn)一個(gè)問(wèn)題就是元素之間會(huì)出現(xiàn)莫名其妙的間距
下面說(shuō)一說(shuō)消除這種間距的方法
- 消除html中的空格，即將inline-block元素連在一起寫(xiě)
<div><span display="inline-block"></span><span display="inline-block"></span></div>
這種方法的不足之處就是失去代碼的結(jié)構(gòu)性漾抬，不能一眼看出元素關(guān)系宿亡。
- margin負(fù)值
通過(guò)給每個(gè)inline-block元素添加margin負(fù)值來(lái)調(diào)整位置
span{ display: inline-block; margin-left: -5px; }
這個(gè)負(fù)值的大小需要自己來(lái)調(diào)整。
- font-size: 0
這種方法在大部分瀏覽器都是合適的纳令，若是在Chrome瀏覽器中挽荠，則需加上-webkit-text-size-adjust: none; - word-spacing和letter-spacing
這兩種方法的值克胳，因?yàn)g覽器的差異，都需要自己去調(diào)圈匆。
<h1>參考資料</h1>
張?chǎng)涡?鑫空間-鑫生活：去除inline-block元素間間距的N種方法
張?chǎng)涡?鑫空間-鑫生活：您可能不知道的CSS元素隱藏“失效”以其妙用
