html-css-js
/
7CSS常见属性.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7 CSS 常见属性</title>
    <style>
        .block {
            background-color: aqua;

            width: 200px;
            height: 70px;
        }

        .inline {
            background-color: brown;
            /* 行内元素设置宽和高是无效的，宽和高由内容决定
            width:200px; */
        }

        .inline-block {
            width: 200px;
            height: 200px;
        }

        .div-inline {
            display: inline;
            background-color: aquamarine;
        }

        .span-inline-block {
            display: inline-block;
            background-color: blueviolet;
            height: 60px;
        }
    </style>
</head>

<body>
    <h1>7 CSS 常见属性</h1>
    <h2>1.字体font</h2>
    <h1 style="font:bolder 50px 'Kaiti';">这是一个 font 复合属性示例</h1>
    <h2>2.行高line-height</h2>
    <p style="line-height: 50px;">
        这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，这是一个很长的文本，
    </p>
    <h2>3.class</h2>
    <div class="block">这是一个块级元素</div>
    <div class="block">这是第二个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <h2>4.src</h2>
    <img src="5217.jpg" alt="" class="inline-block">
    <img src="5217.jpg" alt="" class="inline-block">
    <br>
    块级元素
    行内元素
    行内块元素 是可以采用display属性互相转换的
    <hr>
    <div>这是一个 div 标签</div>
    <div class="div-inline">这是一个转换为行内元素的 div 标签</div>
    <span class="span-inline-block">这是一个span转换成行内块元素</span>
</body>

</html>