css盒子模型

### 一，盒子模型

> 1，所有的html标签都是盒子

特点：

1. content 内容
2. margin 外边距
3. padding 内边距
4. border 边框

#### 1, content

```PowerShell
div,p,img,video,,,,标签 
```

#### 2，border

```CSS
1,设置border的宽
border-width:单位
2，设置边框的样式
border-style:solid;实线
3，设置边框的颜色color
border-color：颜色
简写
border：宽度 颜色 样式；【没有顺序】
```

```CSS
1，上边框
border-top: ;
2，下边框
border-bottom: ;
3，左边框
border-left: ;
4，右边框
border-right: ;
```

去除边框：

```CSS
0或none
border:0;
border:none;

```

#### 3，margin 外边框

> 盒子与盒子之间的距离

```CSS
1，上下左右四个方向的距离都是50px
margin:50px;
2，50px 上下  ；   20px 左右
margin:50px 20px;
3，50px 上 ； 20px 左右  ；100px 下
margin:50px 20px 100px;
4，50px 上  ； 40px右  ；30px 下  20px 左
margin:50px 40px 30px 20px;
```

单独设置边框距离

```CSS
margin-top:;
margin-left:;
margin-right:;

```

盒子与盒子之间的间距的计算

> 获取的是两个盒子之间的最大值

```HTML
 <div class="box">
        <div class="a">1111</div>
        <div class="b">2222</div>
    </div>

    <style>
        .a {
            margin-bottom: 50px;
        }

        .b {
            margin-top: 40px;
        }
    </style>
    盒子a与b之间的上下间距是50px
```

上边距高度丢失

```HTML
 <div class="box">
        <div class="a">1111</div>
        <div class="b">2222</div>
    </div>

    <style>
        .box {
            border: 1px solid red;
        }

        .a {
            margin-bottom: 50px;
            margin-top: 200px;
        }

        .b {
            margin-top: 40px;
        }
    </style>
    
    父盒子box没有设置样式boder时，box会跟随子元素向下移动；
```

#### 4，padding 内边距

> 边框与内容之间的距离

```CSS
1，上下左右四个方向的距离都是50px
padding :50px;
2，50px 上下  ；   20px 左右
padding :50px 20px;
3，50px 上 ； 20px 左右  ；100px 下
padding :50px 20px 100px;
4，50px 上  ； 40px右  ；30px 下  20px 左
padding :50px 40px 30px 20px;
```

```CSS
padding-top:;
padding-left:;
padding-right:;
padding-bottom:;
```

设置内边距时，盒子大小变大，需要设置盒子的实际大小

> 通配符只在html页面使用

```CSS
* {
    box-sizing: border-box;
 }
 div,p,b,ul,ol,li,img,video,form,input{
   box-sizing:border-box;
 }
```