在网页设计中，能否控制好各个模块中在页面中的位置是非常关键的，与传统的表格定位不同，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. 使用struts2实现文件上传

    action中 private File file;//文件 private String fileFileName;//文件名字 固定格式name+FileName private String f ...

  2. 使用maphilight高亮显示map的指定area

    引用jquery.maphilight.js之后,调用如下方法: //obj参数是代表一个或者多个area的jQuery对象 function areaLight(obj) { var data = ...

  3. myeclipse中working Sets

    最近myeclipse中的项目太多了,看起来老不爽,查找还不方便,发现这个working Sets还是挺好用的 接下来的步骤,太简单了有木有,就不写了         0.0

  4. pycharm快捷键大全

    Python IDE PyCharm的快捷键大全1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + S ...

  5. Julien Nioche谈Apache Nutch 2的特性及产品路线图

    原文地址: http://www.infoq.com/cn/articles/nioche-apache-nutch2 开源的Web搜索框架Apache Nutch的2.1版本已于2012年10月5日 ...

  6. PostgreSQL中 AnyElement AnyArray AnynonArray的区别与联系

    http://www.postgresql.org/docs/current/static/extend-type-system.html#EXTEND-TYPES-POLYMORPHIC 先看一个例 ...

  7. ARM&Linux 下驱动开发第二节

    驱动文件:qudong.c,make生成qudong.ko文件,烧录到ARM板上 #include<linux/init.h> #include<linux/module.h> ...

  8. Python 存储模型

    1.Python彻底分离了对象和引用,可以认为内存中的对象都是不可修改的,每次修改引用,相当于在堆上重新创建一个对象,引用指向新对象. 2.对于数值和字符串,修改意味着引用指向一个新对象. 3.集合中 ...

  9. iOS 7 Pushing the Limits Notes - create a layer like notification center's or control center's background

    Problem: How to create a layer that looks like your notification center's or control center's backgr ...

  10. UVALive 4225 Prime Bases 贪心

    Prime Bases 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&a ...