使用DIV+CSS对网页进行标准化布局前，除了要掌握盒子模型，还要掌握定位和浮动两个比较重要的概念，它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面，每个虚线框代表一个盒子模型。

图1  多个盒子定义页面布局

虽然CSS的样式属性非常多，但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛，可以控制元素的平面或空间位置，以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型，例如将display属性设置为none，则这个区块框及其所有内容就不再显示。通过将display属性设置为block，可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。

表1  常见的参与页面布局的CSS属性

在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示：

IT兄弟连 HTML5教程 和页面布局有关的CSS属性的更多相关文章

  1. IT兄弟连 HTML5教程 响应式布局实例

    在学习Media Queries模块前,先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用.在本例中,使用HTML5的结构元素定义了5个盒子.当浏览器窗口尺寸不同时 ...

  2. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  3. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  4. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  5. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  6. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  7. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  9. IT兄弟连 HTML5教程 了解HTML5的主流应用1

    在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML ...

随机推荐

  1. ASI中POST请求和文件下载

    //POST请求 1 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // 1.URL NSURL *url = ...

  2. 对于web前端的理解

    对于web前端的理解 其实写这篇文章的首要目的是为了准备一道面试题——你对前端的看法是什么?本文不会仅从技术角度去考虑这个问题,还会依据这个社会的变革去讨论这个问题.本文仅代表个人观点,不喜勿喷. W ...

  3. VMware下载及安装使用方法

    一.VMware的介绍: 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统.DesktopVirtualBox,虚拟系统通过生成 ...

  4. 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...

  5. 使用蓝图构建Flask项目目录

    蓝图构建项目目录 什么是蓝图 一个应用中或跨应用制作应用组件和支持通用的模式 蓝图的作用 将不同的功能模块化 构建大型应用 优化项目结构 增强可读性,易于维护 蓝图构建项目目录 定义蓝图 app/ad ...

  6. 鲲鹏凌云，并行科技Paramon通过华为云鲲鹏云服务兼容性认证

    随着Cloud2.0时代到来,5G技术开始应用普及,超算云服务需求不断升级,业务多样性.数据多样性不断延伸.2019年7月,华为召开鲲鹏计算产业发展峰会,依托在联接领域坚实的基础,华为未来将着力打造智 ...

  7. 宜信SDL实践：产品经理如何驱动产品安全建设

    一.序言 本文从产品经理的角度出发,对产品经理的安全职责.产品驱动安全的内涵.工作内容.工作方法.所需安全资源.以及产品经理的安全工作量进行了分析.希望所有产品经理在没有心理负担的情况下,有目标.有方 ...

  8. ios高效开发－正确的使用枚举（Enum）

    前言 Enum,也就是枚举,从C语言开始就有了,C++.Java.Objective-C.Swift这些语言,当然都有对应的枚举类型,功能可能有多有少,但是最核心的还是一个—规范的定义代码中的状态.选 ...

  9. HihoCoder1466-后缀自动机六·重复旋律9

    小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段字符构成的字符串. 现在小Hi已经不满足于单单演奏了!他通过向一位造诣很高的前辈请教,通过几周时间学习了创作钢琴曲的基本理论, ...

  10. BZOJ2440完全平方数（莫比乌斯反演）

    Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱. 这天是 ...