首页
注册
登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请
登录
Can I use?
›
http://caniuse.com/
Less
›
http://lesscss.org
Cool Libraries
›
Bootstrap from Twitter
›
Jetstrap
广告
V2EX
›
CSS
CSS 属性 width:100%相对于父元素的哪部分计算?
rabbbit
·
2017-11-11 22:29:17 +08:00
· 5621 次点击
这是一个创建于 2357 天前的主题,其中的信息可能已经有所发展或是发生改变。
普通状态下,似乎相对于父元素宽度计算
子元素加上 position:absolute 后,变成相对于父元素的 width + padding 了?
[示例](
http://htmlpreview.github.io/?https://github.com/Aaron-Bird/baiduIFE/blob/master/note/width100%25.html
)
第 1 条附言 ·
2017-11-12 02:42:18 +08:00
https://css-tricks.com/almanac/properties/w/width/#article-header-id-0
For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.
width
元素
absolute
padding
1 条回复
1
oh
2017-11-12 01:30:17 +08:00
2
这是两个问题了。
一、默认状态下 width 100% 是相对于父元素的可用宽度,不含 padding。
二、加了 absolute 之后元素变成了 绝对定位,会一直向上寻找第一个非 static 的父元素(例如其它的 absolute 或 relative ),如果上级元素中都没有,那就是相对于 body 了,所以这时候搭配 width 100% 的话就是占据整个视图区域的宽度了。
关于
·
帮助文档
·
博客
·
API
·
FAQ
·
我们的愿景
·
实用小工具
·
1352 人在线
最高记录 6543
·
Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 25ms ·
UTC 17:40
·
PVG 01:40
·
LAX 10:40
·
JFK 13:40
Developed with
CodeLauncher
♥ Do have faith in what you're doing.