0416 盒子模型

css盒子模型样式：

定义：

margin：外边距，围绕在元素边框的空白区，在元素外创建额外的空白。

border：边框，围绕元素内容和内边距的一条或多条线。

padding：内边距，在边框和内容区之间。

属性：

margin（外边距也叫作空白）：

接受任何长度单位，百分数值和负值，还可设置为auto。

margin

margin-top

margin-right

margin-bottom

margin-left

top-right-bottom-left顺序

margin：0 auto/*布局居中显示*/

border（边框）：

边框有3个方面： 宽度width  样式style   颜色color（可以不按顺序）

如：border-top-color

属性同margin，top-right-bottom-left顺序

如果想要边框出现，就必须声明样式

padding（内边距也叫作填充）：

接受长度值，百分数值但不接受负值。

属性同margin，top-right-bottom-left顺序

变态盒模型 ： 

box-sizing：border-box;

（以特定的方式定义匹配某个区域的特定元素）

盒子弧度：

border-radius：10px;

盒子阴影：

box-shadow：10px 10px ; 

x方向偏移（必需） y方向偏移（必需）

其他属性可选：

blur模糊距离

spread 阴影尺寸

color阴影颜色

inset将外部阴影改为内部阴影

补充：

边框样式border-style

none：默认无边框

dotted：点线框

dashed：虚线框

solid：实线框

double：两个边界

groove：定义3D沟槽边界

ridge：定义3D脊边界

lnset：定义3D嵌入边框

outset：定义3D突出边框