CSS display顯示分別為block、 inline、 inline-block的三種元素
塊級元素
塊級元素最顯著的特點是預設佔用一整行
就算設定快級元素的寬度小於螢幕的寬度,但是該塊級元素仍然佔用那一整行,快級元素始終佔用一整行,除非浮動塊級元素,後面的元素才會漂上來。
如果需要佔滿所有可用的空間,則選擇使用塊級元素
內聯塊級元素
如果不想獨佔一行,並且需要設計他的大小,則可以使用內聯塊級元素
在使用塊級元素的方便之時又希望該元素不用換行,則使用內聯塊級元素!
內聯塊級元素擁有塊級元素的上下左右的內外邊距的方便,同時允許不換行!
內聯元素
如果不需要獨佔一行,也不需要設計它的上下外邊距,則使用內聯元素
inline內聯元素僅支援左右的外邊距,不支援上下的外邊距,支援上下左右的內邊距。
相關文章
- css32 CSS Layout - display: inline-blockCSSS3inlineBloC
- CSS之使用display:inline-block來佈局CSSinlineBloC
- display:block display:inline-block 的屬性、呈現和作用BloCinline
- 請問display:inline-block在什麼時候會顯示間隙?inlineBloC
- position:absolute和float隱式改變display為inline-blockinlineBloC
- inline、block、inline-block這三個屬性值有什麼區別?inlineBloC
- CSS 中的 float、BFC、position 和 inline-blockCSSinlineBloC
- inline-block元素下移問題的分析及解決inlineBloC
- margin屬性的負值 在inline-block元素下是如何表現的?inlineBloC
- CSS佈局(inline和block)CSSinlineBloC
- 元素的隱藏和顯示(display ,visibility ,overflow)
- css 元素顯示模式CSS模式
- display:flex與inline-flex 區別Flexinline
- display:inline-flex 和 display:flex有什麼區別inlineFlex
- CSS筆記-2:元素的顯示模式CSS筆記模式
- 三種動態控制SAP CRM WebClient UI assignment block顯示與否的方法WebclientUIBloC
- 【CSS】CSS 世界 — 元素的顯示與隱藏學習總結CSS
- sap table 分為三種型別(轉)型別
- CSS 技巧篇(六):display設定元素為行內元素時,元素之間存在間隙問題CSS
- CSS 小結筆記之元素的隱藏與顯示CSS筆記
- 教你三種jQuery框架實現元素顯示及隱藏動畫方式jQuery框架動畫
- CSS之Display、Visbility和Opactity的區別CSS
- CSS display:none和visible:hidden區別CSSNone
- HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別HTML
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- web前端(21)如何解決兩個inline-block並排出現空白間隙的情況&&如何進行文字溢位設定Web前端inlineBloC
- IPS/PLS/IN/VA顯示器皮膚的區別 顯示器皮膚型別哪種好?型別
- css之displayCSS
- Block迴圈引用的三種解決方式BloC
- 2022 最受歡迎的 CSS 偽類、偽元素分別是什麼CSS
- WPF/C#:顯示分組資料的兩種方式C#
- CSS #定位 #顯示方式CSS
- absolute定位css元素居中的兩種方法CSS
- css display 屬性CSS
- CRM product UI裡assignment block的顯示隱藏邏輯UIBloC
- 有趣的css—隱藏元素的7種思路CSS
- 點選一列顯示其index的三種方法Index
- unity 分數的顯示Unity