Study 8 —— 行块元素及定位

行&块元素
display:inline;
display:block;
display:inline-block;


盒模型
padding[内边距]
padding: 上下内边距 左右内边距;
padding: 上部内边距 右边内边距 下部内边距 默认与右边内边距相同;
padding: 上部内边距 右边内边距 下部内边距 左边内边距;

定位
1.水平位置的两个元素
它们之间的外边距=左边的margin-right+右边的margin-left
2.垂直方向的两个元素
它们之间的外边距=两者之中较大的外边距
3.包含关系的两个元素
它们之间的外边距=里面元素各个方向的margin+外部元素对应的各个方向的padding值

浮动

定位&层级
当一个元素(e)设定了定位
绝对定位:position:absolute;
如果它的父元素有设置定位,那么e的坐标就是相当于父元素的左上角,进行定位;如果它的父元素没有设置定位,那么e元素继续往上寻找爷爷辈;如果发现,爷爷辈有,就同样的也是相当于爷爷辈的左上角。。。

相对定位:position:relative;

层级:
z-index:数值 (数值越大,层级越高)

posted @ 2017-12-14 18:50  yancy.lu  阅读(184)  评论(0编辑  收藏  举报