CSS盒子模型

最新推荐文章于 2024-07-16 17:18:30 发布

Johaden

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量353

点赞数 7

分类专栏：前端自学笔记文章标签： css 前端

本文链接：https://blog.csdn.net/Johaden/article/details/139267385

版权

前端自学笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.盒子模型是CSS中常用于布局的基本概念，是构建网页布局的基础，它描述了文档中的每个元素都可以看作一个盒子。其中包含了内容，内边距，边框和外边距。

2.相关属性（均为复合属性）：

①内容（content）：盒子包含的实际内容，比如图片文本等。

②内边框（padding）：围绕在盒子的内部，是内容与边框之间的空间。可以使用padding属性来设置。

③边框（border）：围绕在内边距外部，是盒子的边界。

④外边距（margin）：围绕在边框的外部，是盒子与其他元素的空间。

例子如下，其中，border为复合属性，即可以在其中设置边线宽度，边界样式（solid实线、dashed虚线、dotted点线、double双实线）和颜色。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>CSS盒子模型</title>

    <style>
        .demo{
            background-color:aqua;
            display:inline-block;
            border:5px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div class="demo">哈尔滨</div>

</body>
</html>

2.下面代码中如border-width依旧是复合属性，我们可以通过这一个标签来修改四条边的边框属性。如，传入一个10px，则表示上下左右四个边框都是10px；若传入10px 0，则表示上下为10px，左右为0（无边框）；若传入10px 0 20px，则代表上为10，下为20，左右无边框；若输入四个宽度，则按照上右下左的顺时针旋转顺序。若只给三个值，则没有左边，那就会找对应右边的值。只有两个值的话，没有下左，那么下对应上的值，左对应右的值，以此类推。

其他属性如border-style的方式类似，也为复合属性。

<!DOCTYPE html>

<html>
<head>
    <title>CSS盒子模型</title>
        .border-demo{
            background-color:cornflowerblue;
            width:300px;
            height:200px;
            border-style:solid;
            border-width:10px 20px 30px 40px;
            border-color:deeppink;
        }
    </style>
</head>
<body>
    <div class="border-demo">这是一个边框示例</div>
</body>
</html>

3.若相对单一的某一边的边框如左侧进行编辑，我们可以使用border-left。它也是复合属性，但是只会对左边框写样式。如在style中，

        .border-demo{
            background-color:cornflowerblue;
            width:300px;
            height:200px;
            border-left:10px;solid;red;
        }

4.内边距（padding）、外边距（margin）的使用方法与边框类似，padding为文本距离边框的距离，margin为整体距浏览器边框的距离，如

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS盒子模型</title>

    <style>
        .demo{
            background-color:aqua;
            display:inline-block;
            border:5px solid yellowgreen;
            padding:50px;
            margin:40px;
        }

    </style>
</head>
<body>
    <div class="demo">哈尔滨</div>
</body>
</html>

Johaden

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

若传入10px 0，则表示上下为10px，左右为0（无边框）；若传入10px 0 20px，则代表上为10，下为20，左右无边框；只有两个值的话，没有下左，那么下对应上的值，左对应右的值，以此类推。4.内边距（padding）、外边距（margin）的使用方法与边框类似，padding为文本距离边框的距离，margin为整体距浏览器边框的距离，如。1.盒子模型是CSS中常用于布局的基本概念，是构建网页布局的基础，它描述了文档中的每个元素都可以看作一个盒子。：围绕在边框的外部，是盒子与其他元素的空间。
复制链接

扫一扫