在设计网页时,能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用Div+CSS对页面元素进行定位的方法。

Div是HTML中指定的专门用于布局设计的容器对象

Div是CSS布局的核心对象。

Div本身与样式没有任何关系,样式需要编写CSS来实现,因此Div对象应该说从本质上实现了与样式的分离。(最终样式由CSS来完成)

无论是多么复杂的布局方法,都可以使用Div之间的并列与嵌套来实现。

为了实现内容与表现的分离,不应当将align对齐属性与style行间样式表属性编写在Div标签中,因此,Div代码只可能有以下两种形式:

      <div id="id 名称">内容</div>

      <div class="class 名称">内容</div>

CSS布局定位

    CSS排版首先将页面在整体上进行<Div>标记的分块,然后对各个块进行CSS定位,最后在各个块中添加相应的内容。通过CSS排版的页面,更新

  十分容易,甚至是页面的拓扑结构,都可以通过修改CSS属性来重新定位。

  1. 浮动定位

      浮动定位是CSS排版中非常重要的手段。

      浮动的框可以左右移动,直到其边缘碰到包含框或另一个浮动框的边缘。

          属性:float      可用值:none / left / right

      浮动定位会有一些特殊情况(包含框无法容纳……)

  2. position定位

      position指定块相对于其父块的位置和相对于它自身应该在的位置。

          属性:position

          可用值:

              relative    相对    对象不可层叠(在正常文档流中偏移位置)

              absolute    绝对    其层叠通过 z-index 属性来定义(将对象从文档流中拖出)

              fixed       悬浮    使元素固定在屏幕的某个位置(不随滚动条的滚动而滚动)

      1. 相对定位:

          无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致覆盖其他框。

      2.绝对定位:

          绝对定位使元素的位置与文档流无关,因此不占据空间。

          简单地说,使用了绝对定位之后,对象就浮在网页的上面了。(z-index属性的值越大,框在堆中的位置就越高)

      3.悬浮定位:

          本质上与将其设置为absolute一样,只不过块不随着浏览器的滚动条向上或乡下移动。

    对于定位的主要问题是要记住每种定位的意义。相对定位是相对于元素在文档流中的初始位置,而绝对定位是相对于最近的已定位的父元素(如果不存在

  已定位的父元素,那就相对于最初的包含块)

    因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

使用Div + CSS布局页面的更多相关文章

  1. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  2. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  3. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  4. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  7. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  8. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  9. (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

随机推荐

  1. P2486 [SDOI2011]染色

    P2486 [SDOI2011]染色 树链剖分 用区间修改线段树维护 对于颜色段的计算:sum[o]=sum[lc]+sum[rc] 因为可能重复计算,即左子树的右端点和右子树的左端点可能颜色相同 多 ...

  2. Python3 ChromeDriver与Chrome版本映射表(更新至v2.43)

    Python3 ChromeDriver与Chrome版本映射表(更新至v2.43) ChromeDriver下载链接:http://chromedriver.storage.googleapis.c ...

  3. c++随机数及rand()的缺陷

    c++生成随机整数和浮点数如下: #include <random> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { ...

  4. 20145328《网络对抗技术》Final

    系内选拔赛write-up 1 信息隐藏 第一题图片藏东西,后缀名改txt,没有发现,改rar,发现压缩包内存在key.txt,解压提示存在密码,尝试使用修复,得到key.txt,打开获取flag,S ...

  5. 不明原因报错集中处理:Undefined

    1, NSGenericException错误 Terminating app due to uncaught exception 'NSGenericException', reason: '*** ...

  6. jQuery 中 $( ) 函数的用法总结

    摘要 jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象 $又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用 如何自 ...

  7. HDU 3404 Switch lights(Nim积)题解

    题意:在一个二维平面中,有n个灯亮着并告诉你坐标,每回合需要找到一个矩形,这个矩形xy坐标最大的那个角落的点必须是亮着的灯,然后我们把四个角落的灯状态反转,不能操作为败 思路:二维Nim积,看不懂啊, ...

  8. SQL 事务(Transaction)

    1.概念 指访问并可能更新数据库中各种数据项的一个程序执行单元(unit)由多个sql语句组成,必须作为一个整体执行这些sql语句作为一个整体一起向系统提交,要么都执行.要么都不执行 语法步骤:开始事 ...

  9. Linux下通过命令行mail发送e-mail

    找到配置文件/etc/mail.rc添加如下行 # vi /etc/mail.rc set from=@qq.com set smtp=smtp.qq.com set smtp-auth-user= ...

  10. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...