在设计网页时,能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用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. 04: 使用BeautifulSoup封装的xss过滤模块

    目录: 1.1 xss攻击简介 1.2 xss攻击解决方法 1.1 xss攻击简介返回顶部 1.简介 1. 跨站脚本(cross site script)为了避免与样式css混淆,所以简称为XSS. ...

  2. Ubuntu18.04安装Openssl-1.1.1

    1.查看版本 Ubuntu的版本是18.04.使用openssl version命令查看openssl版本,可以看到Ubuntu自带了openssl-1.1.0版本,因此安装新版本需要替换旧版本. 2 ...

  3. MVC 视图的简单学习

    视图学习第一阶段:http://www.cnblogs.com/meetyy/p/3464432.html 视图学习第二阶段:http://www.cnblogs.com/meetyy/p/34665 ...

  4. apache2.4配置多个端口对应多个目录

    文件 /usr/local/apache/conf/extra/httpd-vhosts.conf 的内容如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 NameVir ...

  5. luogu4473 BZOJ2143 2011[国家集训队]飞飞侠

    题目戳这里 有问题可以在博客@ 应该还会有人来看吧,嘻嘻 正题: 题目大意: 题目很清楚,就是一个点有一定的范围,会有一定的花费 求三个点中的任意两个点到另一个点的最小花费 (麻麻教育我千万读好题目( ...

  6. RHEL7--linux系统启动流程与故障排除

    一.Linux启动过程 MBR保存着系统的主引导程序(grub 446字节,分区表64字节),启动过程就是把内核加载到内存. 启动的顺序: 1.BIOS: 2.BIOS激活MBR: 3.MBR中的引导 ...

  7. Educational Codeforces Round 27 A B C

    A. Chess Tourney   Berland annual chess tournament is coming! Organizers have gathered 2·n chess pla ...

  8. guulp配置编译ES6

    下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js  gulp配置文件 var gulp = require(&quo ...

  9. 解决 Github:failed to add file / to index 问题

    参考: Github:failed to add file / to index 解决 Github:failed to add file / to index 问题 在通过Github for Ma ...

  10. 磁条卡,IC卡,ID卡,信用卡芯片卡,信用卡磁条卡 等等的区别

    1.条码卡:该卡卡面上有一串条码,通过扫描枪或者相应的条码读卡器读出该条码卡的卡号.根据条码的不同又分为39码等其它码.条码卡仅仅是一个编号,不存蓄其它内容.特点:价格便宜类似磁卡. 2.磁条卡:类似 ...