您的位置：首页 > 其它

盒子概念和DiV布局

2015-09-01 16:03 369 查看

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层

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div布局盒子基本概念

相关文章推荐

新的分享

章节导航