一：什么是盒模型

每一个标签都是一个矩形，像一个盒子，HTML页面的布局可以理解为多个盒子组合嵌套排列而成。

二：组成

  • width  宽度
  • height 高度 
  • padding 内边距
  • border 边框
  • margin 外边距

1.padding内边距有1-4个值，顺时针赋值，从上开始。

padding: 10px；   /*代表盒子里的内容距上下左右10px*/
padding: 10px  20px；  /*代表盒子里的内容距上下为10px 左右20px*/
padding: 10px  20px  30px；  /*代表盒子里的内容距上为10px 左右20px 下为30px*/
padding：10px 20px 30px 40px；/*代表盒子里的内容距上为10px 右20px 下为30px 左为40px*/

padding值会增大盒模型的面积

2.margin也有四个值，和padding一样，也是顺时针赋值，从上开始

注意：

         1.margin会出现叠压现象。叠压现象：常态下，兄弟标签之间的距离以大值为准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin-bottom: 100px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

 我们可以看到效果图出来后两个盒子之间的距离为200px。所以兄弟标签之间的距离以大值为准。

      2.margin还会出现塌陷问题。

     垂直方向，不是水平方向，也就是说margin-top和margin-bottom才存在这样的问题。

    块级元素，不是行内元素，也不是行内块级元素。

<style>
    #father{
        width: 200px;
        height: 200px;
        background: red;
    }
    #child{
        width: 100px;
        height: 100px;
        background: green;
    }
</style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>

当我们给child加一个外边距时

#child{
    margin-top: 20px;
}

 我们会认为效果是这样的

 但实际效果是这样的

（注意这张图片和第一张效果图不一样，第一张效果图与上面的距离还小）

这样的效果是外边距塌陷的结果。

为此我们有三个解决方案（没有学浮动的情况下）：

  1. 在父级使用border
  2. 不使用margin-top，在父级使用padding-top
  3. 在父级使用overflow：hidden

 

三：border边框

border有三个复合属性:

  • border-width
  • border-style 
  • border-color

border会增大盒模型的面积。

以上就是盒模型相关的基本知识，接下来利用这些知识做一个简单的奥运五环

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五环</title>
    <style>
        div {
            width: 80px;
            height: 80px;
            border: 10px solid black;
            border-radius: 50%;
        }
        .d2 {
            margin-left: 100px;
            margin-top: -100px;
            border-color: tomato;
        }
        .d3 {
            margin-left: 200px;
            margin-top: -100px;
            border-color: deepskyblue;
        }
        .d4 {
            margin-left: 50px;
            margin-top: -50px;
            border-color: greenyellow;
        }
        .d5 {
            margin-left: 150px;
            margin-top: -100px;
            border-color: gold;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
</body>
</html>

效果图

 

# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟