border 边框

复合写法 border:border-width border-style border-color;

border-width 边框宽度

border-style 边框样式：solid实线 dashed虚线 dotted点线 (点线 IE6不认)

border-color 边框颜色：英文单词/十六进制/rgb

border-width还能再细分为

boder-top-width border-right-width

border-bottom-width border-left-width

当宽高为0px时，边框均等100px，会构成四个三角形拼成的正方形；

之上添加 border-radius:50%; 会构成四个三角形拼成的圆形；

transparent 透明

可以把颜色设置成透明

 

padding设置内边距(或者叫内填充)

padding-top

padding-right

padding-bottom

padding-left

padding复合写法：

一个值指定上右下左都是这个值

两个值指定上下、左右

三个值指定 上 左右 下

四个值指定 上 右 下 左

（四个值简记为顺时针的顺序）

div标签的占地面积宽高等于

(width+border+padding)x(height+border+padding)

边框border 内填充padding都是具有占地面积的

 

margin 外边距（分上右下左）；

复合写法：与padding一样意思；

标签的嵌套：确定父子级关系，

1.第一个子级的margin-top会在特定的情况下穿透父级(穿透父级指的是它直接对父级生效，带着父级一起在上方形成边距)；

规避方法：(1)给父级加边框；

(2)给父级加overflow:hidden；

(3)用父级的padding-top代替子级的margin-top;

2.兄弟关系的margin-top和margin-bottom会叠在一起导致重叠；

解决方式：兄弟之间的margin-top 和margin-bottom无法避免，只能将其中一个设置成两者之和来加以修正