盒子模型Box盒子，盒子一般是指块模型（block）和行内块模型（inline-block），就像日常生活中的盒子：盒子会有边框（border），并且有空格用于存放里面的东西（content），以及padding和margin块元素，块元素可以设置宽高，所以在普通的盒子里，这里的宽高指的是内容区域（content）的宽高.如果设置了paddingborder值，则框会扩大（框的尺寸会变大）。在没有宽高的情况下，块元素会占据一行，高度会被内容扩展。然后看到高度被“内容”这个词扩大了吗？你想到了什么样的申请方式？刚开始写一些小demo的时候，是不是经常自己遇到padding，margin，border，contentarea取值的时候，会发现元素往下掉，或者图片img的高度超过了盒子的高度被降低。这是因为您为框设置了固定高度。在文章的最后，我将谈谈使用块元素的一些技巧。区别顺序为上、右、下、左，不再赘述。padding和margin很像，放在一起可以记住怪异盒子模型默认的box-sizing:box-sizing:content-box从英文可以理解盒子的大小就是内容区域,所以设置宽度和高度也是内容区域的固定大小。box-sizing：border-box怪异的盒子模型，当设置宽高时，宽高与border边框固定，里面的marginpadding和content内容的总大小。怎么理解呢？普通盒子，当添加padding和border时，会扩大盒子的整体尺寸，内容区域的尺寸不变。不过之所以被称为怪盒模型，估计就是他了。真奇怪。在box-sizing:border-box的情况下设置边框时，padding会挤压内容区域。框的整体大小不会改变，但内容区域的大小会减小。使用盒子时，我们更喜欢使用奇怪的盒子模型。因为人们最直观的做法是先拿一个盒子，然后设置paddingborder之类的东西，剩下的区域放内容。比较容易统一款式和尺寸，不会说几个箱子尺寸不一样。你必须使用计算器来计算。自己写的时候可以这么干，但是上班的时候这么干，总不能把老板吓死吧。再来说说内容支撑高度的技巧。..之前做作业的时候，看到有同学测量了最外层盒子的高度和图片的高度。盒子里有文字和图片。结果盒子放不下图片，所以这个时候你是不是把体积的高度去掉，让他自己打开，这样他就不用担心出错了。当一个块元素包裹多个内联块元素时，他会发现有的内联块落到了第二行？他看起来很困惑，不是吗？这是因为最外层块元素的宽度放不下你里面的内联块元素，所以这时候如果把最外层块元素换成内联块元素，内容就不会往下掉了。看看这个时候你的大盒子需要多大尺寸才能让元素并排出现。并将盒子大小设置为这个大小
