博客

# 04.边距与阴影

[toc]{type: "ol", level: [3]}

### css结构
```css
.wh {
    width: 300px;
    height: 200px;
    background: #8fd19e;
}
span {
    background: #1c7430;
    display: inline-block;
}
```


### 边距设定
- 可具体指定某个边
> pt-1
> pt上 pb下 pl左 pr右 px左右 py上下
- 可设置响应式边距
> pt-md-1
> sm md lg xl
```html
<div class="wh float-left p-1 m-1">
    hello world
</div>
<div class="wh float-left p-3 m-3">
    hello world
</div>
<div class="wh float-left p-5 m-5">
    hello world
</div>
```


### 宽高占比
- h-**(25|50|75|100)**{style="color:grey"}
> 指定高度占父标签的比例
- w-**(25|50|75|100)**{style="color:grey"}
> 指定宽度占父标签的比例
```html
<div class="wh float-left w-50">
    宽度占浏览器的50%
    <span class="h-25">高度占div的25%</span>
    <span class="h-75">高度占div的75%</span>
</div>
```


### 阴影效果
- shadow
> **none**{style="color:brown"} &nbsp; **sm**{style="color:goldenrod"} &nbsp; **lg**{style="color:green"}
```html
<div class="wh m-2 float-left shadow-sm">
    阴影效果-小
</div>
<div class="wh m-2 float-left shadow">
    阴影效果
</div>
<div class="wh m-2 float-left shadow-lg">
    阴影效果-大
</div>
```