inline&block&inline-block

本筆記主要來源於這篇文章,w3school-cn-display,mdn-en-display還有個人一些想法雜糅而成,另外這是我本身寫的一個Demo,你們感興趣的話均可以打開來看看.

在進入正文以前,作一些說明.今天的主題是比較display主要的三個屬性值block,inline,inline-block.其實display還有flex,inline-flex,grid,inline-grid,ruby,ruby-base,ruby-text...許多與表格佈局相關的取值(除去列表list-item)好比run-in,table,table-caption,table-cell,table-column,table-column-group,table-row,table-row-group...;使用較少的inherit,initial,unset;已經移除的compact和marker等等...可是本文只涉及最經常使用的那三個取值.

display屬性

w3school代表該屬性用於定義創建佈局時元素生成的顯示框類型,規定元素應該生成的框類型;mdn代表該屬性指定了元素的渲染盒子類型,在HTML文檔內,默認值是從HTML規範描述的行爲或者瀏覽器/用戶樣式表裏取得.XML文檔內默認取值是inline,對於HTML也同樣.沒有繼承性,指定的屬性值在非static定位元素,浮動元素,根元素狀況下會失效,屬性值變換過程中沒有動畫.

塊級元素

有以下特色:

• 另起一行開始,使得元素先後會有換行符.

• 寬高(分別默認取值auto,相對於父容器的100%),行高,上下邊距均可以控制.

• 塊級元素一般做爲其餘元素的容器,能夠容納其餘內聯和塊級元素.

常見塊級標籤:

div,p,pre,h1...h6,table,address,blockquote,dl,form,hr,ol,ul,li,noscript等等

內聯元素

• 元素先後沒有換行符,和其餘元素都在一行裏面.

• 寬高取決於所容納文字或者圖片的寬高,行高,上下邊距不可改變.

• 有行內框,圍繞這個框框有許多內聯特性好比vertical-align,line-height等等.

• 通常都是基於semantic的元素,只能容納文本或者其餘內聯元素.

常見內聯標籤

a,img,input,button,em,strong,br,sub,sup,script,map,del,iframe
,strike,acronym,small,abbr,label,select,textarea等等

inline&block&inline-block

inline&block

display:inline就是將元素顯示爲行內元素,display:block就是將元素顯示爲塊級元素.
二者主要用途以下:讓一個inline元素重新行開始,讓塊級元素和其餘元素保持在同行,控制inline元素的寬度--可用於導航條,控制inline元素的高度,無需設定寬度便可爲一個塊級元素設置與文字等寬的背景色.

inline-block

元素生成一個和周圍內容一塊兒流動的塊級盒子,看起來就像一個行內盒子,和旁邊的內聯元素出如今同一行內,容許空格.也就是說,inline-block的元素能夠設置高寬等塊級元素才具備的特徵.此時,若想使得該行全部元素高度相等,須要設置vertical-align: top使得頂部對齊.

兼容性

主要是對IE作兼容:
第一種辦法
先使用display: inline-block觸發塊級盒子,而後再定義display: inline讓塊級元素呈現爲內聯對象.注意這兩步要分離在前後兩個不一樣的rule裏面:

.ie-inline-block {
    display: inline-block;
    width: 100%;
    ...
}
.ie-inline-block {
    display: inline;
}

第二種辦法
首先做爲內聯元素呈現,而後再觸發塊級盒子,要作的事情和第一種辦法相同,可是順序相反:

.ie-inline-block {
    display: inline;
    zoom: 1;
    ...
}

給segmentfault的一些反饋

• 記筆記能不能也增長個像寫文章,提問題那樣的標籤選項,方便整理分類.

• firefox或者chrome Command T以後新標籤能不能就加到當前標籤後面,加到最後搞得我有點難受...T_T QQ瀏覽器就能夠個性化定製到這一點,其實這個默認沒法更改就好了還用什麼定製,原本就應該人性化一點,沒想到chrome,firefox不是這樣...

• sefmentfault寫文章,記筆記,提問題都有自動保存的功能很好,可是會不會帶來較大的服務器壓力,,,若是有個快捷鍵(不要像CSDN上的button,由於全屏撰寫的話十分不方便..)的話好比Command/Ctrl + Shift + S就感受很棒.

• 還有segmentfault記筆記的markdown很不錯(寫文章好像是正常模樣),各類語法都有相應的樣式提示,'即寫即得'蠻不錯,比csdn要好,我轉移到segmentfault的緣由有這一點;還有記筆記,提問題,寫文章都在一個社區挺好的...氛圍不錯;csdn和cnblogs對於前端來講,好像氛圍都比較差,不過仍是常常看獲得大神們的文章和討論,這一點甚是興奮;不過sf提問題如今不太成熟,好像有時候提問者和回答者並非很專業,態度也都比較隨便,不過我有時候也這樣...

• csdn博客有一點作得很好,那就是排名積分機制.不知道segmentfault能夠借鑑到這一點嗎...