.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}這里的移動沒明白？
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
春哥哦
2016-01-17
2 回答
舉報
0/150
提交
取消
2016-01-17
.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}
首先不加這段代碼只加浮動可以看到是浮動到了離demo3（demo3此時是包含框）上20px左20px的位置，因為設(shè)置了padding：20px;然后magin也就是以這個為基準(zhǔn)偏移了。那么也可以看作目前這個位置的坐標(biāo)為（0,0）。設(shè)置-100px是什么意思呢？100px=30px(圖片目標(biāo)位置的右邊框距離demo03的距離)+20px（內(nèi)填充）+50px（圖片自身寬度）,-20px也就很好理解了，上內(nèi)填充是20px，所以負(fù)號也就是往相反的方向移動對應(yīng)的距離。你可以自己畫個坐標(biāo)圖好好理解下。有不懂可以再問我，我也是剛剛自己想出來的。
2016-01-17
float:left 意思是向左浮動；margin:a b c d; margin為距離外邊框的距離；abcd分別代表上，右，下，左(順時針方向)。此margin代表圖片外框上邊距父元素-20px，就是上方比父元素高出20px;-100px代表圖片外框左邊距父元素-100px，即在父元素的左邊100px處。