使用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. Dropzone.js拖拽上传（简单示例）

    今天碰到一个需求,页面上有“点击上传”的按钮,点击可以执行上传事件,从桌面拖拽图片拖拽到任何地方,都可以执行上传,且不影响点击按钮事件.下面是简单示例: 简单示例如下: <!DOCTYPE ht ...

  2. Mac系统安装文件提示文件已损坏，打不开解决办法

    Mac系统安装文件提示文件已损坏,打不开解决办法: 修改系统配置:系统偏好设置 - 安全性与隐私 - 任何来源”.如果没有“任何来源”这个选项,是因为你的系统是macOS Sierra 10.12,苹 ...

  3. 大规模机器学习在LinkedIn预测模型中的应用实践

    预测模型在 LinkedIn 的产品中被广泛应用,如 Feed.广告.工作推荐.邮件营销.用户搜索等.这些模型在提升用户体验时起到了重要的作用.为了满足建模需求,LinkedIn 开发并且开源了 Ph ...

  4. js-编程练习题-输出年月日以及练习字符串分割,检索,转换整数(int)

    这是在慕课网上看到的编程题-如有侵权,请联系本人删除. 当然:题是他们的,做题是我的...嘿嘿嘿 某班的成绩出来了,现在老师要把班级的成绩打印出来. 效果图: XXXX年XX月X日 星期X--班级总分 ...

  5. 学习ThinkPHP的第23天---门面、钩子与行为

    一.门面(facade) 门面在ThinkPHP中可以理解为一个代理商,有了它可以灵活的去使用其中的类. 二.钩子和行为 钩子也可以说是插件,就是程序运行到某个位置,我们用钩子把这个程序截住,去执行所 ...

  6. JavaScript基础3

    While循环 在指定条件为真时循环执行代码块.先确定条件再执行代码 语法 while(条件) { 需要执行的代码 } 条件中所用变量如果没有值,循环就不会停下,会导致浏览器崩溃: do...whil ...

  7. 移动开发在路上-- IOS移动开发系列 网络交互四（2）

    接着上次的讲,这次我们讲 网络请求的封装  打开创建的项目,让我们一起来继续完成他, 首先我们来创建一个NSobject 的文件 圈住出来的轻一点要注意.千万不要搞错了 创建好之后,开始编写代码, 我 ...

  8. MVC参数传递

    MVC参数传递 请求参数自动类型转换 JSP页面 form class="loginForm" action="/user/getUser" method=&q ...

  9. 记录一次VMware与xshell远程链接的总结

    VMware 与xshell链接 说在前面 用了一年多的virtualbox,虚拟机环境的配置算是理清了,可最近参加红帽培训,大家用的都是VMware,想想我也试试吧,刚好再熟悉一下,于是就捣鼓了很久 ...

  10. kubernetes-单机实验(入门)

    一.安装kubernetes   实验环境: centos7.0(建议使用7.5版本) 实验机器IP:192.168.1.4 安装方式:yum安装 需求环境:Tomcat+Mysql   1:关闭防火 ...