[Web 前端] 016 css 元素的轉(zhuǎn)換

印度阿三17 2019-05-03

展開全文

三種元素之間的轉(zhuǎn)換

display 屬性是用來設(shè)置元素的類型及隱藏的
常用的屬性有

none 元素隱藏且不占位置
block 元素以塊元素顯示
inline 元素以內(nèi)聯(lián)元素顯示
inline-block 元素以內(nèi)聯(lián)塊元素顯示（此屬性在 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;     /* 將塊元素轉(zhuǎn)換成內(nèi)聯(lián)元素，見效果截圖 1 */
    /*display:inline-block; 將塊元素轉(zhuǎn)換成內(nèi)聯(lián)塊元素，見效果截圖 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 屬性是用來設(shè)置元素的類型及隱藏的，常用的屬性有： 
        <span>1、none 元素隱藏且不占位置</span>
        <span>2、block 元素以塊元素顯示</span>
        <span>3、inline 元素以內(nèi)聯(lián)元素顯示</span>
        <span>4、inline-block 元素以內(nèi)聯(lián)塊元素顯示</span>
    </body>
</html>

span{
    width: 150px;
    height: 100px;
    background: pink;
    
    display:block;      /* 將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，見效果截圖 3 */
    /*display: inline-block; 將內(nèi)聯(lián)元素轉(zhuǎn)換成內(nèi)聯(lián)塊元素，見效果截圖 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;   /* 讓元素隱藏，并且隱藏元素不會再占據(jù)位置 */
}
.box2{
    display:block;   /* block 把元素轉(zhuǎn)換成塊元素，還可以顯示隱藏的元素 */
}
.box3{
    width: 200px;
    height: 200px;
    background: green;
}
.box3 span{
    display: none;
}
.box3:hover span{    /* 當(dāng)鼠標移入 box3 的時候，讓字體顯示 */
    color: pink;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    display: block;
}