                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}这里的移动没明白？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

春哥哦

2016-01-17

源自：网页简单布局之结构与表现原则 2-1

关注问题我要回答

763

操作

收起

2 回答

前端小鸟
2016-01-17

.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}

首先不加这段代码只加浮动可以看到是浮动到了离demo3（demo3此时是包含框）上20px左20px的位置，因为设置了padding：20px;然后magin也就是以这个为基准偏移了。那么也可以看作目前这个位置的坐标为（0,0）。设置-100px是什么意思呢？100px=30px(图片目标位置的右边框距离demo03的距离)+20px（内填充）+50px（图片自身宽度）,-20px也就很好理解了，上内填充是20px，所以负号也就是往相反的方向移动对应的距离。你可以自己画个坐标图好好理解下。有不懂可以再问我，我也是刚刚自己想出来的。

1 回复有任何疑惑可以回复我~

收起回答

松鼠Wat
2016-01-17

float:left 意思是向左浮动；margin:a b c d; margin为距离外边框的距离；abcd分别代表上，右，下，左(顺时针方向)。此margin代表图片外框上边距父元素-20px，就是上方比父元素高出20px;-100px代表图片外框左边距父元素-100px，即在父元素的左边100px处。