一、 css初始化
把所有的元素,margin,padding,border全设为0.
* {margin:0;
Padding:0;
Bordcer:0;
}
是一种很常用,但是效率不是很高的初始化方法.
二、
详解margin:
Margin: 10px; 是设置4个方向上的margin值,都为10px;
Margin:10px 20px 30px 40px ,则分别是设置 上,右,下左,方向上的margin值
如果margin值只设置了2个,或3个,
则按上,右,下,左的方向顺序来分配,没有被分配到值的边, 以对边的margin为准
也可以用margin-top/right/bottom/left 来分别设置4个方向的值
如何用margin来居中
可以通过设置margin: 0 auto; 即,左右的外边距为"自动",即可使左右居中
注意: css只支持用auto来进行左右居中,竖直方向用auto无效.
Margin 外边距有重叠效果
就是在竖直方向,当两个元素的外边距连在一块时,两者的距离并不是两者margin之和,而是取最大margin为准
对于漂浮(float)的元素,外边距不存在重叠效果,也就是说:上下边距为两者的margin之和
内边距padding的探讨:
1:4个方向上的padding定义和margin一样.
2:padding是透明的, 也就是说, padding区域的颜色是盒子的背景色.
或者说:盒子的背景色铺到 盒子的内边框处
定义的盒子的大小指的是可以放内容的大小。
边框的写法:
边框border 和margin,padding不一样,因为margin,padding仅仅需要一个数字的值就能表示.
但是边框不仅需要指明像素宽度,还需要指明形状和颜色
边框的指定方式: border: 形状 宽度 颜色,
例: border: solid 20px red;
不能像margin padding那样,把2,3,4个边框的值连着写.
即: border: solid 20px red solid 30px green, -----这样是不对的.
所以如果要想指定4个边框为不同的效果,
可以用:
Border-top/right/bottom/left 来分别指定