CSS---盒模型与布局

CSS盒模型的三个要素：边框、内边距、外边距

 

border

盒子的边框

 

padding

定义盒子的内边距（以内容为中心，与盒子边框的距离）

可以分别定义上下左右的边距值

 

margin

定义盒子的外边距（以盒子为中心，与页面边界的距离）可以分别定义上下左右的边距值

默认页面中，<body/>与页面具有一个默认的边距，可以调整<body/>与页面边界的距离

body {

margin: 0px;

}

 

 

漂浮

可以对区块间的相互的位置进行调整，控制区块的排列顺序

float:none|left|right

none:默认值。本对象不漂浮

left:紧跟着的区块将自动定位到后面(右边)

right:紧跟着的区块自动定位到前面(左边)

 

漂浮清除

clear:none|left|right|both

none:默认值，允许左右两边都可以有浮动对象

left:不允许左边有浮动对象，如果有，则不定位在其后面，保持不动

right:不允许右边有浮动对象，如果有，则不定位到其前面，保持不动

both:不允许左边和右边有浮动对象，如果有，保持不动

 

 

定位

position属性

可以让区块定位到页面的任意位置，比漂浮功能更强！

absolute:

该对象将中文档流中脱离出来。

相对于其最接近的一个最有定位设置(具有position属性)的父对象进行绝对定位。

如果不存在这样的父对象，则依据 body 对象，而其层叠通过 z-index 属性定义！

relative：

该对象没有从文档流中脱离。

虽然位置发生了偏移，但是其原本所在的位置仍然保留，紧随其后的区块不会去填补它的位置。