关于本章节案例问题总结
1.我设置position: fixed;right: 20px;bottom: 20px;是为了让在刚打开的时候方块就显示在右下角，而老师的修改并没有这个效果，请问如何修改？
https://class.imooc.com/course/qadetail/200501
2.关于父容器100%宽度的问题，我又思考了，发现一个问题
如下两种写法效果是等价的，唯一的区别是盒子box的宽度不一样，请问老师将box宽度设置为100%，在这里是96px装下所有子容器，目的是什么？（原理是一样的）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.container{width: 100px;height: 100px;border: 2px solid black;margin: -2px;}
.box{width: 300%;height: 100%;display: flex;}
.item{flex: 1;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="item" style="background-color: red">1</div>
<div class="item" style="background-color: yellow">2</div>
<div class="item" style="background-color: blue">3</div>
</div>
</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.container{width: 100px;height: 100px;border: 2px solid black;margin: -2px;}
.box{width: 100%;height: 100%;display: flex;}
.item{flex-shrink: 0;width: 100%;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="item" style="background-color: red">1</div>
<div class="item" style="background-color: yellow">2</div>
<div class="item" style="background-color: blue">3</div>
</div>
</div>
</body>
</html>3.第二个问题由于使用了box-sizing: border-box;为了看到黑色边框，明显看到效果，我设置了margin: -2px;但是对这里的负值有点晕，老师能不能详细讲解下margin负值的用法及原理？
（之前老师上课时用过）
正在回答 回答被采纳积分+1
同学你好，关于同学的疑问，解答如下：
1、老师讲解的已经很详细了，同学可以反复琢磨一下老师的每一句话，再理解下
https://class.imooc.com/course/qadetail/200449
如果对flex布局不太了解，可以去看下视频，复习下知识。
2、关于margin负值，可以把视频的那一节几分几秒说明一下，老师根据实际情况帮助解答。
3、底部边界限制实现没有问题的，因为页面设置了固定高度2000px，存在滚动条，所以同学测试起来感觉是边界限制有问题。可以调整下body的高度，如下：
4、使用老师提供的代码测试，点击下方红框的手机图标之后，要刷新一下页面
因为同学一次提问很多问题，同学后期总结的时候不是很方便，建议：如果还有其他疑问，可以新建问题呦。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
同学你好，关于同学的疑问，解答如下：
1、可以参考下方：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 2000px;
background-color: pink;
}
#div {
width: 50px;
height: 50px;
background-color: red;
line-height: 50px;
text-align: center;
color: white;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="div">↑</div>
<script>
var box = document.getElementById('div');
drag(box, {
x: true,
y: true
});
function drag(ele, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true;
options.y = typeof options.y !== 'undefined' ? options.y : false;
if (!options.x && !options.y) return;
const elemWidth = ele.offsetWidth; // 元素的宽度
const elemHeight = ele.offsetHeight; // 元素的高度
const screenWidth = document.documentElement.clientWidth || window.innerWidth; // 可视区域宽度
const screenHeight = document.documentElement.clientHeight || window.innerHeight; // 可视区域高度
const elemLeft = ele.offsetLeft; // 元素左边距离屏幕左边的距离
const elemRight = screenWidth - elemWidth - elemLeft; // 元素右边距离屏幕右边的距离
const elemTop = ele.offsetTop; // 元素顶边距离屏幕顶边的距离
const elemBottom = screenHeight - elemHeight - elemTop; // 元素底边距离屏幕底边的距离
var curPoint = {
x: 0,
y: 0
};
var startPoint = {};
var movePoint = {
};
var diffPoint = {};
var isTouchMove = false; //当手指没有移动的时候，不执行handleMove函数
ele.addEventListener('touchstart', handleTouch, false);
ele.addEventListener('touchmove', handleMove, false);
ele.addEventListener('touchend', handleEnd, false);
function handleTouch(event) {
var touch = event.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}
function handleMove(event) {
event.preventDefault(); //防止触发默认事件，即在Y轴移动的时候并没有移动目标的位置，而是滚动条发生了变化
isTouchMove = true;
var touch = event.changedTouches[0];
diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
let moveX = diffPoint.x + curPoint.x;
let moveY = diffPoint.y + curPoint.y;
let elemLeftDis = elemLeft + moveX;
let elemRightDis = elemRight - moveX;
let elemTopDis = elemTop + moveY;
let elemBottomDis = elemBottom - moveY;
if (options.x) {
if (elemLeftDis <= 0) {
movePoint.x = -elemLeft;
} else if (elemRightDis <= 0) {
movePoint.x = elemRight;
} else {
movePoint.x = moveX;
}
}
if (options.y) {
if (elemTopDis <= 0) {
movePoint.y = -elemTop;
} else if (elemBottomDis <= 0) {
movePoint.y = elemBottom;
} else {
movePoint.y = moveY;
}
}
move(ele, movePoint.x, movePoint.y);
}
function handleEnd(event) {
if (!isTouchMove) return;
var touch = event.changedTouches[0];
curPoint.x = movePoint.x
curPoint.y = movePoint.y
isTouchMove = false;
}
function move(ele, x, y) {
x = x || 0;
y = y || 0;
ele.style.transform = 'translate3d(' + x + 'px,' + y + 'px, 0)'
}
}
</script>
</body>
</html>使用上方的方式，代码中会有很多计算，如果不懂的，可以打印下看结果，建议：为了考虑代码量，建议同学可以参考另一种写法：https://class.imooc.com/course/qadetail/200501
2、代码具有灵活性，实现效果的方式有很多种。同学是在哪里看到的这段代码呢？老师根据具体需求分析
3、给元素设置margin-top或者margin-left为负值，元素会往上和往左移动，如下：
效果：
设置边距之后：
效果：
为了印象更深刻，同学可以测试下
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星