我理解的盒模型

最新推荐文章于 2024-06-14 10:49:14 发布

置顶 .卡文迪许

最新推荐文章于 2024-06-14 10:49:14 发布

阅读量286

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_42207972/article/details/104436865

版权

1、什么是盒模型？

我理解的盒模型：就拿我们现实生活中的盒子为例，现实生活中一个盒子的内部为空的好用来存放东西，而里面存放东西叫content(内容)，为盒子的壁纸叫做边框border。如果盒子内部的东西比如是一个鸡蛋，但是鸡蛋怕震碎，所以我们需要在硬盘的四周盒子的内部均匀填充一些泡沫。这时盒子和鸡蛋有了一定的距离，这部分距离就叫内边距(padding),我们这时如果要把鸡蛋送给别人，肯定会拿一个礼物盒装起来，这时里面有很多个鸡蛋，那么装鸡蛋的盒子与盒子之间就叫外边距margin。
在这里插入图片描述

2、盒模型的组成

一个盒模型是由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成的。但是和现实生活中的盒子我们会忽
略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS 中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的
在这里插入图片描述
为了便于大家理解，做了一个小demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 350px;
            height: 250px;
            background: pink;
            
            /* 外边距 */
            margin: 100px;

            /* 内边距 */
            padding: 50px;

            /* 边框的宽度 */
            border: 20px solid red;
        }

        /* 显示内容的区域 */
        .con {
            width: 100%;
            height: 100%;
            background: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

运行图如下：
在这里插入图片描述

3、盒模型的属性

一、 content：盒子的内容区域，里面放着网页显示的文字，图片

二、padding：
1、就是内边距的意思，是长在盒子里面的
2、主要控制子元素在盒子内部的位置关系
3、它是添加在父元素上面的
4、padding可以把盒子撑大，需要在宽高的基础上减掉padding，但是如果一个盒子没有固定的大小，添加padding不用减。
5、padding不能为负值
6、padding不会对背景图的位置造成影响

三、border：边框的意思，描述盒子的边框

四. margin：
1、外边距的意思。表示边框到最近盒子的距离。
2、是长在盒子外围的，控制当前元素与其他同级元素的位置关系。
3、margin不会改变盒子内部大小。
4、margin可以设置负值

4、padding的用法：

1、给单一的方向设置padding值：
padding-left
padding-right
padding-top
padding-bottom

2、padding简写设置：
padding 一个值四周都padding
padding 两个值上下左右
padding 三个值上左右下
padding 四个值上右下左

5、border的用法

边框有三个要素：粗细线性样式颜色
1、单独设置一个方向的边框：
border-left
border-right
border-top
border-bottom

2、
borer 1个值四周都添加边框
borer 2个值上下左右
borer 3个值上左右下
borer 4个值上右下左

6、margin的用法：

1、给单一方向设置margin值
示例：
margin-top：
margin-right：
margin-bottom：
margin-left：

2、属性值四种方式：
四个值：上右下左
三个值：上左右下
二个值：上下左右
一个值：四个方向

margin常出现的bug1：
同级元素上下之间的margin值不会叠加，会重合，按照最大值设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 正常margin间距100px */
        .box1 {
            background-color: orange;
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }

        .wrap1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

        /* bug margin间距只有50px */
        .box {
            background-color: orange;
            width: 100px;
            height: 100px;
            margin-bottom: 50px;
        }

        .wrap {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <div class="wrap1"></div>
    <div class="box">
    </div>
    <div class="wrap"></div>
</body>

</html>

运行效果图：
在这里插入图片描述
margin常出现的bug2：
当父元素和第一个子元素都没有浮动。给第一个子元素添加margin-top：margin-top值会错误的添加在父元素上面
示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background: red;
        }

        h3 {
            background: rebeccapurple;
            width: 250px;
            height: 50px;
            margin-top: 50px;
        }

        h2 {
            width: 100px;
            height: 100px;
            background: greenyellow;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>有超多的字</h3>
        <h2></h2>
    </div>
</body>

</html>

运行效果图：