盒子模型

盒子模型

1. 什么是盒子模型

margin：外边距、padding：内边距、border：边框

2. 边框

边框的粗细、样式、颜色

border：粗细、样式、颜色
border: 1px solid red;

外边距

外边距的妙用：可以使元素居中
顺序：上右下左（4个）、上下，左右（2个）

margin: 0 auto;

内边距

外边距的妙用：可以使元素居中
顺序：上右下左（4个）、上下，左右（2个）

padding: 10px 20px;

圆角边框

border-radius 顺序如下。也可以是一个、两个参数。
img标签使用时，可用作圆形头像的制作

<!-- 左上、右上、右下、左下 顺时针方向-->
<!-- 圆圈： 圆角等于宽度-->
<style>
    div{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      border-radius: 50px;
    }
</style>

<div></div>

阴影

box-shadow:

<!-- 左上、右上、右下、左下 顺时针方向-->
<!-- 圆圈： 圆角等于宽度-->
<style>
    div{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      box-shadow:10px 10px 100px yellow
    }
</style>

<div></div>