div布局

1、    布局原则:    从上到下、从左到右、从大到小

2、    盒子模型:

①宽高:    width、height

②margin（外边距）：

margin(外边距):

margin-top:

margin-bottom:

margin-right:

margin-left:

例：

margin:10px,20px;  (上，右) 

margin:10px,20px,30px;(上，右，下)

顺时针方向，没有的取对面

 

③border（边框）：

border三要素：宽、形状、颜色

例：border: 20px solid green;

单独设置某方向的边框：

border-top:

border-bottom:

border-right:

border-left:

也可单独设置三要素之一

 

④padding（内边距）：和margin类似，有：

padding-top:

padding-bottom:

padding-right：

padding-left：

 

3、盒子大小：一个盒子有margin，border，padding，实占空间多少？

竖直方向：height+

padding-top+padding-bottom+

border-top+border-bottom+

margin-top+margin-bottom

水平方向：width+

padding-right+padding-left+

border-right+border-left+

margin-right+margin-left

 

4、浮动（float）：

①浮动概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，float定义元素在哪个方向浮动。

用法：

float:   none    不浮动

float:   left       向左浮

float:   right    向右浮

②清除（clear）浮动：

clear:   none    允许左右都可以有浮动

clear:   both    不允许有浮动

clear:   left      不允许左边有浮动

clear:   right    不允许右边有浮动