在网页设计中，能否控制好各个模块中在页面中的位置是非常关键的，与传统的表格定位不同，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. HTML第五天学习笔记

    今天先是学习了基础的css样式 <html> <head> <title></title> <meta http-equiv = "co ...

  2. git免登录-ssh-key

    1.生成ssh key公钥与私钥 ssh-keygen -t rsa -C "youname@example.com" 需输入三个内容:第一个,生成公私钥的路径及名称:后两个输入回 ...

  3. 六分钟学会创建Oracle表空间的步骤

    经过长时间学习创建Oracle表空间,于是和大家分享一下,看完本文你肯定有不少收获,希望本文能教会你更多东西. 1.先查询空闲空间 select tablespace_name,file_id,blo ...

  4. 【java开发系列】— JDOM创建、改动、删除、读取XML文件

    有非常多中操作XML文件的方法,这里介绍一下JDOM的用法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每一个文档元素都是一个document元素的子节点. 而每一个子元 ...

  5. C++之类型转换

    说明:本文仅供学习交流,转载请标明出处,欢迎转载! 实现将A类的对象转换为B类对象的方法有3种:(A类对象<-------B类对象)    方法一:如果A为基类,B为派生类,能够将派生类的对象转 ...

  6. System.Runtime.InteropServices.COMException (0x800706BA) 解决方法

    提示“操作失败:无法获取MAC地址.”错误的解决方法. .NET 获取 MAC地址可能会遇到   System.Runtime.InteropServices.COMException (0x8007 ...

  7. vim编码相关配置

    主要与三个参数有有关 fileencoding 缩写:fenc 保存文件时所用的编码 set fenc 查看当前文件的编码 set fenc=utf-8 可以将当前文件转换为utf-8编码 filee ...

  8. hdu 5268 ZYB loves Score 水题

    ZYB loves Score Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  9. 推荐安卓开发神器（里面有各种UI特效和实例）

    网上有很多开源的安卓类库很好用,对于刚学习安卓的童鞋亦或者老鸟都是很好的学习对象. 我平时有关注开源代码的习惯,这么多年也搜集了不少精彩的源码. 到后来发现自己手机里装的都是几百个demo app,删 ...

  10. android安全：forceStopPackage对android的Alarm的影响

    也许一些使用alarmmanager做定时任务的同学遇到过这样的问题:设定alarm后,进入设置-->应用程序管理-->强行停止app后,定时任务就失效了. 简单的讲就是:force st ...