关于使用position:fixed之后附加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 哈哈
未完待续.......
关于使用position:fixed之后附加margin/padding的一些影响细节相关推荐
- 完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- 不要乱用position:fixed
经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要 ...
- 修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6- ...
- position:fixed;
为什么设置position:fixed:div会消失. 此文如有不正确的地方,敬请留言指出,谢谢. 1.position:fixed;作用 生成绝对定位的元素, 相对于浏览器窗口进行定位.可以通过设置 ...
- html 固定定位怎么居中,position fixed居中
position:fixed div如何居中 据闻是以left right top bottom来定位的,那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;le ...
- CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是 相对当前浏览器窗口 的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
- php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中,上下左右 居中 代码如下 复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中 上下左右 居中 代码如下 复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
- position:fixed和scroll实现div浮动【示例】
原文:position:fixed和scroll实现div浮动[示例] 前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解 ...
- transform 遇上 position: fixed
最近遇到一个有意思的现象,以下 demo 中 fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位. <html><head><style&g ...
最新文章
- 蚂蚁金服付志嵩:数据膨胀?关系复杂?如何升级图数据库?
- 应用监控指标采集器 Prometheus 核心介绍
- 杭电2855 Fibonacci Check-up
- subprogram or cursor is declared in a package specification and must be defined in the package body
- Fliptile(状压+思维)
- 聊一聊Jmeter的简单使用
- 射频通路 隔直_2.4G射频双向功放电路的设计与制作
- 3d激光雷达开发(圆柱分割)
- 计算机专业最新研究领,「金仕教育」打码秃头?CS计算机专业研究方向与研究领域介绍...
- g++: internal compiler error: Killed (program cc1plus)Please submit a full bug report,内存不足问题解决
- 关于spark写入文件至文件系统并制定文件名之自定义outputFormat
- python 进行后端分页详细代码
- Machine Learning ——Homework3
- Atitit.手机验证码的破解---伪随机数
- .net core在线考试系统源码
- 推荐软件——total commander(善用佳软)
- CTF-BeesCMS系统漏洞分析溯源
- Kubernetes上基于longhorn和statefulsets的pv空间扩展
- 美团Java面试题,苹果手机java编程软件
- python转义字符/a---响铃
热门文章
- 台式计算机刚做完系统就蓝屏,台式电脑总会蓝屏是怎么回事
- 怎么写Java项目测试用例
- .Net的就业前景及广州.Net培训机构
- beta distribution (beta分布)
- java 静态代码块的作用_Java中什么是静态代码块,有什么作用?
- 计算机工作功率,电脑工作时连显示屏一起功率大约多少?
- 啥是卷积神经网络(三)(GoogLeNet v1网络详解)
- 044 郁闷、要被淘汰了……
- CRC并行运算原理分析,公式推导及MATLAB实现,并行CRC Verilog代码生成
- createfile调用失败_CreateFile函数祥解