css中的边框和背景属性边框属性border边框border-width：1、一个值：四个方向；2、两个值：上下左右3、

边框属性

border边框

border-width：
1、一个值：四个方向；
2、两个值：上下 $~~~~$ 左右
3、三个值：上 $~~~~$ 左右 $~~~~$ 下
4、四个值：上 $~~~~$ 右 $~~~~$ 下 $~~~~$ 左
border-color、border-style也一样的设置

简写：

border：1px solid #fff;
属性值依次为：宽度，样式，颜色，顺序不能乱

给边框添加弧度

border-radius：150px;/50%;

边距

padding内边距

1、用来控制内容和盒子的位置关系；
2、边框内的距离都是内边距；
3、设置padding会让盒子变形，如果想要盒子的大小不变，加上了多少padding，盒子的大小就要减去多少；

4、
$~~~~$ $~~~~$ 单一方向：
$~~~~$ $~~~~$ $~~~~$ padding-left/padding-right/padding-top/padding-bottom:数值；
$~~~~$ $~~~~$ 多个方向：
$~~~~$ $~~~~$ $~~~~$ padding：
$~~~~$ $~~~~$ $~~~~$ 1、一个值：四个方向；
$~~~~$ $~~~~$ $~~~~$ 2、两个值：上下 $~~~~$ 左右
$~~~~$ $~~~~$ $~~~~$ 3、三个值：上 $~~~~$ 左右 $~~~~$ 下
$~~~~$ $~~~~$ $~~~~$ 4、四个值：上 $~~~~$ 右 $~~~~$ 下 $~~~~$ 左
内边距不能设置成负数

margin外边距

1、用来控制盒子和盒子之间的边距；
2、border外边的距离都可以设置外边距；
3、

$~~~~$ 单一方向
$~~~~$ $~~~~$ margin-left/margin-right/margin-top/margin-bottom
$~~~~$ 多个方向
$~~~~$ $~~~~$ 1个值：四个方向
$~~~~$ $~~~~$ 2个值：上下左右
$~~~~$ $~~~~$ 3个值：上左右下
$~~~~$ $~~~~$ 4个值：上右下左
4、 margin可以设置负值
5、margin: 0px auto;可以让块元素水平居中

6、margin的常见bug
$~~~~$ 1、当两个盒子上下排版，上下margin会重叠，实际margin值取较大值；

$~~~~$ 2、当父元素的第一个子元素设置margin-top的时候，会错误的给父元素设置，解决方法如下：

$~~~~$ $~~~~$ 1、父元素：border(给父元素设置边框）
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ float（给父元素设置浮动）
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ padding-top:1px;
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ padding-top:(margin-top的值)
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ $~~~~$ overflow：hidden
$~~~~$ $~~~~$ 2、子元素：float（给子元素设置浮动）

盒子模型的大小

盒子的总宽度：
$~~~~$ $~~~~$ width+左右的padding+左右的border
盒子的总高度
$~~~~$ $~~~~$ height+上下的padding+上下的border

背景

背景颜色

	background-color:#333fff

背景图片

  background-image：URL（图片路径）

背景图片平铺属性

语法：选择符{background-repeat：no-repeat；

位置

background-positon:cener center;

background

background：yellow url(images/img13.jpg) no-repeat center center;

图片滚动

background-attachment:fixed/scroll;