8 盒子模型
盒子模型
首先，我们来看一张图，来体会下什么是盒子模型。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子边框（border）
语法：
border : border-width || border-style || border-color
边框属性—设置边框样式（border-style）
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
盒子边框写法总结
上边框
border-top-style:样式;
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度 样式 颜色;
下边框
border-bottom-style:样式;
border- bottom-width:宽度;
border- bottom-color:颜色;
border-bottom:宽度 样式 颜色;
左边框
border-left-style:样式;
border-left-width:宽度;
border-left-color:颜色;
border-left:宽度 样式 颜色;
右边框
border-right-style:样式;
border-right-width:宽度;
border-right-color:颜色;
border-right:宽度 样式 颜色;
样式综合设置
border-style:上边 [右边 下边 左边];
（none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线）
border-width:上边 [右边 下边 左边]; 像素值
border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
border:四边宽度 四边样式 四边颜色;
例子
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
写综合属性，用空格隔开
/*
上 右 下 左
*/
padding: 20px 30px 40px 50px ;
/*
上 左右 下
*/
padding: 20px 30px 40px;
/*
上下 左右
*/
padding: 20px 30px;
/*
上下左右
*/
padding: 20px;
一些标签默认有padding
我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But，这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;
