盒模型的理解

css盒模型

1.盒模型

　　css盒模型本质上是一个盒子，他包括：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

　　如下图所示：

2.盒模型具体css属性

margin(外边距):让两个同级盒子（也可以和父级元素使用）之间产生间距。
border：围绕在内边距和内容外的边框。
padding（内边距）：让内容与盒子的周围产生间距。

3.元素的具体大小

　　当你指定一个元素的宽和高时，你只是设置了内容的宽高，而盒子的具体大小还要加上外边距、边框、内边距。

　　例如：　

div{
    width:500px;
    height:300px;
    background:#ccc;
    border:1px solid pink;
    margin:25px;
    padding:25px
}

宽度：

　　　　500px(内容)+1px(边框左)+25px（内边距左）+25px(外边距左)+1px(边框右)+25px（内边距右）+25px(外边距右)=602px。

高度：

　　　　300px(内容)+1px(边框左)+25px（内边距左）+25px(外边距左)+1px(边框右)+25px（内边距右）+25px(外边距右)=402px。

4.padding的用法

　　a.padding是盒子与内容之间距离，是在盒子里面的，主要作用是控制内容在盒子内部的位置。

　　b.padding添加在父元素上面。
　　c.padding能把盒子撑大{
　　如果想让盒子保持原有大小，需要在原宽高的基础上减掉padding。
　　如果一个盒子没有固定大小，盒子是被内容撑开的，那就不用减padding。
　　d.padding的设置方法{
　　　　单一方向：
　　　　　　padding-left：
　　　　　　padding-top:
　　　　　　padding-right:
　　　　　　padding-bottom:
　　　　简写：
　　　　　　padding:一个值四周都padding
　　　　　　padding:两个值上下左右
　　　　　　padding:三个值上左右下
　　　　　　padding:四个值上右下左
　　}
　　e.注意：padding不能取负值，而且padding不会对背景图的位置产生影响

5.margin的用法

　　a.margin是控制当前元素与其他同级元素的位置关系（有时padding和margin能实现相同效果），不会改变盒子的大小。
　　b.margin是长在盒子外面的。
　　c.margin的设置方法{
　　　　单一方向：
　　　　　　margin-right:
　　　　　　margin-left:
　　　　　　margin-top:
　　　　　　margin-bottom:
　　　　简写：
　　　　　　margin:一个值四周
　　　　　　margin:两个值上下左右
　　　　　　margin:三个值上左右下
　　　　　　margin:四个值上右下左
　　　　}
　　d.注意：margin可以设置负值。

6.margin常出现的BUG

　　a.同级元素上下之间的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: 0;
            padding: 0;
        }
        .box1{
            width:500px;
            height:300px;
            background:#ccc;
            margin:25px;
        }
        .box2{
            width: 400px;
            height: 300px;
            background: pink;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">我是第一个</div>
    <div class="box2">我是第二个</div>
</body>
</html>

运行结果如下:

　　我们可以看到，第一个盒子的margin值为25px，第二个盒子的margin值为50px，但是两个盒子的距离并不是75px，而是50px。

　　b.当父元素和第一个子元素都没有浮动，给第一个子元素添加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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 700px;
            height: 500px;
            background: pink;
        }
        .box1{
            width:500px;
            height:300px;
            background:#ccc;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">我是第一个</div>
    </div>
</body>
</html>

　　运行结果如下：

　　可以看到，当父元素与子元素都没有浮动，给子元素添加margin-top，父元素的盒子下来了。

posted @ 2020-03-27 11:08 我们不是主角阅读(129) 评论(0) 收藏举报

刷新页面返回顶部