margin和translate的区别

CSS样式

div {

width: 200px;

height: 200px;

background-color: pink;

}

.box1 {

/*1. 外边距移动的百分比是父盒子的大小,在移动时会影响其他的盒子 */

/* margin-left: 100%; */

margin-top: 10px;

}

.box2 {

background-color: yellowgreen;

/* 2.位移移动的百分比是自己的大小 x轴是自己的宽 y轴就是的高*/

/* transform: translate(100%, 0); */

transform: translateY(10px);

}

html

<div class="box1"></div>

<span>这是第一个盒子下面的内容</span>

<div class="box2"></div>

<span>这是第二个盒子下面的内容</span>

总结：

1. margin外边距移动的百分比是父盒子的大小,在浏览器中占位置，移动时会影响其他的盒子

2. translate 移动的百分比是自身的大小，位移在移动时不会影响其他的盒子，有类似于相对定位的特点。