内联元素和块级元素

最新推荐文章于 2021-11-01 16:51:22 发布

友人C君~

最新推荐文章于 2021-11-01 16:51:22 发布

阅读量195

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/89383715

HTML 专栏收录该内容

2 篇文章

订阅专栏

对应关系

display:block;块级元素div,h3,p,hr,ul,li

display:inline;内联元素，如a,span

display:inline-block;替换元素，如img，input

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>内联元素和块级元素</title>
    <style type="text/css">
        body,
        html {
            padding: 0px;
            margin: 0px;
            /*width: 100%;不需要,块级元素自动填满*/
            height: 100%;
            background: gray;
        }

        article {
            width: 50%;
            margin: 0px auto;
            background: greenyellow;
        }

        div {
            background: green;
            height: 30%;
            margin: 2rem;
            padding: 5rem;
        }

        span {
            /*块级元素设置宽高无效*/
            width: 500px;
            height: 500px;

            /*虽然显示有上下内边距但是不改变原来的布局(既不影响本身位置，也不影响其他标签位置)，只有左右内边距才改变其布局*/
            padding: 14px;

            /*虽然显示有上下外边距但是不改变原来的布局，只有左右外边距才改变其布局*/
            margin: 10px;

            background: cornflowerblue;
        }

        input {
            width: 450px;
        }

        p {
            padding: 0px;
            margin: 0px;
            background: palegoldenrod;
        }
    </style>
</head>

<body>

    <article>
        article
    </article>

    <div>
        div
        <span>span</span>
        <input type="text" />
        <p>ppppppppppppppppppppppppppppppp</p>
    </div>

</body>

</html>