css布局讲解优秀讲义.pptVIP

4.3 CSS布局基础 表现和结构相分离 1.内容 内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。 2.结构(Structure) 可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。 4.3 CSS布局基础 3.表现(Presentation) 虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。 4.行为(Behavior) 行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。 4.3 CSS布局基础 所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”： 4.3 CSS布局基础 传统的HTML方法 4.3 CSS布局基础 web标准推荐的方法 4.3 CSS布局基础 table用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有： 数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版; 由于结构清晰，数据的集成、更新和处理更加方便灵活； 更有意义的搜索。 4.3 CSS布局基础 调用样式表 link rel=stylesheet rev=stylesheet href=css/style.css type=text/css media=all / 在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。 4.3 CSS布局基础 CSS盒模型 4.3 CSS布局基础 CSS盒模型 CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景色和背景图片），这就是盒模型，它规范了网页元素的显示基础。 在元素内容与边框之间的空白区域，被称为元素的补白(padding)，或内边距；在元素边框之外的空白区域，称为边界(margin)，或外边距。 盒模型的提出，使网页布局完全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新元素，都可以通过自己的属性来实现布局，设置模型显示效果 4.3 CSS布局基础 CSS盒模型 所有的网页元素都可以包括四个区域：内容区、补白区、边框区和边界区。在CSS中，可以增加补白、边框和边界的区域大小，而不影响内容区域。 4.3 CSS布局基础 CSS盒模型 4.3 CSS布局基础 盒模型的类型 CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联或行内）。 在默认状态下，块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行。 如：div、p 、table 、ul 、li 、ol 、dl 、h1-h6…… 内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型的基本规则，可以定义边界、补白、边框及背景。 如：a 、b 、em 、span 、img…… 4.3 CSS布局基础 盒模型的显示类型可以使用display属性来定义。任何元素都可以通过display属性改变默认显示类型。display属性的选项值如下： block：块状显示，在元素后面添加换行符，也就是说，其他元素不能在其后并列显示。 none：隐藏显示，此声明不会为被隐藏的元素保留位置。 inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。 list-item：具有块状特征的列表项目显示，可添加可选项目标志。 4.3 CSS布局基础 布局模型 布局模型与盒模型一样都是CSS最基本、最核心的概念，CSS包含3种基本的布局模型：Flow、Layer和Float 1. Flow Model(流动模型) 流动模型是HTML默认布局模型，在此模型中，元素本身是被动的，随着文档流自上而下按