前端 - css负边距的问题?
问题描述
这里有两个p, 都向左浮动,其中sub 设置了margin-left:-100%; 请问为何会出现这样的效果,sub能够占据到main上面。
在线demo:http://codepen.io/anon/pen/zvJeNG
请问这个负边距有何妙用,为何-100% 和 -190px(p的宽度)效果截然不同呢?
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8' /> <title>Document</title></head><body> <p class='main'> this is main</p> <p class='sub'> this is sub </p> </body></html>
.main{ float:left; width:100%; background-color:aqua;}.sub{ float:left; width: 190px; margin-left:-100%; background-color:black; }
问题解答
回答1:margin值是百分比数的时候,是相当于元素的包含块的width来计算的
你这儿的.sub margin-left:-100%的100% 是相对于sub的包含块 body的width 来计算也就是body的宽度
而-190px就只是190个像素
回答2:1、这两个p都设置了左浮动,当body的宽度足够他们俩平排在一起的时候,他们一定会排在同一行。2、sub设置了-100%,这个100%是相对于它的父元素body的宽度,也就是说它等于body的宽度,所以,它就回到了最左边,而sub的宽度为190px,那就是从最左边开始排列,就是现在这个样式。
相关文章:
1. objective-c - 类似微信单聊的功能,想把聊天记录直接存入Sqlite,怎么建表.2. mysql中的全文索引支持词根检索吗?3. 为什么HTML5规范中会包含一些和html无关的东西?如本地存储等。4. javascript - 百度echarts图表如何修改5. javascript - 百度地图一开始设置了中心点,怎么通过按钮在调转到对应的中心点????6. html5 - echarts折线图 markline 数值怎么设置 不想用默认的average7. javascript - Tomcat突然就报错了,解析不了java文件,试过几个百度的解决方法,没解决。8. python - 《flask web开发》中为什么发不出确认邮件?9. chrome浏览器怎么使用10. css - 关于图标字体