css实现页面布局

css实现页面布局

 

外边距和内边距：

Margin:内边距，padding：外边距，这里我们要注意的是当有DIV嵌套的时候能用margin就不用padding因为padding要容易改变DIV的大小。

尺寸：

 定位：

 

  分类：

 

 说一下浮动和清理：

在定义DIV的时候默认是一个DIV就站行，无论大小，如果要让两或者两个以上的DIV显示在行就要用到flout他属性定义元素在哪个方向浮动。如图1,图2

 

<style>
		#div1{
			background-color:#99FF00;
			font-size:12px;	
			height:200px;
			width:200px;
			float:right;
		}
		#div2{
			background-color:#FF0000;
			font-size:12px;	
			height:200px;
			width:200px;
		}
</style>

 浮动需要注意的是如果第一个DIV的宽度过宽导致第二个DIV无法在同行，那么DIV2就会在下一行出现；

清理浮动：

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

CSS的盒状模型(Box Model)

我们把页面中可放置内容的窗口元素称为盒子BOX，每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。盒状模型用于描述它们之间的层次、关系与相互的影响。