css中的边框和背景属性

边框属性

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;

转载于:https://juejin.im/post/5d305ce251882548ea35c2e7