html --CSS的盒子模型

CSS的盒子模型1

◇边框(border)

上 border-top
下 border-bottom
左 border-left
右 border-right

◇内补丁(Paddings)：内边距

上  padding-top
下  padding-bottom
左  padding-left
右  padding-right

◇外补丁(Margins)：外边距

上  margin-top
下  margin-bottom
左  margin-left
右  margin-right

CSS的盒子模型2

☆CSS布局——漂浮

◇ float : none | left | right

none :　默认值。对象不飘浮
left :　文本流向对象的右边
right :　文本流向对象的左边

◇ clear : none | left | right | both--清除

none :　 默认值。允许两边都可以有浮动对象 
left :　 不允许左边有浮动对象 
right :　 不允许右边有浮动对象 
both :　 不允许有浮动对象

CSS的盒子模型3

☆CSS布局——定位

static :　 默认值。无特殊定位，对象遵循HTML定位规则。 
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。 
relative :　对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。

举例： 

 position: absolute;/*绝对定位之后，该盒子从文档流中拖出来(脱离文档流)， 不跟后续的盒子进行流布局。  它的位置由自己设置的left,top,right,bottom 等值决定，  这些值的参考边界是上级容器*/

position:relative; /*相对上级容器，相对定位。注意，该盒子没有脱离文档流即原来的地盘还占着的(空在那里)*/