这里有两个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;
}
margin值是百分比数的时候,是相当于元素的包含块的width来计算的
你这儿的.sub margin-left:-100%的100% 是相对于sub的包含块 body的width 来计算
也就是body的宽度
而-190px就只是190个像素
1、这两个p都设置了左浮动,当body的宽度足够他们俩平排在一起的时候,他们一定会排在同一行。
2、sub设置了-100%,这个100%是相对于它的父元素body的宽度,也就是说它等于body的宽度,所以,它就回到了最左边,而sub的宽度为190px,那就是从最左边开始排列,就是现在这个样式。