HTML中盒模型的示例分析

    
    
    
    
        div{
        padding: 10px;/*内边距*/
        margin: 20px;/*外边距*/
        margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/
        margin: 10px 20px;/*上下 左右*/
        margin: 10px 20px ;/*上 上下不一样，左右一样*/
        margin: 10px 20px 30px;/*外边距*/
        border: 5px solid red;/*边框*/
        width: 100px;/*内容区域宽度100*/
        height: 100px;/*内容区域高度100*/
    }
    /*盒子大小值=2（内边距+边框+外边距）*//*该div大小*/
    


    
看再多的书是学不全脚本的，要多实践。

    
    
    
    
    .box1,.box2{
        width: 200px;
        height: 200px;
        margin: 10px 20px;
        background-color: red;
    }
    


    功能说明书里不存在可操作性

按照正常思维来讲，上面的代码里面的2个盒子的上下间距应该是20px缝隙，但是实际我们在控制台查看的时候确只有10px，另外10px显然被重叠了，如果我们调整2个盒子的margin值大小，会发现上下间距取最大值20px（margin平级元素取最大值 ）；解决办法：1.float2改变元素结构display:inline-block此外如果margin嵌套关系,也就是父子关系的时候你会发现他们是重合的，没有缝隙，那么如何解决margin带来的这些问题了，解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；盒子模型对于我们后面的网站布局很重要，利于网站的精确定位。

    
    
    
    
    /* .box1,.box2{
        width: 200px;
        height: 200px;
        background-color: red;
    } */
    /* .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 20px 10px;
    }
    .box3{
        margin: 20px 10px;
    }
    .box4{
        margin: 10px 20px;
    } */

    /* 盒子模型平级带来的问题解决办法：1.float 2.display:inline-block 3.直接写一个最大值，平级取最大值的margin*/
    div{
        /* float: left; */
        display: inline-block;
        width: 1200px;
    }
   .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 80px 10px;
    }

    /* 盒子模型平级嵌套带来的问题解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；上下填充文字*/
    p{
        width: 800px;
    }
    .box3,.box4{
        margin: 30px;
    }
    .box3{
        background-color: green;
        /* border:1px solid red*//*给父元素加border*/
        padding: 10px; /*给父元素加padding*/
        /*overflow: hidden;*//*添加overflow:hidden 超出部分隐藏，带来效果是所有超出全部裁剪掉*/
    }
    .box4{
        display: block;
        background-color: greenyellow;
    }
    


    功能说明书里不存在可操作性