css 的基础样式--border--padding--margin

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无法避免，只能将其中一个设置成两者之和来加以修正