[Web 前端] 016 css 元素的转换

印度阿三17 2019-05-03

展开全文

三种元素之间的转换

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;
}