盒模型

一、盒模型的概念和组成：
盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系；
页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（补白,填充,padding）、边框（border）和外边界（margin）组成；

1.margin(外边距） 清除边框外的区域，外边距是透明的

2.border（边框）围绕在内边距和内容外的边框。

3.padding（内边距）清除内容周围的区域，内边距是透明的。

4.concent（内容）盒子的内容，显示文本和图像。

 

二、边框设置：

1.边框样式
border-style:solid/dashed/dotted/double
solid:实线，dashed:虚线，
dotted:点状线，double:双线，
none ：无边框， hidden：隐藏

2.边框粗细
border-width：取值；

3.边框颜色
border-color:取值；

4.边框样式

border-style：

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值
 

margin使用方法：

margin:0 auto;  在浏览器中横向居中

margin-left: 50px;
margin-top: 50px;
margin: 50px 0 0 50px;
上，右，下，左
margin: 10px 20px 30px;
上，左右，下
margin: 10px 20px;
上下，左右
margin: 10px;
上下左右四个方向