关于使用position:fixed之后附加margin/padding的一些影响细节

关于使用position:fixed之后附加margin/padding的一些影响细节

① 未设置(left/right/top/bottom属性)方位   ->    该元素表现为包裹性(与内联元素的效果相似,目前来说margin和padding与内联元素中的margin/padding的表现是一样的)


              1.能由包裹的span撑开


              2.未设置方位时,margin无效,padding却是有效的,且其百分比是按照body(父容器)来算的,若该节点设置了height和width,那么就使用该节点的高宽


              3.若未设置高宽,那么由子容器默认撑开

注:未设置方位时,默认看不见容器的

www.zeeklog.com  - 关于使用position:fixed之后附加margin/padding的一些影响细节

此时是未设置方位的,纯粹由子容器撑开了

.ex-tBoxAni__test span{
            color: #F7F7F7;
            font-size: 16px;
            line-height: 158px;
  }

②.设置方位   ->   进入格式化宽度(与block元素一样,会填充父容器,block元素不会填充高度,而该设置能够填充高度)


              1.所有的属性都由父容器决定,都按照父容器坐标系进行平移(若该层的祖先元素中有transform为非none的元素时,则会以该容器的坐标系进行平移


              2.若对应方位全设置为0,那么高容器填充body,可以给方位设置   px/em/百分比


              3.margin/padding按照父容器宽度进行百分比计算

首先,body宽度  注意:该截图是从火狐(firefox)浏览器截图的,不同的浏览器效果可能会有所差别!!!!!!

www.zeeklog.com  - 关于使用position:fixed之后附加margin/padding的一些影响细节

然后就是该容器宽度,其父容器就是body

www.zeeklog.com  - 关于使用position:fixed之后附加margin/padding的一些影响细节


            宽度为442px,两侧的margin为30%,由此计算可得1110*30%=333px,正好

          注:
                 若margin和padding之和超过了100%(margin:30%,padding:20%),那么文字还会显示,只不过只会显示一部分
                  文字换行,且Line-height的效果会添加再换行的文字上,因为其形成了一个line-box
                  但是不会拉长body,原因?

firefox下:

www.zeeklog.com  - 关于使用position:fixed之后附加margin/padding的一些影响细节

chrome下:

www.zeeklog.com  - 关于使用position:fixed之后附加margin/padding的一些影响细节

两者都不拉长body,且在全屏模式下,该框都未能显示全部,猜想:

该定位元素就与风筝一样,虽然远远吊在空中,但地面仍然有线在控制(大神的警语)

在这儿该定位元素会受到父容器(地面)的限制,但是其吊在空中,因此影响不到父容器的布局。

祝大家元旦快乐,o(∩_∩)o 哈哈

未完待续.......