inline&block&inline-block

Ryan_Li 發(fā)布于2019-08-30 13:06 / 2323人閱讀

摘要：本筆記主要來(lái)源于這篇文章還有我的一些想法雜糅而成另外這是我自己寫的一個(gè)大家感興趣的話都可以打開來(lái)看看在進(jìn)入正文之前做一些說(shuō)明今天的主題是比較主要的三個(gè)屬性值其實(shí)還有許多與表格布局相關(guān)的取值除去列表比如使

本筆記主要來(lái)源于這篇文章,w3school-cn-display,mdn-en-display還有我的一些想法雜糅而成,另外這是我自己寫的一個(gè)Demo,大家感興趣的話都可以打開來(lái)看看.

在進(jìn)入正文之前,做一些說(shuō)明.今天的主題是比較display主要的三個(gè)屬性值block,inline,inline-block.其實(shí)display還有flex,inline-flex,grid,inline-grid,ruby,ruby-base,ruby-text...許多與表格布局相關(guān)的取值(除去列表list-item)比如run-in,table,table-caption,table-cell,table-column,table-column-group,table-row,table-row-group...;使用較少的inherit,initial,unset;已經(jīng)移除的compact和marker等等...但是本文只涉及最常用的那三個(gè)取值.

display屬性

w3school表明該屬性用于定義建立布局時(shí)元素生成的顯示框類型,規(guī)定元素應(yīng)該生成的框類型;mdn表明該屬性指定了元素的渲染盒子類型,在HTML文檔內(nèi),默認(rèn)值是從HTML規(guī)范描述的行為或者瀏覽器/用戶樣式表里取得.XML文檔內(nèi)默認(rèn)取值是inline,對(duì)于HTML也一樣.沒有繼承性,指定的屬性值在非static定位元素,浮動(dòng)元素,根元素情況下會(huì)失效,屬性值變換過(guò)程當(dāng)中沒有動(dòng)畫.

塊級(jí)元素 有如下特點(diǎn):

另起一行開始,使得元素前后會(huì)有換行符.

寬高(分別默認(rèn)取值auto,相對(duì)于父容器的100%),行高,上下邊距都可以控制.

塊級(jí)元素通常作為其他元素的容器,可以容納其他內(nèi)聯(lián)和塊級(jí)元素.

常見塊級(jí)標(biāo)簽:

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

內(nèi)聯(lián)元素

元素前后沒有換行符,和其他元素都在一行里面.

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

有行內(nèi)框,圍繞這個(gè)框框有許多內(nèi)聯(lián)特性比如vertical-align,line-height等等.

一般都是基于semantic的元素,只能容納文本或者其他內(nèi)聯(lián)元素.

常見內(nèi)聯(lián)標(biāo)簽

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就是將元素顯示為行內(nèi)元素,display:block就是將元素顯示為塊級(jí)元素.
兩者主要用途如下:讓一個(gè)inline元素從新行開始,讓塊級(jí)元素和其他元素保持在同行,控制inline元素的寬度--可用于導(dǎo)航條,控制inline元素的高度,無(wú)需設(shè)定寬度即可為一個(gè)塊級(jí)元素設(shè)置與文字等寬的背景色.

inline-block

元素生成一個(gè)和周圍內(nèi)容一起流動(dòng)的塊級(jí)盒子,看起來(lái)就像一個(gè)行內(nèi)盒子,和旁邊的內(nèi)聯(lián)元素出現(xiàn)在同一行內(nèi),允許空格.也就是說(shuō),inline-block的元素可以設(shè)置高寬等塊級(jí)元素才具有的特征.此時(shí),若想使得該行所有元素高度相等,需要設(shè)置vertical-align: top使得頂部對(duì)齊.

兼容性

主要是對(duì)IE做兼容:
第一種辦法
先使用display: inline-block觸發(fā)塊級(jí)盒子,然后再定義display: inline讓塊級(jí)元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象.注意這兩步要分離在先后兩個(gè)不同的rule里面:

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

第二種辦法
首先作為內(nèi)聯(lián)元素呈現(xiàn),然后再觸發(fā)塊級(jí)盒子,要做的事情和第一種辦法相同,但是順序相反:

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

給segmentfault的一些反饋

記筆記能不能也增加個(gè)像寫文章,提問(wèn)題那樣的標(biāo)簽選項(xiàng),方便整理分類.

firefox或者chrome Command T之后新標(biāo)簽?zāi)懿荒芫图拥疆?dāng)前標(biāo)簽后面,加到最后搞得我有點(diǎn)難受...T_T QQ瀏覽器就可以個(gè)性化定制到這一點(diǎn),其實(shí)這個(gè)默認(rèn)無(wú)法更改就行了還用什么定制,本來(lái)就應(yīng)該人性化一點(diǎn),沒想到chrome,firefox不是這樣...

sefmentfault寫文章,記筆記,提問(wèn)題都有自動(dòng)保存的功能很好,但是會(huì)不會(huì)帶來(lái)較大的服務(wù)器壓力,,,如果有個(gè)快捷鍵(不要像CSDN上的button,因?yàn)槿磷珜懙脑捠植环奖?.)的話比如Command/Ctrl + Shift + S就感覺很棒.

還有segmentfault記筆記的markdown很不錯(cuò)(寫文章好像是正常模樣),各種語(yǔ)法都有相應(yīng)的樣式提示,"即寫即得"蠻不錯(cuò),比csdn要好,我轉(zhuǎn)移到segmentfault的原因有這一點(diǎn);還有記筆記,提問(wèn)題,寫文章都在一個(gè)社區(qū)挺好的...氛圍不錯(cuò);csdn和cnblogs對(duì)于前端來(lái)說(shuō),好像氛圍都比較差,不過(guò)還是經(jīng)?？吹玫酱笊駛兊奈恼潞陀懻?這一點(diǎn)甚是興奮;不過(guò)sf提問(wèn)題現(xiàn)在不太成熟,好像有時(shí)候提問(wèn)者和回答者并不是很專業(yè),態(tài)度也都比較隨便,不過(guò)我有時(shí)候也這樣...

csdn博客有一點(diǎn)做得很好,那就是排名積分機(jī)制.不知道segmentfault可以借鑒到這一點(diǎn)嗎...