盒子模型布局及部分边框美化学习

对于盒子模型，是网页布局里面，文本流布局经常用到的一种布局方式。关于文本流布局，我们先来讨论一下盒子模型，便于更好的理解。
首先，我们先来看看一个盒子的组成，一个盒子，由外而内，有盒子的外边框 margin，我们可以在设置的时候对当个的距离进行设置时，需要增加左右上下等（top right bottom left），组合值也是按照这个顺序书写。再往盒子里面走的，即是盒子的边框，对于边框，我们可以对边框样式 边框颜色 边框大小。当然，对于边框，我们应该还有边框是否倒角，同时，我们也可以把box-shadow应用上去，整个边框设置就会比较好看。当然，在有的时候，我们需要取消重合的边框，这个就需要我们灵活运用属性。在往盒子内部走，我们就能发现盒子内容和边框之间也有一个距离，我们把这个距离叫做padding。我们可以通过设置父元素的padding值，等同于设置子元素的margin值。再往内部走，就是整个盒子的内容。对于盒子的分类，我们目前有两种盒子的类型，一种是IE的盒子模型，IE盒子模型包括有边框以内的所有元素，而w3c的模型则是包含内容。
在边框以外，有一个轮廓，我们可以对轮廓的样式 、颜色、宽度、和偏移量进行设置。
对于边框，我们一般可以有边框倒角，对于倒角而言对4个角任意一个角进行倒角，如，左上角为border-radius-top-left；通过不同的形状，可以得到不同的效果。
对于背景而言，我们有background-color/size /position/image/repeat/attachment/origin/clip等等，我们可以得到各种背景样式，当然，我们以后可能会对position用得比较多。
另外，浅谈一下我们在布局过程中可能存在的是不想出现的间隙，这些东西一般和我们的转义字符有关。当字体大小不为0时，他们会占据一定的空间。还有，我们的margin也可以应用于一些float的元素。