一、边界边框
1、外边距 margin
.one{ width: 200px; height: 200px; background-color: orange; margin: 30px 40px 50px 60px; } .two{ width: 200px; height: 200px; background-color: red; } <div class="one"></div> <div class="two"></div>
2、内边距 padding(padding会加大height和width)
.three{ /*width: 200px;*/ width: 170px; height: 200px; background-color: blue; padding-left: 30px; margin-top: 30px; } <div class="three">123</div>
3、边框边框 border
.four{ width: 300px; height: 200px; border: 1px solid blueviolet; margin-top: 30px; } <div class="four"></div>
4、margin-left padding-top border-right border-botton
5、margin/padding:上 右 下 左
6、transparent 透明
.five{ width: 0px; height: 0px; border-top: 100px solid red; border-left: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid transparent; margin-top: 30px; } <div class="five"></div>
7、transform 转换(rotate旋转)
.six{ width: 200px; height: 200px; background-color: deepskyblue; transform: rotate(45deg); margin-left: 100px; } <div class="six"></div>