使用Div + CSS布局页面
在设计网页时,能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用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布局页面的更多相关文章
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
随机推荐
- 04: 使用BeautifulSoup封装的xss过滤模块
目录: 1.1 xss攻击简介 1.2 xss攻击解决方法 1.1 xss攻击简介返回顶部 1.简介 1. 跨站脚本(cross site script)为了避免与样式css混淆,所以简称为XSS. ...
- Ubuntu18.04安装Openssl-1.1.1
1.查看版本 Ubuntu的版本是18.04.使用openssl version命令查看openssl版本,可以看到Ubuntu自带了openssl-1.1.0版本,因此安装新版本需要替换旧版本. 2 ...
- MVC 视图的简单学习
视图学习第一阶段:http://www.cnblogs.com/meetyy/p/3464432.html 视图学习第二阶段:http://www.cnblogs.com/meetyy/p/34665 ...
- 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 ...
- luogu4473 BZOJ2143 2011[国家集训队]飞飞侠
题目戳这里 有问题可以在博客@ 应该还会有人来看吧,嘻嘻 正题: 题目大意: 题目很清楚,就是一个点有一定的范围,会有一定的花费 求三个点中的任意两个点到另一个点的最小花费 (麻麻教育我千万读好题目( ...
- RHEL7--linux系统启动流程与故障排除
一.Linux启动过程 MBR保存着系统的主引导程序(grub 446字节,分区表64字节),启动过程就是把内核加载到内存. 启动的顺序: 1.BIOS: 2.BIOS激活MBR: 3.MBR中的引导 ...
- Educational Codeforces Round 27 A B C
A. Chess Tourney Berland annual chess tournament is coming! Organizers have gathered 2·n chess pla ...
- guulp配置编译ES6
下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js gulp配置文件 var gulp = require(&quo ...
- 解决 Github:failed to add file / to index 问题
参考: Github:failed to add file / to index 解决 Github:failed to add file / to index 问题 在通过Github for Ma ...
- 磁条卡,IC卡,ID卡,信用卡芯片卡,信用卡磁条卡 等等的区别
1.条码卡:该卡卡面上有一串条码,通过扫描枪或者相应的条码读卡器读出该条码卡的卡号.根据条码的不同又分为39码等其它码.条码卡仅仅是一个编号,不存蓄其它内容.特点:价格便宜类似磁卡. 2.磁条卡:类似 ...