inline&block&inline-block

Ryan_Li 發布于2019-08-30 13:06 / 2296人閱讀

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

本筆記主要來源于這篇文章,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可以借鑒到這一點嗎...

GPU云服務器云服務器 inline-block inline_block inline_block間隙 asp &amp&amp邏輯

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115309.html

tiktok培訓班是不是割韭菜

想做Tik Tok做跨境電商的速看！！！謹防被割傷六月份想了解tiktok跨境電商，從網上加了幾個自稱tiktok運營服務商的人，然后選了一個花了幾千塊錢，最后教的東西都是一些基礎搭建，比如資料修改網絡連接下載軟件[流淚][淚奔]最關鍵的是！花了幾千塊給我看的全是錄播課[發怒]所謂的導師，面都沒見過[祈禱]學習完一點實質性的東西都沒有，這些網上教程一大把我又何必花幾千塊錢[流淚]吹的天花亂墜，結果...

白馬嘯西風 2022-09-08 11:06 評論0 收藏0
UCloud優刻得2024雙11大促，解鎖超值優惠原

創業路上狂奔，業務波動讓你心跳加速？短期項目狂潮，數據如山，高并發讓你夜不能寐？穩扎穩打經營，更注重服務體驗和極致性價比？優刻得年底大促，一降到底！活動截止時間：2024年12月31日無論你是來自電商、金融、醫療還是人工智能、大數據等各個行業領域都可以在這找到適合你的一款云產品！選購指南大放送一文解析如何選購更省錢！活動直達：http://specialneedsforspecialkids.com/site/active/ku...

miguel.jiang 2024-11-06 13:38 評論0 收藏0
文檔流&amp;文字&amp;CSS常用命令

摘要：文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內聯元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯結，請使用屬性想打斷的內聯元文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排 sho...

zebrayoung 2019-08-30 14:13 評論0 收藏0
文檔流&amp;文字&amp;CSS常用命令

摘要：文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內聯元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯結，請使用屬性想打斷的內聯元文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排 sho...

pingink 2019-08-01 18:43 評論0 收藏0
UAPI-SDK 示例代碼使用

摘要：示例代碼使用操作步驟進入產品，選擇需要使用的。填寫相關字段。查看示例代碼，選擇語言，即可獲得該語言的代碼獲取賬戶公私鑰替換示例代碼中的及復制代碼，并在本地運行，即可獲得相應的查詢結果。SDK 示例代碼使用操作步驟Step1：進入UAPI產品，選擇需要使用的API。Step2：填寫相關字段。以獲取彈性IP信息-DescribeEIP為例，查詢賬戶中北京二地域某一項目的EIP資源列表。Step...

ernest.wang 2022-07-12 11:50 評論0 收藏0