9.盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

例子：

 padding:内边距，改变padding值观察变化：

 border:边框，改变border的值观察变化：

 margin:外边距，改变margin的值观察变化：

 1.padding内边距

 

• padding:属性1，属性2，属性3，属性4（上->右->下->左）
• padding:属性1，属性2，属性3（上->左右->下）
• padding:属性1，属性2（上下->左右)
• padding:属性1

2.border边框

border:2px solid red;

• 边框的粗细：border-width,可以使用指定长度，比如2px或0.1em,或者使用thick、medium(默认值)、thin
• 边框的样式：border-style

• • border-style: 属性1，属性2，属性3，属性4（上->右->下->左）
  • boder-style：属性1，属性2，属性3（上->左右->下）
  • border-style：属性1，属性2（上下->左右）
  • border-style：属性1（上下左右属性相同）
• 边框的颜色:可以直接指定颜色名称（green）、指定RGB值（rgb(255,0,0))、16进制值（#ff0000）

3.margin外边距

• margin:属性1，属性2，属性3，属性4（上->右->下->左）
• margin:属性1，属性2，属性3（上->左右->下）
• margin:属性1，属性2（上下->左右)
• margin:属性1

特别：

1.body总有一个默认的外边距margin:8px

2.外边距的妙用：居中元素

     margin: 0 auto

有使用要求：外层元素为块元素，且块元素有固定的宽度

4.圆角边框

• border-radius:属性1，属性2，属性3，属性4（左上，右上，右下，左下）
• border-radius:属性1，属性2，属性3（左上，右上和左下，右下）
• border-radius:属性1，属性2（主对角线，副对角线）
• border-radius:属性

例：

border-radius: 2px 20px 10px 5px;

border-radius: 10px 20px 5px;

border-radius: 10px 25px;

border-radius: 25px;

 半圆：

   

    

5.阴影

box-shadow: h-shadow v-shadow blur spread color inset（水平阴影位置、垂直阴影位置、模糊距离、阴影的尺寸、阴影的颜色、将外部阴影改为内部阴影）