CSS-盒子模式

最新推荐文章于 2024-05-05 11:46:24 发布

夜丶光

最新推荐文章于 2024-05-05 11:46:24 发布

阅读量290

点赞数

分类专栏： web前端文章标签： css-web前端

本文链接：https://blog.csdn.net/lcconsider/article/details/60866381

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML基础知识

块元素：必须要占据一行的元素
行内（内联）元素：会在一行内依次排列的元素

每一个元素都可以看作是一个盒子，在盒子内的被称为内容，盒子边界距离外边界的距离叫做外边距，内容距离盒子的距离叫做内边距。同时，都有宽和高的概念。
这里写图片描述

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            * {margin:0}/*去掉所有的外边距*/
            div {
                background-color:red;
                padding-left:200px;
            }
            p {
                background-color:green;
                margin-left:20px;
                margin-top:10px;
                margin-right:50px;
                margin-bottom:15px;
            }
            span {
                background-color:#cccccc;

            }
            h1 {background-color:#BBBB00}
            buttom {background-color:#FFEE99}
        </style>
    </head>
    <body>
        <div>元素1</div>
        <p>元素2</p>
        <span>元素3</span>
        <img>元素4</img>
        <span>元素5</span>
        <h1>元素6</h1>
        <buttom>元素7</buttom>
    </body>
</html>