HTML——盒模型

盒模型

童童童ing

14872人浏览 · 2022-04-12 21:34:04

童童童ing · 2022-04-12 21:34:04 发布

前端新手——盒模型

一、盒模型的概念
二、盒模型的组成
三、总结

一、盒模型的概念

每一个标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子组合嵌套排列而成。在这里插入图片描述
由图片可以看到，当我们选择一个元素查看时，这个元素会被看成一个盒子，有宽度（width），高度（height），内边距（padding）,外边距（margin）。而一个盒子的边框，内边距，内容区决定大小，而外边距决定盒子的位置。

二、盒模型的组成

1.内容区

盒子的内容区由width和height决定大小的，我们写的内容只能放在内容区。

<!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>边框</title>
    <style>
        div{
           width: 100px;
           height: 100px;
        }

    </style>
</head>
<body>
    <div>aaa</div>
</body>
</html>

由下图元素查看及运行结果可以看到，我们的内容显示在内容区，且内容区宽度和高度均为设置的100px
在这里插入图片描述

2.内边距padding

接下来我们给盒子设置它的内边距，直接修改上面这一段代码的内部样式表，可以看出盒子由之前的100100变成了120120，因为给padding设置了四个方向的padding，均为10px，所以宽高各增加20px。

 <style>
        div{
           width: 100px;
           height: 100px;
           padding:10px;
        }

    </style>

在这里插入图片描述
注意
1. 可以设置1-4个值，四个值时方向顺序为：上右下左；三个值时：上（左右）下
两个值时：（上下）（左右）一个值时:四个方向同时设置
2.顺时针赋值，从上内边距开始
3.增加盒模型面积
4.padding有四个方向也可单独设置，格式为padding-方向，如padding-top为上边框

3.边框border

我们可以把边框看成一个盒子的最外边的包装，它的属性包括width宽度，style类型，color颜色，这是一个符合属性。我们再次修改上面代码的内部样式表，给盒子加一个边框。

  <style>
        div{
           width: 100px;
           height: 100px;
           padding:10px;
           border: 1px solid red;
        }

    </style>

由运行结果可看出，此时盒子变成了122*122，因为上下左右均增加了1px的边框，增加了盒子面积。
在这里插入图片描述
注意

border为复合属性，我们可以把其中一个样式单独设置，如border-width：1px；border-color:red;
border-style:solid;
border-style可选值有solid 实线；dotted 点线；dashed 虚线；
border有四个方向也可单独设置，格式为border-方向，如border-top为上边框
还可以为单个方向设置单个属性，格式border-方向-属性，如border-top-width:1px;为上边框设置1px的宽度

4.外边距margin

外边距不会改变盒子大小，但会影响元素位置。

 <style>
        div{
           width: 100px;
           height: 100px;
        margin: 10px;
        }

    </style>

此时撤去padding和border，只设置margin

在这里插入图片描述
注意

可以设置1-4个值，四个值时方向顺序为：上右下左；三个值时：上（左右）下两个值时：（上下）（左右）一个值时:四个方向同时设置
顺时针赋值，从上内边距开始
不增加盒模型面积
margin有四个方向也可单独设置，格式为margin-方向，如margin-top为上边框
叠压现象：常态下，兄弟标签之间的上下间距以大值为准
塌陷问题：
原因：常态下，父级的第一个子级标签是块标签，并且使用了margin或 margin-top
解决方案：1.在父级使用border
2.不使用margin-top，在父级使用padding-top
3.在父级使用overflow：hidden