8 盒子模型

盒子模型

首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

盒子边框写法总结

上边框

border-top-style:样式;

border-top-宽度;

border-top-color:颜色;

border-top:宽度 样式 颜色;

下边框

border-bottom-style:样式;

border- bottom-宽度;

border- bottom-color:颜色;

border-bottom:宽度 样式 颜色;

左边框

border-left-style:样式;

border-left-宽度;

border-left-color:颜色;

border-left:宽度 样式 颜色;

右边框

border-right-style:样式;

border-right-宽度;

border-right-color:颜色;

border-right:宽度 样式 颜色;

样式综合设置

border-style:上边 [右边 下边 左边];

（none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线）

border-上边 [右边 下边 左边]; 像素值

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）

https://meyerweb.com/eric/tools/css/reset/

外边距（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;