HTML&CSS基础-外边框
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外边距</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; /** * 定义内边距 */ border: 10px solid yellow; /** * 定义外边距 * 外边距指的是当前盒子与其它盒子之间的距离,他不会影响可见狂的大小，而是会影响到盒子的位置。 * 盒子有四个方向的外边距: * margin-top: * 设置box1上的外边距，盒子上边框和其它盒子的距离 * margin-bottom: * 设置box1下外边距。 * margin-left: * 设置box1左外边距。 * margin-right: * 设置box1右外边距。 * * 由于页面中的元素都是靠左靠上摆放的，所以要注意以下两点: * 当我们设置上和左外边距时，会导致盒子自身的位置发生改变; * 当我们设置下和右边距时，会改变其它盒子的位置 * * 外边距也可以指定一个负值，如果外边距设置的时负值，则元素会向反方向移动 * * margin还可以设置auto，auto一般只设置给水平方向的margin * 如果只指定左外边距或者右外边距的margin为auto则会将外边距设置为最大值; * 垂直方向外边距如果设置auto，则外边距默认就是0; * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中; * 所以我们经常讲左右外边距设置为auto以使子元素在父元素水平居中 * * 外边距同样可以使用简写属性margin,规则和padding一样： * 可以同时设置四个方向的外边距，分别表示，上，右，下，左这四个外边距的值(顺时针方向); * 可以同时设置三个值，分别表示上，左右，下这四个外边距的值 * 可以同时设置两个值，分别表示上下，左右这四个外边距的值 * 也可以设置一个值，表示上下左右的外边距都一样 * */ margin-top: 50px; margin-bottom: 50px; margin-left: 50px; margin-right: 50px; } .box2{ width: 200px; height: 200px; background-color: deeppink; margin-left: auto; margin-bottom: -100px; } .box3{ width: 200px; height:200px; background-color: blue; margin-left: auto; margin-right: auto; } .box4{ width: 200px; height: 100px; background-color: #FFFF00; margin: 10px 20px 30px 40px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
二.浏览器打开以上代码渲染结果
