盒子模型

盒子模型，一个奇怪的名字，听了老师的讲解渐渐明白了其中的意义。它是设置页面的一个大模型，页面的层次布局，是设计页面的必须掌握的。它使得页面有了清晰的布局，条理性非常清晰。

盒子模型的使用：

1.边框

边框的颜色border-color：

border-top-color : red；上边框颜色，同理将top改成right、left、bottom就能设置右、左、底边框颜色。如果想一次分别设置颜色border-color:#369 #000 #f00 #00f;可以实现

边框厚度border-width：

border-top-width:5px；上边框的厚度为5px，同理改变top就能改变这是的方位
它同样也有方便的border-width:1px 3px 5px 2px;一次性实线不同的粗细。

边框样式border-style：

border-top-style:solid; 上实线、也可以改变top，dotted（点虚线），dashed（虚线）。缩写：border:1px solid #3a6587;或border: 1px dashed red;

2.外边距margin：

margin-top: 1 px；顶部，分别设margin :3px 5px 7px 4px;

妙用：margin:0px auto；网页居中对齐

3.外边距padding：

padding-left:10px; 左用法与上述一样，padding:20px 5px 8px 10px ;

4.盒子总尺寸：

border+padding+margin+内容大小

5.box-sizing:

box-sizing：content-box （盒子总尺寸） | border-box（盒子的宽度或高度等于元素内容的宽度或高度） | inherit（元素继承父元素的盒子模型模式）;

6.圆角边框：

border-radius: 20px 10px 50px 30px;顺时针

圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

7.盒子阴影 box-shadow：

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

box-shadow:类型 x偏移 y偏移 模糊程度 颜色;

盒子类型很形象的解释了网页的页面布局，是网页的框架，层次分明。