前端应用_css_盒子模型03

这节主要介绍margin 和如何用浏览器查看页面的style

浏览器查看页面的style

这个就是我们box style 效果图 ，解释如下：
500 x 300 是内容的大小，我们一般叫 content
绿色显示的是 内容和盒子之间的padding值 ，上下左右已经标注了 。
黄色 是 边框的值， 设置的都一样 。
最外层是 margin值 ，盒子的边距 。

我们发现个问题，就是 我没有设置 边距 ，怎么 盒子到边框的有空隙， 当我们不知道的时候就用这个查看下如图：

body 的部分 已经把 div 的盒子当作内容， body 没有padding 和border ，
但是 他有个默认的 margin =8px ，这就是问题的所在。可在body 部分设置为margin=0就行了。

margin 设置

margin 和padding 一样的设置方式。 这里就简单说下
margin 同样也有四个 拆分， margin-left， margin-right， margin-top， margin-bottom，
但是margin 可以合起来分别设置，例如 margin：10px，20px，30px，40px ， 顺序为顺时针进行设置，上为开头，
顺序为： 上 右 下 左 进行设置 。
如何设置三个呢， 并代表什么意思呢？
例子： margin：10px，20px，30px 意思就是 上10px ， 左右为20px ， 下边为30px
如何设置两个呢， 并代表什么意思 呢？

例子 margin ：10px ，20px 意思是 上下为10px ， 左右为20px

同理推出 如果只有一个就是 margin：10px ，代表 左右上下都是 10px。

我们设置如下 ：
margin:20px 200px 40px 60px;
效果图：

margin 已经生效了 ，

margin 的坑，边距合并的问题

下边我们 再创建一个盒子，看看边距的问题

 .box{
        background-color:gold;
        width:500px;
        height:300px;
        border:10px solid green;
        padding:80px 200px 40px ;
        margin:20px 200px 40px 60px;
        <!--下边的四个可以合为一个 如下：-->
        <!--padding-left:40px;-->
        <!--padding-top:80px;-->
        <!--padding-bttom:100px;-->
        <!--padding-right:20px;-->
        }
          .box2{
        background-color:gold;
        width:500px;
        height:300px;
        border:10px solid green;
        padding:80px 200px 40px ;
        margin:100px 200px 40px 60px;s
        <!--下边的四个可以合为一个 如下：-->
        <!--padding-left:40px;-->
        <!--padding-top:80px;-->
        <!--padding-bttom:100px;-->
        <!--padding-right:20px;-->
        }

box 下边距是40px ，box2的上边距为100px ， 按道理 应该是140px ，但是结果是100px.


注意：左右没有这个问题 。
解决方法：

1. 你直接可以利用这个特性
2. 两个盒子 只设置 margin-top ，margin-bottom 不设置
3. 降元素浮动或者定位

让盒子在浏览器进行居中的方法

margin：200px auto；
auto 的意思自动分配，只设置上下的边距。