盒模型分类盒模型分为两大类：普通盒模型（box-sizing:content-box）、怪异盒模型（box-sizing:border-box）。normalboxmodel和weirdboxmodel的区别在于设置width，height是针对什么区域设置的。eg：内容框设置宽度：100px；高度：100px；那么无论你怎么改变borderpadding的值，都不会影响内容区域的值。也就是说，你设置的padding和上面的相比，border-box（边框框）在和border值比较的时候会改变框的总大小。字面意思：当设置框的宽高时，就设置了框的总大小，那么此时如果改变borderpadding值，就会影响内容区域的大小。先不说盒子的基本标签。下面说说inline、block、inline-block的特点大家都懂，但是经常忘记用在什么地方，或者知道用在什么地方但是没注意到为什么要用inline元素居中，你必须为父元素设置text-align:center；内联元素也有细分：有兴趣的同学可以看看内联元素的前面和后面是可以和内容一起显示的，也就是可以在同一行显示。不能为行内元素设置宽度和高度。那么有的同学就好奇了，不设置高度就可以了。如果你不设置宽度，我的元素之间的空间应该怎么办？使用一个敲门声？嗯嗯，可以试试用margin，宽度不能设置，然后用margin把结构上的其他元素往里推：内联元素不能放块元素，什么都有专门的column，a标签是跳转链接你可以放一个块元素。事实上，你经常看到它。比如你去淘宝买东西，只能点击图片或者文字跳转。单击整个区域的任何部分，它就会跳跃。内边距只对内部的Linked元素有影响，而block元素被忽略。这里指的是行内元素的margin-top，margin-bottom不会生效。需要注意的是，这个padding会“生效”，但不会影响top和bottom的布局。这里说的“有效”的意思是：如果给span设置一个background-color，你会发现这个background-color会衍生到另一行，但是不会挤出其他元素（换句话说，不会影响布局，不占位置）。分析之间的空格：这个比较头疼，那么如何去除便利贴之间的空格分析呢？我们可以将f设置为父元素ont-size:0;，但是如果你这样做，你必须重新设置子元素的font-size值，因为这个属性是可以被继承的。我们也可以使用margin:负值来调整。这比改变font-size更重要频谱太多了。该块占用一行。如果未设置宽度，此属性还会带来默认宽度100%。这个100%与可见窗口无关。100%是相对于父元素宽度的100%。可以理解为继承父元素的宽度。（怎么理解怎么来的）高度是靠内容来扩展的。该应用程序将在内联块中一起讨论。一个很方便的东西（一个小技巧）可以设置内外边距（然后内外边距加上边框的设置可以看上面的两个盒子模型。）块元素比行内元素好。块元素可以包含所有元素。但是p标签开始有点特殊了，这个p标签感觉就是一个内联元素，不能放块元素。如果你必须把一个div放进去，它会导致浏览器的failsilence将它默认为围绕一个div标签的2个p标签。inline-block相对inline-block会比上面两个用的多一点。毕竟在你还没有学会floatposition的时候，还是要依赖inline-blocklayout。看这个词就明白了。内联和块添加连字符。因此，本质上面具有行内元素的性质和块元素的性质。它支持宽度和高度。widthheight可以随意给，相当于上面的盒子模型。上、下、左、右外边距值都是有效的，但是不能像block那样用auto居中。margin:0auto,有同学想居中怎么办？？？？这时候就利用了inline的性质，给父元素设置了一个text-align:center（说说这个margin:auto怎么理解不生效，inline元素的话是由多个in组成的-line元素，auto一般表示100%，使用block时，100%左右两边居中，但是当auto居中时，多个inline元素不能放在中间，所以不能beusedandisinvalid.)tags之间有解析空格：处理方式和inline一样，上下左右padding生效，同样占用空间（这是和inline的区别）。参考上面的盒子模型可以理解，img标签可以理解为inline-block，但是img是一个inline元素（怎么回事？？）如果不设置宽高，inline的宽高-block将被inline-blco的内容扩展k如果使用last属性没有设置内容，可以通过里面的元素展开。还是很头疼。每次做一个小demo（case），因为1px和2px的测量误差，内容会换行或者使用调试平台。是不是调整的刚刚好？这时候就可以利用宽高从内容上展开。首先设置最外层的大框显示：inline-block。然后把你需要的元素标签/元素放在里面，设置marginpadding值即可。最外面的大盒子总是会被拉长。全部完成后，你可以打开调试器看看你的盒子有多大，然后设置一个固定的宽度值或者改回display:blockthenblock，inline-blockheight也是内容支持的，所以也可以先不设置（-->这里有图文）
