Study 8 —— 行块元素及定位

Posted yancy.lu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:数值 (数值越大,层级越高)

以上是关于Study 8 —— 行块元素及定位的主要内容,如果未能解决你的问题,请参考以下文章

CSS学习8(浮动和定位)

列表及行块转变

浮动所产生的特性

web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)

web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)

浅析CSS——元素重叠及position定位的z-index顺序