margin-left
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1 {
width: 300px;
height: 300px;
background: #006400;
top: 50%;
left: 40%;
/*容器自身要设置position */
position: absolute;
}
.p2 {
width: 300px;
height: 300px;
background: #1C1759;
}
.p3 {
width: 800px;
height: 800px;
background: #A52A2A;
}
</style>
</head>
<body>
<p class="p3">
<p class="p1"></p>
<p class="p2"></p>
</p>
</body>
</html>
margin-left与left区别
可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别
1.使用margin-left时，父容器不考虑是否设置了position
2.使用left前提是必须设置本身的position:absolute或relative，否则不生效，top等亦是如此
margin与padding区别
1.margin：0 auto 表示距离顶部0其它按浏览器自适应，margin：10% 20%；表示距离上下10%；左右20%
margin表示外间距，容器外部距离其它容器的间距
2.padding：表示容易内间距，容器内的内容距离容器本身个边上的间距，不允许使用负值
试容器居中的方式
设置定位：距离顶部top50%，则容器整体距离顶部50%； margin-top: -400px;距离顶部-400px;表示容器的一半大小；刚好居于中间
width:800px;
height:800px;
position: absolute;
top: 50%;
margin-top: -400px;
left: 50%;
margin-left: -400px;
文章最后发布于: 2018-11-13 17:12:48
相关阅读
前言: 如果需要动态计算标签的距离时，我们时常会用到这两个属性offsetLeft和offsetTop，我的使用场景是，我有一个背景的p1，另一个p2并
之前只是单纯使用LEFT JOIN 并没有仔细思考其特点，这两天项目中碰到了新的问题，刚才测试了一下，特意总结说正题：当两个表有一个字段关
1假设本图有三层p盒子。外 中 内2最外层和页面的距离就是offsetLeft 元素与页面之间的左边的距离3外层包含着中 和内4外层和中层
在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识
SQL用过一定时间的同学，对left join，right join应该非常熟悉了，可能有些同学包括我在内， 对left/right join on 后面增加左表或右表