web前端_css02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*宽度允许百分比，高度不允许*/
        .c1 {
            background-color: bisque;
        }
        .c2{
            width: 50%;
            height: 100px;
        }
        /*inline由块级标签变成行内标签*/
        .dis-inline{
            display: inline;
        }
        /*block由行内标签变成块级标签*/
        .dis-block{
            display: block;
        }
        /*即使行内也是块级标签*/
        .dis-inline-block{
            display: inline-block;
        }
        /*内外边距*/
        .c3{
            /*1像素边框是绿色的*/
            border: 1px solid green;
            width: 100%;
            height: 100px;
        }
        .c4{
            background-color: red;
            width: 100%;
            height: 48px;
            /*外边距 可调整*/
            margin-top: 0px;
            /*内边距 可调整*/
            padding-top: 0px;
        }
    </style>
</head>
<body>
    <div class="c1 c2 dis-inline">块级变行内</div>
    <span class="c1 c2 dis-block">行内变块级</span>
<!--    行内标签必须自己有内容否则无法应用宽，高，内外边距(无法展示)-->
    <span style="height: 100px;width: 100px;background-color: yellow">内容</span>
    <br>
    <span class="dis-inline-block c1 c2">即时行内也是块级</span>
<!--    内外边距-->
    <div class="c3">
        <div class="c4"></div>
    </div>
</body>
</html>
巴特西

web前端_css02

最新文章

热门文章
