[Web 前端] 016 css 元素的轉換
阿新 • • 發佈：2019-05-03
over 技術 com 使用 align play 鼠標 ima 塊元素
三種元素之間的轉換
- display 屬性是用來設置元素的類型及隱藏的
- 常用的屬性有
- none 元素隱藏且不占位置
- block 元素以塊元素顯示
- inline 元素以內聯元素顯示
- inline-block 元素以內聯塊元素顯示（此屬性在 Html5 中被棄了，但還能使用）
少廢話，上例子
例1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
div{
width: 100px;
height: 100px;
display:inline; /* 將塊元素轉換成內聯元素，見效果截圖 1 */
/*display:inline-block; 將塊元素轉換成內聯塊元素，見效果截圖 2 */
}
.box1{
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}- 效果截圖 1
- 效果截圖 2
例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title>> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> display 屬性是用來設置元素的類型及隱藏的，常用的屬性有： <span>1、none 元素隱藏且不占位置</span> <span>2、block 元素以塊元素顯示</span> <span>3、inline 元素以內聯元素顯示</span> <span>4、inline-block 元素以內聯塊元素顯示</span> </body> </html>
span{
width: 150px;
height: 100px;
background: pink;
display:block; /* 將內聯元素轉換成塊元素，見效果截圖 3 */
/*display: inline-block; 將內聯元素轉換成內聯塊元素，見效果截圖 4 */
}- 效果截圖 3
- 效果截圖 4
例3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title>> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div class="box1">box1</div> <div class="box1 box2">box2</div> <!-- 類可以取多個名字，有種多繼承的感覺 --> <div class="box3"> <span>我顯示了！</span> </div> </body> </html>
.box1{
width: 200px;
height: 200px;
background-color: red;
display: none; /* 讓元素隱藏，並且隱藏元素不會再占據位置 */
}
.box2{
display:block; /* block 把元素轉換成塊元素，還可以顯示隱藏的元素 */
}
.box3{
width: 200px;
height: 200px;
background: green;
}
.box3 span{
display: none;
}
.box3:hover span{ /* 當鼠標移入 box3 的時候，讓字體顯示 */
color: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
display: block;
}- 效果截圖 5
- 效果截圖 6
參考：北京圖靈學院的 Web 前端公開課
[Web 前端] 016 css 元素的轉換