CSS样式 边框线属性样式、内外边距和margin垂直不重叠办法

边框属性

属性	含义
border-width	边框粗细
border-style	边框样式
border-color	边框颜色
border-radius	圆角边框

border的连写

border:线条粗细  边框样式  线条颜色;

颜色的表现方式可以为：十六进制、rgb函数、rgba函数、英文单词

border样式可以自定义input边框线

单向边框样式

// top上  bottom下  left左  right右
border-方位名词:像素 线条 颜色;

取消边框

border:none;

透明的边框

border-color:transparent

内边距padding

  //只给一个值时
padding: 上下左右; 

  //只给两个值时
padding: 上下 左右;

  //只给三个值时
padding: 上 左右 下;

  //只给四个值时
padding: 上 右 下 左;	

外边距margin

  // 只给一个值时
margin: 上下左右;

  // 只给两个值时
margin: 上下 左右;

  // 只给三个值时
margin: 上 左右 下;

  // 只给四个值时
margin: 上 右 下 左;	

若要盒子在水平方向上居中  左右设为auto

水平外边距不会重叠，垂直外边距会重叠

使margin垂直不重叠的方法

1. 父级盒子加上一个边框（边框线可透明）
2. 父级盒子加个内边距padding（至少一像素），然后在子级进行操作
3. 父级盒子设置overflow:hidden（溢出隐藏，相当于父级盒子四边都获得了边框）

图片的偏移

• 插入的图片通过外边距盒子模型来偏移
• 背景图片通过 background-position直接偏移