html外边框隐藏,HTML&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;

}