display的用法總結

2021-02-13 學習編程一小時

塊級元素(block)特性：

總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或圖片的大小;

塊級元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

內聯元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可變元素(根據上下文關係確定該元素是塊元素還是內聯元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中塊級、內聯元素的應用：

利用CSS我們可以擺脫上面表格裡HTML標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。

主要用的CSS樣式有以下三個：

display:block  -- 顯示為塊級元素

display:inline  -- 顯示為內聯元素

display:inline-block -- 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性

我們常將所有<li>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。

相關焦點

  • 探究CSS display屬性用法
    探究CSS display屬性用法 你對CSS display 屬性的用法是否了解，display 屬性規定元素應該生成的框的類型，它用於定義建立布局時元素生成的顯示框類型。
  • 英語語法:短語on behalf of, on display的用法
    97. on behalf of 代表，為了……的利益用法：on behalf of後面可以跟表示人、團隊、公司之類的名詞、代詞或者名詞詞組。 98. on display展覽用法：on display通常與系動詞連用，也可以用on show，一般不放在句首。
  • CSS中display屬性的妙用
    CSS中display屬性的妙用 CSS中visibility屬性隱藏元素但保持元素的浮動位置，而display實際上是設置元素的浮動特徵，這裡就向大家描述一下display屬性的具體使用，希望對你有所幫助。
  • HTML DOM display屬性語法實例解析
    HTML DOM display屬性語法實例解析 大家對CSS display屬性的用法應該比較熟悉，這個屬性用於定義建立布局時元素生成的顯示框類型，那麼HTML DOM display 屬性有何用途呢，請看本文詳細介紹。
  • display 的 32 種寫法
    無非就是能自動換行而已，但其實你完全可以做一個 <table><tr><td>標籤，把它全都替換成 display:block;也可以自動折行，只不過略微麻煩而已。關於 display:table;的詳細用法，大家可以參考這篇文章，這裡就不細說了。display: flex;敲黑板，劃重點！
  • 神奇的 display
    在復盤 Flex 布局和 Grid 布局之前，先復盤一下display。何為 display複雜的定義不做贅述，把display 看成一個轉接頭就好，之前有幾篇文章有提到或者用到過 TA。盒子的表現形式可以通過display屬性控制，一起來復盤一些常見的樣式吧。
  • CSS : Visibility 和 Display 屬性的比較
    請留意一下當綠色的 Div 屬性分別被設為 visibility： hidden 和 display： none 時對其它元素會有什麼影響。Visibility 屬性的用法Visibility 屬性共有四個可用的值（visible、hidden、collapse 和 inherit），但常用的值是 visible 和 hidden。
  • display的32種寫法
    無非就是能自動換行而已，但其實你完全可以做一個<table><tr><td>標籤，把它全都替換成display: block;也可以自動折行，只不過略微麻煩而已。關於display: table;的詳細用法，大家可以參考這篇文章，這裡就不細說了。display: flex;敲黑板，劃重點！
  • 巧用 display: contents 增強頁面語義
    基本用法根據 W3C 對 display: contents 的定義。The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal.
  • 關於CSS中display的32種寫法
    你知道回』字有四種寫法，但你知道 display有 32種寫法嗎？今天我們一一道來，讓你一次性完全掌握 display，從此再也不用對它發愁。無非就是能自動換行而已，但其實你完全可以做一個標籤，把它全都替換成 display:block;也可以自動折行，只不過略微麻煩而已。關於 display:table;的詳細用法，大家可以參考這篇文章，這裡就不細說了。
  • 小介詞大用法之at用法總結
    前面我們講過in的常用用法，有一點需要補充，in還可以加一段時間，比如in two days，一般表示在兩天之內，是一般將來時的時間標誌。正式進入今天的主題，at有很多用法，首先可以加時間點——at 6 O'clock 在六點整，其次，at還可以加小地方，這一點區別於in的用法，舉例，常用的有:at home, at school等，再其次，at還可以加節日，比如at Christmas,.at Halloween,
  • 如何理解CSS的display屬性
    英文出處：https://www.chenhuijing.com/blog/how-well-do-you-know-display/在布局中，display屬性是最重要的CSS屬性之一。我們了解到的已經相當不錯了有趣的事實: 我們所使用的display屬性值實際上有很大的限制。如:block在塊流中有很大限制。請參考規範獲取完整的列表。所有的元素都有一個默認的display值,但是均可以被顯式設置所重寫。display: none;將元素與其子元素從普通文檔流中移除。
  • 小介詞大用法之in的用法總結
    曾經有的專家總結過，初中階段的英語只要搞定四個方面，考試就是小case了。那麼哪四個方面呢?它們分別是介詞，詞性，從句和非謂語。有的同學說介詞不就是in,on,at這些嗎？有什麼好說的呢?非也，想要真正學好介詞，其實需要下一番功夫的。
  • CSS 中 display,visiblity及 overflow 的作用和區別
    Displaydisplay 用來設置或檢索對象是否及如何顯示。display: nonedisplay 屬性為 none 時,隱藏標籤對象。: none;}#c{ background-color: blue;}效果如下:display: blockdisplay 屬性為
  • Graduation artworks on display
    Graduation artworks on displayThis year, the Exhibition was jointly organized by the Academy and the Graduate School at Shenzhen, and the artworks are on display
  • JQuery操作CSS功能用法總結
    JQuery是非常強大的一個JS框架，本人常用它處理一些JS效果，但由於沒有總結，往往在用的時候總是記不住用法，總得再上網查查，於是乾脆把平時用到的一些總結出來放在這裡。這次先總結JQuery操作CSS功能用法。JQuery獲得樣式值。用法：.css("樣式")。
  • 【語法】被動語態的特殊用法考點總結
    初中階段，被動語態的特殊用法主要有兩種形式分別是：主動形式表示被動意義，被動形式表示主動意義。我們具體來看一下它們的用法：1、用主動形式表示被動意義。主動形式來表示被動意義主要有以下六個考點：1）某些連繫動詞如 smell，feel，taste，sound，prove等可表達被動含義。
  • As的具體用法總結
    今天我們學習的內容是關於as的用法總結。我們在之前的知識點中已經學習as可以做關係代詞引導定語從句，as…as結構, 及一些關於as的倍數表達法。今天我們要掌握as的其它用法，1. 作介詞，意思是作為如: As a party member, I must be strict with myself。 2．作連詞，引導方式狀語從句，意為「像按照」。
  • CSS Display屬性的雙值寫法
    display屬性，なに？display屬性用來控制一個元素及其子元素的格式化上下文，你應該在剛剛學習CSS的時候就知道，有些元素是塊級元素，有些則是行內元素。有了display屬性，你就可以切換元素不同的狀態。比如說，通常一個h1元素是一個塊級元素，但是通過切換，它就能以內聯元素展現。
  • CSS Display屬性與盒模型
    本文首先引入CSS盒模型，然後通過不同的display屬性分別介紹Box常見的呈現方式。因為HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之一。 每個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 根據display屬性的不同，Box的呈現方式又有所不同。