css中display如何使用
display常用的屬性值為區塊級block，行級inline，行區塊級inline-block，none，且行級或區塊級標籤可以透過display進行轉換
#本文將分享CSS中display屬性，具有一定的參考價值，希望對大家有幫助
我們一般在CSS佈局製作時候，常常會用到display屬性中的值block、none、inline，inline -block那麼今天我們來學習如何使用它們
display屬性
#display屬性可以有多個值，但常常用到的如下所示
none:此元素不會被顯示。
block：此元素將顯示為區塊級元素，此元素前後會帶有換行符號。
inline：此元素會被顯示為內聯元素，元素前後沒有換行符號。
inline-block:行內區塊元素，既有區塊級屬性又有行級屬性。
所以在這篇文章中，我將詳細介紹block，inline，inline-block以及none，這些常用的屬性值
display：block
特點：獨自佔用一行，可以透過CSS 改變寬高
常用的區塊級元素：div，p，ul，li，ol，form，address
display ：inline
特點：內容決定大小， 不可以透過CSS 改變寬高
常用的行級元素： span，strong，em，a，del
<style>
div{
background-color: pink;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><span class="span">hello</span>world</p>//行级元素如上圖所示可以看出block元素佔據了一行的全寬，想當與width:100%，下面的內容要以新行開始
而行級元素就是只顯示自己那部分的內容，不佔用一行
效果圖
#行區塊級元素轉換
（1）區塊級元素轉行級元素
給區塊級元素設定display：inline
結果就成這樣
（2）行級元素轉換成區塊級
給行級元素設定display:block
結果如下
##display:inline-block
常見的行內塊元素：img、input特點： 內容決定大小，可以改變寬高<style>
span{
background-color: yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>
display：none與visibility：hidden區別
display：none用來隱藏元素，不但看不見還不佔用任何空間大小visibility: hidden也可以用來隱藏元素，但是雖然看不見仍存在，保留一個空位例 .span{
background-color: aquamarine;
display:none;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>
以上是css中display如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
由於洩漏的自拍顯示器增加了以前價格實惠的相機系列的複雜性，富士 X-M5 的價格預期上升
Sep 07, 2024 am 09:34 AM
富士膠片粉絲最近對 X-T50 的前景感到非常興奮，因為它重新推出了預算導向的富士膠片 X-T30 II，該膠片在 1,000 美元以下的 APS-C 類別中非常受歡迎。不幸的是，隨著 Fujifilm X-T50 的推出
Apple Studio Display 的電源線是可拆卸的，但需要特殊工具
May 17, 2023 pm 03:05 PM
AppleStudioDisplay現已在商店正式發售，全球已有多家客戶購買了該產品。與ProDisplayXDR不同，StudioDisplay有一個獨特的電源連接器，似乎是不可拆卸的。事實證明，電纜是可拆卸的，但您需要使用特殊工具才能將其卸下。蘋果在網站上表示，StudioDisplay的電源線是不可拆卸的——而且很多用戶都這麼認為。那是因為用你的雙手移除電纜似乎是不可能的，但幸運的是，電纜可以從顯示器上分離。 ，Apple有一個特殊的工具，用於從其新的StudioDispl
比較：Apple Studio Display vs Samsung Smart Monitor M8
May 11, 2023 pm 10:46 PM
三星智慧顯示器M8與AppleStudio顯示器：設計和尺寸自推出以來，AppleStudioDisplay就被比作iMac，由相對簡單的L形支架上的相對薄的面板組成。這是一種眾所周知且深受喜愛的美學，三星似乎借用了它的展示。三星SmartMonitorM8採用了與外觀非常相似的支架上的薄螢幕的相同想法。一些次要元素有所不同，例如左下角的小部分有點突出，三星的下巴很薄，但它們在基本設計方面似乎很接近。三星似乎從24吋iMac中獲得了很多靈感。蘋果的顯示器比三星的小
display是什麼意思
Oct 26, 2023 am 11:50 AM
display通常指的是將資料、資訊或結果以某種方式展示給使用者或輸出到螢幕或其他裝置上的操作或功能。具體意義：1、在命令列介面（CLI）中，display可能指的是將文字、表格或其他格式的資料輸出到終端窗口，供使用者查看或分析；2、在圖形使用者介面（GUI）中， display可能指的是將圖像、文字、圖表等內容顯示在應用程式的視窗或介面上，以供使用者互動或瀏覽等等。
Boot Camp 更新以支援 Apple Studio Display
May 20, 2023 pm 11:34 PM
在Mac上運行Windows的IntelMac用戶現在可以更新BootCamp中的驅動程序，以支援Apple的StudioDisplay。 Apple會定期更新BootCamp，以引入對新硬體的支持，以及典型的兼容性和效能改進。在3月的軟體更新中，Apple已啟用BootCamp以與新的StudioDisplay搭配使用。將BootCamp帶到6.1.17版的更新引入了兩個關鍵支援元素。首先，它增加了對StudioDisplay的兼容性，確
比較：Apple Studio Display vs LG UltraFine 5K Display 哪個好？
Apr 16, 2023 pm 08:25 PM
StudioDisplay和LGUltraFine5KDisplay在市場上佔有相似的位置，但蘋果的顯示器要貴300美元。以下是您需要了解的有關這些顯示器如何比較的所有資訊。六年在科技領域是一段很長的時間，而這也是蘋果出售一款價格不超過5,000美元的品牌顯示器以來的時間。在此期間，Apple與LG合作銷售專門迎合Mac用戶的LGUltraFine系列。 2019年，Apple停止販售這些LG顯示器，轉而支援ProDisplayXDR，這在價格適中的Mac友善顯
Google Pixel 9 Pro XL 在 DxOMark「全球」智慧型手機相機排名中排名第二
Aug 23, 2024 am 06:42 AM
谷歌的新 Pixel 9 系列推出了先前系列中沒有的新型號 Pixel 9 Pro XL。它本質上與非 XL 版本（在亞馬遜預訂）相同，但顧名思義，它具有更大的螢幕。兩個電子
display有哪些值
Nov 20, 2023 pm 05:28 PM
display的取值有block、inline、none、inline-block、flex、grid、table、inline-table和list-item等。詳細介紹：1、block，將元素渲染為區塊級元素，區塊級元素在頁面上形成一個區塊，並且獨佔一行；2、inline，將元素渲染為內聯元素。內聯元素不會獨佔一行，可以與其他元素並排；3、none，此值指定元素不會在頁面上等等。
