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;
 }
```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wzh小吴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值