Day13显示模式

标签在网页的显示方式称为显示模式
共有三种不同的显示模式，其作用也各不相同
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
    <style>
        /* 块级元素:独占一行,宽度默认是父级的100%，且对其设置宽高生效 */
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            color: red;
        }
        .div2{
            color: sienna;
        }
        /* 一行显示多个,宽高属性不生效,宽度由内容撑开 */
        span{
            width: 200px;
            height: 200px;
        }
        /* 与行内元素的区别在于宽高属性会生效 */
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- 块元素 -->
    <div class="div1">我曾经跨过山和大海</div>
    <div class="div2">也穿过人山人海</div>
    <!-- 行内元素 -->
     <span>我是一辆大洒水车</span>
     <span>雨夜并不需要我</span>
    <!-- 行内块元素 -->
     <img src="../image/2.webp" alt="">
     <img src="../image/2.webp" alt="">

</body>
</html>

image

转换显示模式
image
行内块与块级是常用的，行内元素由于无法设置宽高，所以应用不多

posted @ 2025-11-05 18:25  冰涿  阅读(9)  评论(0)    收藏  举报