2. 程式人生 > >css之元素顯示方式的轉換（display的用法）

css之元素顯示方式的轉換（display的用法）

阿新 • • 發佈：2019-01-17
CSS元素的顯示方式的轉換

1、隱藏元素

（1）display樣式的none
<style type="text/css">
#p1{
display: none;
}
</style>
</head>
<body>
<p id="p1">段落1</p>
<p>段落2</p>
</body>


釋放該元素所佔的空間。


（2）visibility定義為hidden
<style type="text/css">
#p1{
visibility: hidden;
}
</style>
</head>
<body>
<p id="p1">段落1</p>
<p>段落2</p>
</body>


visibility 的hidden屬性，它雖然也能隱藏元素但是，並不釋放佔用的空間


因此，一般情況下使用display的none值將元素隱藏。


例1：
<style type="text/css">
ul{
list-style-type: none;
}
li{
font-size: 20px;
font-weight: bold;
background-color: gray;
width: 100px;
}
.two li,.two{
font-size: 16px;
font-weight: normal;
background-color: yellow;
}
.two{
display: none;
}


</style>
</head>
<body>
<ul>
<li>
一級選單
<ul class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
</ul>
</body>






2、display屬性（block）

將元素將顯示為塊級元素， 此元素前後會帶有換行符。（一旦某個元素以塊級元素顯示後，那麼它就可以設定塊級元素的樣式）

如，span元素原來是行內元素，將其的display屬性定義為block後，該元素顯示變成塊級元素，具有塊級元素的特徵。
span{
width: 50px;
height: 50px;
background-color: yellow;
display: block;
}


例2：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type: none;
}
li{
font-size: 20px;
font-weight: bold;
background-color: gray;
width: 100px;
}
.two li,.two{
font-size: 16px;
font-weight: normal;
background-color: yellow;
}
.two{
display: none;
}
.one>li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="one">
<li>
一級選單
<ul class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
<li>
一級選單
<ul  class="two">
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
</ul>
</body>
</html>


3、display屬性（inline）

設定display屬性值為inline後，元素會被顯示為內聯元素， 元素前後沒有換行符。
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div>div</div><div>div</div>
</body>




4、display屬性（inline-block）
inline-block屬性值可以將元素轉換成行內塊元素。
應用此特性的元素呈現為內聯物件， 周圍元素保持在同一行， 但可以設定寬度和高度地塊元素的屬性


<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: yellow;
display:inline-block;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>div</div><div>div</div>
</body>



相關推薦

css之元素顯示方式的轉換（display的用法）

CSS元素的顯示方式的轉換1、隱藏元素 （1）display樣式的none<style type="text/css">#p1{display: none;}</style> </head> <body><p id="p

CSS之元素顯示與隱藏

文章目錄 元素的顯示與隱藏 display 顯示 visibility 可見性 overflow 溢位 溢位的文字隱藏 white-space text-overflow 文字溢位

javaScript顯示和隱藏（display屬性）

javascript<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>display</t

各種格式時間/日期的顯示及轉換（C/C++）

程式設計過程中經常需要各種格式的時間形式，比如整型時間、年月日形式的時間等，下面對各種格式的時間及操作進行簡單的總結： 1、獲取當前時間的整型數值 time_t ttime； ttime = time(NULL); // 秒數 struct timeb

LeetCode之Roman & Integer 的轉換（簡單題）

羅馬數字和現在使用的阿拉伯整數之間的轉換在LeetCode上一共有兩道題目：Roman to Integer 和Integer to Roman 如標題所說的，這是個簡單的字串處理的題目，基本上知道了規則就可以直接寫出程式碼解決了。 羅馬數字基本規則 做好

css之元素的顯示方式

、元素的四種顯示方式1、隱藏 2、塊級元素 典型代表: div ,p, h,ul.... 特點:獨自佔據一行可以設定有效寬高當發生巢狀的時候,如果沒有給子元素設定寬高,子元素的寬度和父元素一樣寬<style type="text/css">div{width:

CSS Display(顯示) 與 Visibility（可見性）

display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。 隱藏元素 - display:none或visibility:hidden 隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設

CSS元素顯示模式轉換

網頁標籤分為兩種級別，一種是塊級，一種是行級。 塊級元素會單獨佔用網頁的一行內容，比如div、ul、ol、p……，這類標籤預設情況下寬度就是 body 的寬度。 行級元素就是行內元素，即不會單獨佔用一行，而是在行內公用空間，比如a、span……，行內元素沒有寬高，也不可以設

CSS之元素

激活 back input 風格 sheet pla 情況下 轉行 -- CSSS書寫位置 內嵌式 <head> <style type = "text/css"> **** </style> </head>

selenium+python之元素定位方式介紹

組合 ima box switcher 關鍵字 NPU span 獲取 今天 網頁自動化測試最基本的要求就是要定位到各個元素，然後才能對該元素進行各種操作（輸入，點擊，清除，提交等），所以今天來總結下Selenuim+Python最基本的幾種定位方式及實例說明，

JavaEE Spring與MyBatis的整合之傳統DAO方式整合（教材學習筆記）

在實際開發中MyBatis都是與Spring整合在一起使用的，在之前學習了MyBatis與Spring，現在來學習如何使他們整合 首先建立一個名為chapter10的web專案 一、環境搭建 1.準備好所有的有關jar包，具體如下： 將上面所有jar包新增到專案lib目錄下

css:子元素設定margin-top父元素會跟著移動（margin塌陷）

程式碼如下： 效果如圖： 這種情況成為margin塌陷：父子元素的margin-top屬性，會共用值最大的那個。所以父元素公用了子元素的margin-top值，自然也就跟著移動了。 解決方法:bfc 觸發bfc的方法有以下幾種： position:absolute; disp

資料結構實驗之棧與佇列一：進位制轉換（SDUT 2131）

題目連結 題解： 特判一下n==0的時候。 #include <bits/stdc++.h> using namespace std; int a[1000]; int main() {

CSS之元素居中

一、水平居中 水平居中分為了行級元素、塊級元素（定寬塊級元素、不定寬塊級元素）。 （1）行級元素 行級元素居中只需在父元素中新增text-align:center屬性即可。 <!DOCTYPE html> <html lang="en"> &l

BootStrap-CSS樣式_佈局元件_導航元素(導航或標籤（Tab頁）)

導航元素所涉及樣式： nav-tabs樣式：呈現表格導航或標籤（Tab頁）樣式 nav-pills樣式：呈現膠囊式導航選單（Tab頁）樣式 nav-stacked樣式：水平導航設定為堆疊(垂直)效果 disabled樣式：呈現禁用的導航選單樣式,在li標籤中使用 active樣式

資料結構實驗之棧一：進位制轉換（java實現）

資料結構實驗之棧一：進位制轉換 Time Limit: 1000MS Memory Limit: 65536KB Problem Description 輸入一個十進位制整數，將其轉換成對應

[jQuery]無法準確獲取隱藏元素（display:none）寬度(width)和高度(height)的新解決方案

在開發一個彈框外掛時，遇到一個需要計算隱藏彈框的高度問題。用jquery裡面的方法$('box').outerHeight(true)得到隱藏層高度的值隨著滾動條滾動總是不一致。沒轍，放棄這一方法去獲取，原來生js中的offsetHeight來試試看，$(''box")[

VC之CString,wchar_t,int,string,char*之間的轉換（轉帖）

CString 轉 wchar_t CString path = "asdf"; wchar_t wstr[256] = path.AllocSysString(); 或者： wchar_t wcstring[256]; MultiByteToWideChar(CP_ACP,0,path,-1,wcstri

學習21 css內聯式寫入法（直接寫入）

個人 css樣式 最大 code div utf 介紹 head 能力 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css樣式介紹<

JavaSE 學習筆記之網絡編程（二十三）

-c 可能 nbsp blog col accept 接收 存儲 pri 端口： 物理端口： 邏輯端口：用於標識進程的邏輯地址，不同進程的標識；有效端口：0~65535，其中0~1024系統使用或保留端口。 java 中ip對象：InetAddress. import