首頁 > 文章 > web前端 > 帶你學習css中顯示方式有哪些？

帶你學習css中顯示方式有哪些？

零下一度原創: 2017-05-03 15:49:061984瀏覽

今天學習css中顯示方式

一、顯示方式：

方塊的預設顯示類型為可透過display 的屬性來修改

屬性：display

Display

的取值：

、#none

##。顯示，隱藏。值一旦設定為none，元素中的所有內容都不再顯示，並且不再佔據文件空間。 2、block :

###區塊，請使用任何一個元素像區塊層級一樣去 # 1# . 區塊的特性是：###### 1.獨自使用 ###### 2.可單獨設定寬高###### 2..###區塊的###使用場合： ###### 1###、且行內中在上顯示中的元素，並以想要像區塊級元素相同的顯示。 ######### 2###、將區塊層級從隱藏#####display:n#display》(display:n#display) block;)######### 3###、######inline###：請行，於任何一個元素像 inline###的###特點：多個元素在一行內顯示###### inline#######場合：##### 1 級元素變成行內元素## ####### 2###中與列內下元素上產生###nplay#nplay#nplay#nplay#nplay#nplay#npplay#nplay#npplay#npplay#npplay#npplay# ####### 4###、######inline-block###：行內塊，元素本身是行內元素，但是具備塊的特點###(######能夠修改寬與高######)### ， 6ed09268cbdd0015bce8dcbbdfa9bfe4 ###就是行內區塊元素#######

1.Inline-block的使用上使用場合：改變行內元素的寬度和高的時候# #inline-block

的顯示效果 1、

visibility

屬性 #

隱藏)## 1、# visible ：預設值，元素可見的。

、hidden##：「隱藏為元件之外，但隱藏元素仍然存在。 3

、

##collapsecoll: 2、opacity

#屬性

##1屬性

#1屬性#. ## opacity取值：0-1

之間的數字（包括

0 和 1） 0 ： 1 : 完全不透明

# 值取值與不透明

# 設定垂直對準方式

取值：

top / middle /bottom## baseline : 基線對準（預設對準方式）特殊使用方式：

針對行內區塊上區塊(img)元素，可定義邊緣上的文字與目前元素的對準方式。

例如：選擇我想讓下面的文字中，連結2變成行內區塊，讓連結##3 #變成區塊，連結4消失

<!DOCTYPE html >
       <head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
    a{
       border:1px solid black;
   width:70px;
   height:30px;
   background-color:silver;
}
   </style>
</head>
  
<body>
  <a href="#">链接1</a>
  <a href="#" style="display:inline-block;">链接2</a>
  <a href="#" style="display:block;">链接3</a>
  <a href="#"style="display:none;">>链接4</a>
</body>
</html>

、遊標屬性cursor ：

預設狀況，網頁上的遊標顯示會依照不同的元素顯示不同的外觀。

超連結：手狀

文字： I

按鈕：箭頭

在css中，可透過 cursor 屬性改變遊標顯示效果，給予客戶一種可視化的暗示。

為屬性：cursor

選擇值：point crosshair: + 狀

# text: I狀

wait: 等待中

以上是帶你學習css中顯示方式有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css溢位與換行該如何處理下一篇：css溢位與換行該如何處理

看更多