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。盒状模型用于描述它们之间的层次、关系与相互的影响。