css盒子模型

1.什么是盒子模型?
网页上的每一个标签都是一个盒子，每个盒子都有四个属性

• 内容（content)：盒子里装的东西，网页中通常是指文字和图片
• 填充（padding，内边距）：比如说是我们买酒，怕洒在物流过程中损坏，而添加的泡沫或者其它抗震的辅料
• 边框（border）：盒子本身
• 边界（margin，外边距）：盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也是为了方便取出

2.边框（border）

p{border:5px solid red;}

border属性可以按顺序设置如下所有属性：

• border-width
• border-style
• border-color
  设置边框圆角

border-radius:20px 10px 50px 30px;

四个圆角分别为 左上角、右上角、右下角、左下角
3.外边距（margin）

属性	描述
margin	在一个声明中设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距

外边距的用法
网页居中对齐：margin:0px auto;
4.内边距（padding）

属性	描述
padding	在一个声明中设置所有内边距属性
padding-bottom	设置元素的下内边距
padding-left	设置元素的左内边距
padding-right	设置元素的右内边距
padding-top	设置元素的上内边距

5.盒子模型尺寸

6.盒子阴影
语法:

box-shadow:inset x-offset y-offset blur-radius color;

其中inset指阴影类型；x-offset是x轴位移，指定阴影水平位移量；y-offset是y轴位移，用来指定阴影垂直位移量；blur-radius是阴影模糊半径：阴影向外模糊的模糊范围；color指阴影颜色