css盒子模型（Box Model）-优快云博客

所有的HTML元素可以看作盒子，在css中，“box model”这一术语是用来设计和布局时使用的。

css盒子模型的本质是一个盒子，封装周围的HTML元素。它包括：content（内容），padding（内边距），border（边框）和 margin（外边距）。每个盒子有自己的大小和位置外，还影响着其他盒子的大小和位置。

内容（content）

属性为宽width、高height，还可以设置背景颜色background

边框（border）

border属性来定义盒子的边框，该属性包含3个子属性：border-style（边框样式）、border-color（边框颜色）、border-width（边框宽度）。

border：3px solid red;

内边距（padding）

padding:20px

padding:10px 20px 30px 40px;
padding:10px 20px;

padding：上右下左

padding：上下左右

外边距（margin）

  margin: 50px;

 margin:20px 30px 40px 50px;
 margin: 30px 40px;

margin：上右下左

margin：上下左右

两种盒子模型类型（重要）

1.box-sizing：content-box（默认）

此时，元素的width=content的宽度 自己会膨胀

2.box-sizing：border-box

此时，元素的width=content的宽度+padding+border 自己不会膨胀

（注意：这一切跟margin没有关系）

box-sizing：border-box；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            padding:10px 20px 30px 40px;
            /* padding:10px 20px; */
            /* margin:20px 30px 40px 50px; */
            margin: 30px 40px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
   <div class="box">盒子模型</div> 
</body>
</html>

盒子分为块级和行内

可用display属性设置