
前段时间有个后端小伙伴被拉去写前端,出现了一个让他困惑不已的问题:明明给子元素设置了width:80%;
可为什么还是子元素超出了父元素的宽度?
这里涉及到width属性的值的类型:width
属性可以设置两种值,一种是绝对长度值,另外一种是相对长度值,相对长度值又根据参照物不同分为view height/view width
和percentage
。
所谓相对长度,那肯定会有参照物,其中vh/vw
方式是参照窗口高宽确定的(浏览器参照),percentage
方式是参照DOM元素确定的(页面内部参照)。但是问题就出现在这里,percentage
参照的是哪个元素呢?是body
、父级、还是兄弟元素?它又有哪些规则?
为了说明,我写了个简单的演示。
当然,我只写了几个组合,剩下的读者可以亲自试一试,实践出真知嘛。
顺便给出Mozilla对position
属性的说明文档:Position – CSS: Cascading Style Sheets
(未完待续)
发表评论