盒子概念和DiV布局

CSS盒子和DIV布局

  (2013-11-24 16:17:29)

转载▼

一、认识div层

1.<DIV>标记是一个区块容器标记，在标记之间可以放置其他一些HTML元素，例如p,h1,table,img,form等，然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰，不会影响其他HTML元素。

2.Div和span的区别

大部分div层都可以使用span标记代替

Div是一个块级元素，其包含的元素会自动换行；span标记是一个行内标记，其前后不会发生换行。

Div标记可以包含span标记元素，但span标记一般不包含div标记。

在网页设计中，对于较大的块可以使用div完成，而对于具有独特样式的单独HTML元素，可以使用span标记完成。

二、盒子模型

1.将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。

CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。

2.盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。

content（内容）：盒子模型中必需的部分，可以是文字、图片等元素

padding（空白）：也称页边距或补白，用来设置内容和边框之间的距离

border（边框）：可以设置内容边框线的粗细、颜色和样式等。

margin（边界）：外边距，用来设置内容与内容之间的距离

一个盒子的实际高度（宽度）是由content+padding+border+margin组成。

可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。

3.border边框：是内边距和外边距的分界线，可以分离不同的HTML元素

有3个属性，分别是边框样式（style）、颜色（color）和宽度（width）

4.padding内边距:定义内容与边框之间的距离。

padding: length

padding: padding-top | padding-right | padding-bottom | padding-left

5.margin外边距：用来设置页面元素与元素之间的距离，定义元素周围的空间范围

margin: auto | length

margin-top | margin-right | margin-bottom | margin-left

行内元素margin设置

非行内元素块之间margin设置

父子块之间的margin设置

其中子块的margin设置将会以父块的content为参考。

三、页面基本排版

CSS+DIV页面排版的思想是，首先在整体上进行<div>标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。

1.将页面用DIV分块 

首先要整体构思，将网页划分几个部分，采用的结构：上中下结构、左右两列结构等。

根据不同的部分，划分几个DIV块，用来存放不同的内容，大块中可以存放不同的小块

5个层：

1. container：布局容器，整个页面结构和内容都在这个容器中。

2. banner：页头部分

3. footer：页脚部分

4. content：页面主体部分，又包含了两个层：

     right层

     left层