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

本文探讨了CSS中未设置方位属性时元素的行为表现,包括其与内联元素的相似之处,以及设置方位后如何填充父容器并受父容器属性的影响。详细分析了margin和padding在不同情况下的表现。

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


              1.能由包裹的span撑开


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


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

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

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

.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)浏览器截图的,不同的浏览器效果可能会有所差别!!!!!!

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


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

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

firefox下:

 

           

chrome下:

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

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

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

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

未完待续.......

 

要让给定代码实现的二级导航栏居中,可对 CSS 样式进行修改。核心思路是将一级导航栏整体居中,同时确保二级导航栏相对于一级菜单项居中显示。以下是修改后的代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> a { text-decoration: none; font-weight: 800; font-size: large; display: inline-block; height: 40px; width: 100px; color: white; line-height: 40px; text-align: center; padding: 10px 100px; } ul { list-style-type: none; } #list { display: flex; justify-content: center; /* 让一级导航栏整体居中 */ margin: 0px; padding: 0px; width: auto; height: 100%; } #list > li { position: relative; /* 为二级导航栏的绝对定位提供参考 */ } #list > li > ul { display: none; position: absolute; left: 50%; /* 先将二级导航栏左侧移到一级菜单项中间 */ transform: translateX(-50%); /* 再向左移动自身宽度的一半,实现居中 */ } #list > li:hover ul { display: block; } a:hover { background-color: burlywood; } </style> </head> <body> <ul id="list"> <li> <a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> </ul> </li> <li> <a href="#">一级菜单2</a> <ul> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> </ul> </body> </html> ``` ### 修改点说明 1. **一级导航栏整体居中**:将 `#list` 的 `display` 属性设置为 `flex`,并使用 `justify-content: center` 让一级导航栏的菜单项在水平方向上居中显示。 2. **二级导航栏相对于一级菜单项居中**:为 `#list > li` 设置 `position: relative`,为二级导航栏的绝对定位提供参考。对于 `#list > li > ul`,先使用 `left: 50%` 将其左侧移到一级菜单项的中间位置,再使用 `transform: translateX(-50%)` 向左移动自身宽度的一半,从而实现二级导航栏相对于一级菜单项的居中显示。 ### 注意事项 - 原代码中 `ul` 的 `position: fixed` 属性会使导航栏固定在页面某个位置,这里将其移除,避免影响布局。 - 若导航栏内容较多,可根据实际情况调整 `padding` 和 `width` 属性,以确保显示效果良好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值