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顺序

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

什么是边框？

边框就是环绕在标签宽度和高度周围的线条。
2.边框属性的格式
2.1连写（同时设置四条边的边框）
border:边框的宽度 边框的样式 边框i的颜色；
快捷键：bd+ border:1px solid #000
（solid表示实线，dashed表示虚线）
注意点：
1.连写格式中颜色属性可以省略，省略之后默认黑色。
2.连写格式中样式属性不能省略，省略之后看不到边框。
3.连写格式中宽度可以省略，省略之后还是可以看到边框。
2.2连写（分别设置四条边的边框）
border-top:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
快捷键：
bt+br+bb+bl+
2.3连写（按照要素分别设置四条边的边框）。

border-width：上 右 下 左；

border-style：上 右 下 左；

border-color：上 右 下 左；

注意点：

1.这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常生活中的上下左右。

2.这三个属性的取值省略时的规律：

2.1上 右 下 左>上 右 下>左边的取值和右边的一样。

2.2上 右 下 左>上 右 >左边的取值和右边的一样，下边的取值和上边一样。

2.3上 右 下 左>上 >右下左边取值和上边一样。

3.非连写（方向+要素）

border-left-width：20px;

border-left-style：double;

border-left-color：pink

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突出边框

;