css盒子模型、背景简要描述

我们常说的盒子模型一般有四个属性

• Border 值为边框的宽度，相当于现实中盒子的包装。
• Padding 值为内边距，指盒子内容距离盒子边框的距离
• Content 值为盒子的主要内容
• Margin 值用于盒子与盒子之间，表示盒子与盒子之间的距离

1.外边距margin用法描述：

margin：
控制盒子的外边距 
复合属性：
    margin:1px 2px 3px 4px;
四个值分别控制：上 右 下 左;
    margin:1px 4px 2px;
三个值分别为：上 左右 下;
    margin:1px 4px;
两个值分别为：上下 左右;
    margin:0 auto;
这样设置为居中设置 :上下为0 左右自动；auto为自动的意思

2.padding控制内边距，复合属性使用方法与margin一样 ，但是会改变盒子的高宽（内边距设置会加在盒子的高、宽上面）

3.border边框描述：

border就是边框。边框有三个要素：像素(粗细)、线型、颜色

颜色默认是黑色。其余两个属性必须，否则显示不出来边框，复合属性如下：

border: 1px solid red;

上面一段代码概括了下面着四段代码：

border-top : 1px solid red;
border-right : 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red ;

注意：

  /* 盒子模型的顺序是 上右下左 */ 
  /* border和background 和font一样的 也是一个复合属性 */
  /* 上边框的粗细 */              
  /* 想让边框的粗细显示出来必须要规定边框的样式 */
  /* 边框的样式默认是黑色 */                   
   

边框样式	solid：实线边框
	dashed：虚线边框
	dotted：点状边框
	double：双线边框
	hidden：与none相同，应用于表解决边框冲突

注：盒子的高、宽计算应是height/width+padding+border

如果加上box-sizing:border-box;变成怪异盒模型 那么设置的高宽就不会改变

4.背景属性：

边框的复合属性
background：url() #333 no-repeat;/*no-repeat 表示背景只使用一次
                                  或者使用repeat-x控制x轴、
                                  repeat-y控制y轴的方向重复*/

1.background-color

background-color属性定义了元素的背景颜色
语法： background-color：颜色值
注意： 如果你没有设置背景的颜色，系统会默认给你一个透明背景。

2.background-image

background-image
语法：background-image:url（）;
url：使用绝对或相对地址指定背景图像

3.background-repeat

background-repeat属性可以对背景图像进行平铺。\
语法：background-repeat：repeat（纵向，横向平铺）|no-repeat（不平铺）|repeat-x（横向平铺）|repeat-y（纵向平铺）

4.background-position

定位背景图片的位置
用法：
background-position: left top;/*或者 10px 5px 控制x轴和y轴*/

注：第一个值控制x轴、第二个值控制y轴。