CSS笔记3-盒子模型/外边距内边距

盒子模型

作用意义：决定不同元素之间的位置关系（平面位置、空间位置）
空间位置的覆盖关系：
从下往上：背景色<背景图片<元素内容

边框border
基础设置：

p:first-of-type
	{
		border:solid 10px;  /*代表实线表框*/
		border-color:red;	/*代表上下左右:red*/
	}
	p:nth-of-type(2)
	{
		border:solid 10px;  /*代表实线表框*/
		border-color:red blue;	/*代表上下:red 左右blue*/
	}	
	p:nth-of-type(3)
	{
		border:solid 10px;  /*代表实线表框*/
		border-color:red blue green;	/*代表上:red 下:green 左右blue*/
	}
	p:nth-of-type(4)
	{
		border:solid 10px;  /*代表实线表框*/
		border-color:red blue green yellow;	/*代表上:red 下:green 左:yellow 右blue 顺时针*/
	}
	/*也可以直接设定单方向边框颜色 
	border-top-color:blue;
	boder-bottom-color:yellow;
	border-left-color:green;
	border-right-color:red;
	*/

对边框border的粗细设置：

	p:first-of-type
	{
		border:solid;
		/*border-width:thin; 细边框 
		 border-width:thick; 粗边框
		 border-width:medium;适中边框
		 border-width:10px; 自定义边框
		 border-top-width:10px; 对上边框进行单独设置 
		*/
		 /*四条边框单独设置*/
		border-width:thick thin medium 20px;
	}

边框样式

	p:first-of-type
	{
		/*点框border:dotted;
		  虚线框：border:dashed;
		 双线框：border:double;
		border-top-style:solid; 只加上边框
		*/
		border-style:solid dotted dashed double;
		border-width:10px;
	}

缩写

p:nth-of-type(2)
	{
		border-top:red dotted thick
	}	

外边距margin

p:nth-of-type(2)
	{
		background-color:yellow;
		/*margin-top:1px;
		margin-bottom:100px;*/
		margin:100px 0 10px 50px
	}	
	p:nth-of-type(3)
	{
		margin-top:100px;
		margin-bottom:-90px;  /*外边距也可以是负值*/
	}

内边距padding
内容和边框的距离为内边距

		padding:100px;