第7章CSS布局基础综述.pptxVIP

第7章 CSS布局基础 烟台职业学院 孙俊琳 本章学习目标 熟悉div和span标签的用途 理解盒子模型 熟练掌握元素的定位和浮动 7.1 认识div和span div标签 span标签 div和span对象的区别 7.1.1 div标签 div标签和其他标签一样，具有一些属性，如id、class、align、style等，不过为了实现内容与表现的分离，不建议将align、style样式直接写在div标签里，只允许书写id和class属性。 div就是一个块状对象，显示模式为display:block。块状对象指的是当前对象显示为一个方块，默认显示状态下，它将占据整行，其他的对象只能在下一行显示。如果在布局中，两个div是前后关系，在页面中的效果就是上下关系。 div标签更多的用途是布局。现在的布局方式叫做DIV+CSS布局，div是这个布局方式的核心对象。在布局过程中，通过CSS实现对div的控制，达到布局的目的。 例7.1 div标签的用法。 7.1.2 span标签 span和div标签一样，作为容器被广泛在HTML中，它里面可以容纳各种HTML元素，从而形式独立的对象。 但是在显示方面与div不同，span对象属于XHTML中的另一种对象类型，即行间对象inline，其显示模式为display:inline。行间对象与块状对象相反，默认情况下，它允许下一个对象与之共享一行进行显示。 在排版方面，也因为span的显示特性，而常被用于区域内小元素的样式设定。在XHTML中，还有像stong标签、font标签等显示模式为display:inline。 例7.2 span标签的特性。 7.1.3 div和span对象的区别 div和span对象在网页设计中各有自己的用途。div肩负着页面大块布局及版式的所有工作，网页制作者会大量使用div来进行组合或者嵌套，实现网页的版式布局。span在页面中用得相对少得多，它主要用于网页中的一些细节，如文字、句子、导航上的小图标等。 div与span标记元素在网页上，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。 （1）区域内是否换行。div标记区域内的对象与区域外的上下文会自动换行，而span标记区域内的对象与区域外的对象不会自动换行。 （2）标记相互包含。div与span标记元素可以同时在网页上使用，一般在使用上建议用div标记元素包含span标记元素；span标记元素最好不包含div标记元素，否则会造成span标记元素的区域不完整，而出现断行的现象。 7.2 盒模型 盒模型是CSS控制页面时一个很重要的概念，只有很好地掌握盒模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。本节主要介绍盒模型的基本概念及浏览器在盒模型解释中的差异。 7.2.1 盒模型概述 所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。每个盒子都有边界、边框、填充和内容四个属性。每个属性都包括上、右、下、左四个部分，这四部分可同时设置，也可分别设置。在HTML文档中，就是由这些大大小小的盒子组成，所以说在Web世界里（特别是页面布局），盒模型无处不在。图7.3是盒模型的示意图。 7.2.1 盒模型概述 下面对盒模型中涉及到的概念做简单说明。 内容（CONTENT）就是盒子里装的东西。比如XHTML中的段落、表格、图片等网页元素，也可以是div对象。 填充（PADDING），即内边距，是内容和边框直接的距离。好比怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。填充只有宽度属性。 边框（BORDER）就是盒子本身了。 边界（MARGIN），即外边距，是盒子与盒子之间的距离。就像盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。 在 CSS 中，width 和 height 指的是内容区域（content）的宽度和高度。边界、边框、填充都是可选的，默认值是零。增加填充、边框和边界不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 7.2.2 盒模型与浏览器 盒模型是CSS的核心，现代Web布局设计简单来说就是一堆盒子的排列与嵌套。对于浏览器而言，各浏览器盒模型的组成结构是一致的，但是宽度和高度的计算方式却存在差别。 浏览器对盒模型有两种不同的诠释，一种来自W3C，一种来自IE。 1.标准W3C盒模型 首先介绍W3C盒模型，盒模型如图7.5所示。这里所说的标准，是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。 在W3C盒模型中，一个块级元素的总宽度按照如下的方程式计算： 总宽度=margin-le