网页ｃｓｓ层叠样式的高级知识点

　　　　　分享一下我自己对浮动和盒子模型的一点基础的理解。

　　　　　盒子模型：这个东西抽象一点可以看作一个快递盒，里面放了一样易碎品，快递员考虑到里面装的是易碎品的时候，我们就会里面放慢泡沫，防止发生各类快递件的碰撞，有几种常见的属性，外边距，就是这个快递盒子和其他的快递盒子之间的距离，内边距，就是易碎品和泡沫之间的距离，如果我们在实际的网页制作，想将文件的距离拉开，可以使用内边距（Ｐａｄｄｉｎｇ），但是，当我们使用内边距将文字隔开，这样会使得我们原来的盒子的体积发生变化，为了既能让文字分隔开又可以不将盒子的大小改变，我们就可以将原有的盒子的（宽和高减去（内边距乘以２）），为什么内边距要乘以２呢？因为这个内边距设置的默认的时候会在上下左右分别分布，你也可以自己设置指定的位置，ｐａｄｄｉｎｇ－ｔｏｐ，这个就是上内边距，使用了内边距就一定会改变原来的盒子的大小，所以我们需要用宽和高去减去内边距乘以２才能保持原来的盒子的大小！设置内边距的方法有多种，如：ｐａｄｄｉｎｇ　上下　左右，这个是只有两个值的时候。如ｐａｄｄｉｎｇ　上　左右　下，这个是有三个值的时候。如ｐａｄｄｉｎｇ　上　右　下　左，这个是有四个值的设置方式！大家可以自己试试！

 

　　　　　浮动：（ｆｌｏａｔ）我这里是用ｄｉｖ来讲解的，ｄｉｖ本事就是占用一行的元素，比如，你有多个ｄｉｖ一起写，你会发现这些ｄｉｖ它不能一行排，而是向下排的，这是为什么呢？这就是ｄｉｖ的特点，它自己的地盘就是横向的，所以我们不能直接横着排，只能将它抬起来，让他漂浮在空中，才好占用它原有的位置，浮动就是让改元素脱离地面，漂浮在空中，而原来排在下面的也会自动的占用原有ｄｉｖ的地方，浮动起来的ｄｉｖ都会按照ｄｉｖ的顺序排序，就和横向的排序。可以直接设置它是如何浮动的，向左还是向右边浮起来，（ｆｌｏａｔ：ｌｅｆｔ）向左浮动，（ｆｌｏａｔ：ｒｉｇｈｔ）向右浮动。记住，是将我们想要的ｄｉｖ浮动，不要写错了元素！