CSS可视化格式模型学习

CSS最重要的三个概念是浮动、定位和盒模型

盒模型

css中每个元素都是一个盒模型，盒模型有两种模式，第一种是标准模型，另一种是IE的传统模型

标准模式

2017-05-23_145615.png

div{
            width: 40px;
            height: 40px;
            padding: 10px;
            margin-bottom: 20px;
            border: 10px solid #000;
        }

这里我设置了一个div其中 内容区域是40*40的部分 padding是内边距 border 是边框 margin是外边距

在标准模式下设置的宽高是内容区域的宽高

传统模式

div{
            width: 80px;
            height: 80px;
            padding: 10px;
            margin-bottom: 20px;
            border: 10px solid #000;
            box-sizing:border-box;
        }

这里可以使用box-sizing中这个属性模拟传统模式

2017-05-23_150347.png

这里div的高度和宽度设置的是80，但是内容区域却是 40*40，是因为这个模式下的宽高不是内容区域的宽高，而是内容区域 + 内边距 + 边框的高度的总和，所以这里内容区域的宽高被压缩了
大家可以用这代码去测试看看

盒模型的外边距叠加

当两个或多个垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加外边距高度中的较大者

*{
            margin: 0;
            padding: 0;     
        }
        body{
            margin: 10px;
        }
        .first{
            width: 150px;
            height: 50px;
            padding: 10px;
            margin-bottom: 20px;
            border: 10px solid #000;
        }
        .second{
            width: 150px;
            height: 40px;
            padding: 10px;
            margin-top: 40px;
            border: 10px solid #000;
        }  

    <div class="first">aaaa</div>
    <div class="second">bbbb</div>

这里写了两个div，一个设置margin-bottom是20px 一个设置margin-top是40px 这两个垂直接触的div之间margin的距离最后是40px


这里可以看出，上下的margin已经合在一起了，并且最后合并之后的margin是较大的那个margin