div的使用

div：盒子模型（块级元素）

border：边框

  总写：

  border-color：边框颜色

  例：（顺时针顺序+对称原则）

  border-color：red blue yellow pink;

  分写：

        border-top-color: 上边框颜色

        border-right-color: 右边框颜色

        border-bottom-color:下边框颜色

        border-left-color:左边框颜色



  border-width：边框粗细

  例：

  border-width：10px 20px 15px 5px;

  分写：

  border-top-width: 上边框粗细

        border-right-width: 右边框粗细

        border-bottom-width:下边框粗细

        border-left-width:左边框粗细

  
  border-style：边框风格：double双实线，dashed虚线，dotted虚线（圆点），solid实线，隐藏hidden，无none

  例：

  border-top-style: 上边框风格

        border-right-style: 右边框风格

        border-bottom-style:下边框风格

        border-left-style:左边框风格

  边框总写：

  例：border:粗细 线段风格 颜色*/

         border: 3px double red;

外边距：margin

  margin-top: 上外边距

        margin-right: 右外边距

        margin-bottom: 下外边距

        margin-left:左外边距

  总写：采用上右下左的（顺时针）顺序，加对称原则

  例:上外边距 右外边距 下外边距 左外边距

  margin:10px 20px 15px 25px;

内边距：padding

  padding-top:上内边距  
        padding-right:右边距

        padding-bottom: 下内边距

        padding-left: 左内边距

  总写：采用上右下左的（顺时针）顺序，加对称原则

  例：上内边距 右内边距 下内边距 左内边距

  padding：10px 20px 15px 25px;

盒子模型尺寸计算方式：

  外边距*2+内边距*2+边框*2+内容=盒子模型尺寸


box-sizing：

  border-box：指的是定义的尺寸包含边框+内边距+内容

  center-box：指的是定义的尺寸包含内容


圆角边框：border-radius

  例：border-radius:左上-右上-右下-左下

  border-radius：5px 10px 15px 20px;

圆：使用圆角边框画要求：

  1.元素的宽高必须相同

  2.圆角的半径为元素的一半或者直接设置圆角半径为50%

半圆：

  要求：

  制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

  制作左半圆或右半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

扇形：

  要求：

  遵循“三同，一不同”原则，“三同”是元素宽度、高度、圆角半径相同，

  “一不同”是圆角取值位置不同。

盒子模型阴影：box-shadow

  例：box-shadow：阴影类型（默认阴影）x轴偏移量 y轴偏移量 模糊半径