在网页设计中，能否控制好各个模块中在页面中的位置是非常关键的，与传统的表格定位不同，css+div定位方式更加的灵活，本篇博客将为大家介绍css+div的布局与定位。

一.盒子模型

由图可以看出 盒子模型的范围包括 margin、border、padding、content。　

需要指出的一点是，在ie中与firefox中盒子模型表示略有不同：

IE 盒子模型的 content 部分包含了 border 和 pading。

而firefox中的盒子模型的content部分不包含border和padding。

二、元素定位

1、float定位

float为浮动的意思，在css布局中有很重要的作用，这里举一个例子。

<span style="font-size:18px;"><html>

<head>

<title>float属性 clear</title>

<style type="text/css">

<!--

body{

	margin:5px;

	font-family:Arial;

	font-size:13px;

}

.block1{

	padding-left:10px;

	margin-right:10px;

	float:left;					/* 块1向左浮动 */

}

h3{

	background-color:#a5d1ff;	/* 标题的背景色 */

	border:1px dotted #222222;	/* 标题边框 */

	 clear:left;					/*清除float对左侧的影响 */

}

-->

</style>

   </head>

<body>

	<div class="block1"><img src="building2.jpg" border="0"></div>

	<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>

	<h3>CSS的概念</h3>

	<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>

</body>

</html></span>

此时结果

如果将float:left注释掉结果如下：

2、position定位

a、position:static|无定位

position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位

<span style="font-size:18px;">#div-1 {

 position:static;

}</span>

b、position:relative|相对定位

使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。

如果要让div-1层向下移动20px,左移40px:

<span style="font-size:18px;">#div-1 {

 position:relative;

 top:20px;

 left:40px;

}</span>

c、position:absolute|绝对定位

使用绝对定位的层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。

三、z-index定位：

z-index属性用于定位重叠时的上下位置。

<span style="font-size:18px;"><html>

<head>

<title>z-index属性</title>

<style type="text/css">

<!--

body{

	margin:10px;

	font-family:Arial;

	font-size:13px;

}

#block1{

	background-color:#fff0ac;

	border:1px dashed #000000;

	padding:10px;

	position:absolute;

	left:20px;

	top:30px;

	z-index:1;					/* 高低值1 */

}

#block2{

	background-color:#ffc24c;

	border:1px dashed #000000;

	padding:10px;

	position:absolute;

	left:40px;

	top:50px;

	z-index:0;					/* 高低值0 */

}

#block3{

	background-color:#c7ff9d;

	border:1px dashed #000000;

	padding:10px;

	position:absolute;

	left:60px;

	top:70px;

	z-index:-1;					/* 高低值-1 */

}

-->

</style>

   </head>

<body>

	<div id="block1">AAAAAAAA</div>

	<div id="block2">BBBBBBBB</div>

	<div id="block3">CCCCCCCC</div>

</body>

</html></span>

结果如下：

以上为css+div的布局与定位，下篇博客我将为大家介绍，css与javascript，css与jquery，css与ajax的混合运用。

css+div网页设计（二）--布局与定位的更多相关文章

  1. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  4. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  5. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  6. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  7. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  8. 读CSS DIV网页样式与布局心得体会

    一.首先根据网页设计图拆分网页的整体结构 二.在html页面用DIV划分出结构块 三.再根据设计图在各个大<DIV>块中加入对应的小<DIV>块或者段落<P>,表单 ...

  9. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

随机推荐

  1. POJ1651Multiplication Puzzle（区间DP）

    比较好做的区间DP 状态转移方程:DP[i][j] 表示区间[i,j]最小的乘积和. DP[i][j] = MIN{DP[i][k-1]+DP[k+1][j] + a[k]*a[i-1]*a[j+1] ...

  2. Java 理论与实践: 流行的原子——新原子类是 java.util.concurrent 的隐藏精华（转载）

    简介: 在 JDK 5.0 之前,如果不使用本机代码,就不能用 Java 语言编写无等待.无锁定的算法.在 java.util.concurrent 中添加原子变量类之后,这种情况发生了变化.请跟随并 ...

  3. iOS Ping++前端集成支付

    直接上代码 /* 获取订单charge 1.buyerId  买家ID 2.sellerId  卖家ID 3.liveId    直播间ID 4.goodCount 商品数量 5.status    ...

  4. EasyUI ComboBox默认值

    combobox数据加载完后设置默认值 $('#ck').combobox({ url: '/External/GetAllCk', valueField: 'Ddbh', textField: 'D ...

  5. Flex坐标

    flash和flex针对不同的目的,提供了3种不同的坐标系. 全局的就是(stage级别的) 本地坐标系(组件级别的) 内容坐标系(相对于本地坐标系说的) 这些坐标系的点是可以转换的,并且有相应的方法 ...

  6. 四月二十五日，bugzilla for CentOS 安装

    Bugzilla for CentOS 5.4 制作人,陈浩 时间:2014.4.25 原创 文件夹 Bugzilla for CentOS 5.4 一. 装系统 1) 新建虚拟机  15G硬盘,51 ...

  7. 应该把script标签放在哪里

    应该把script标签放在哪里 目录: 1script标签放在底部的好处 2应该放在底部的哪里   概述: 如果在页面中写JS的话,那必然会用到script标签,理论上script标签放在哪里都是可以 ...

  8. [AngularJS] Adding custom methods to angular.module

    There are situations where you might want to add additional methods toangular.module. This is easy t ...

  9. [Express] Level 2: Middleware -- 2

    Logging Middleware Help finish the following middleware code in the logger.js file: On the response  ...

  10. install root certificate failed, Please run as administrator/root/sudo

    在钥匙窜中导入  证书就可以了