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

时间:2022-03-31 20:29:57

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