《css布局讲解》由会员分享，可在线阅读，更多相关《css布局讲解（19页珍藏版）》请在金锄头文库上搜索。
1、4.3 CSS布局基础 表现和结构相分离n1.内容 内容就是页面实际要传达的真正信息，包含数据 、文档或者图片等。注意这里强调的“真正”，是 指纯粹的数据信息本身。比如一个不包含辅助的 信息,比如导航菜单、装饰性图片等。n2.结构(Structure) 可以看到上面的文本信息本身已经完整。但是混 乱一团，难以阅读和理解，我们必须给它格式化 一下。把它分成标题、作者、章、节、段落和列 表等。 4.3 CSS布局基础n3.表现(Presentation)虽然定义了结构，但是内容还是原来的样式没有 改变，例如标题字体没有变大，正文的颜色也没 有变化，没有背景，没有修饰。所有这些用来改 变内容外观的东
2、西，我们称之为“表现”。n4.行为(Behavior) 行为就是对内容的交互及操作效果。例如，我们 最熟悉不过的JavaScript。使用JavaScript我们可 以使内容动起来，可以判断一些表单提交，可以 相应你的一些操作。4.3 CSS布局基础 所有HTML和XHTML页面就是由“结构 、表现和行为”这三方面组成的。抽象 一点理解，内容是基础层，然后是附 加上去结构层和表现层，作后再对它 们做点“行为”：4.3 CSS布局基础 传统的HTML方法 忆江南4.3 CSS布局基础 web标准推荐的方法忆江南 唐.白居易 江南好. 772846 ，字乐天. 据乐府杂录. 此词写江南春色.4.3
3、 CSS布局基础 用于布局的时候，它是一个控制表现的标 签。混杂在内容和结构中，使我们的内容数据无 法再利用。结构与表现相分离带来的好处主要有 ： 数据的多样显示。通过不同的样式表适应不同的 设备，做到内容与设备无关 保持整个站点的视觉一致性变得非常简单，修改 样式表就可以轻松改版; 由于结构清晰，数据的集成、更新和处理更加方 便灵活； 更有意义的搜索。 4.3 CSS布局基础 调用样式表 在符合web标准的设计中，我们使用外部调用法 ，好处不言而喻，你可以不修改页面只修改.css 文件而改变页面的样式。如果所有页面都调用同 一个样式表文件，那么改一个样式表文件，可以 改变所有文件的样式。4.
4、3 CSS布局基础 CSS盒模型4.3 CSS布局基础 CSS盒模型nCSS定义所有的元素都可以拥有像盒子一样的外形和平面 空间，即都包含边界、边框、补白、内容区域、背景（包 括背景色和背景图片），这就是盒模型，它规范了网页元 素的显示基础。n在元素内容与边框之间的空白区域，被称为元素的补白 (padding)，或内边距；在元素边框之外的空白区域，称为 边界(margin)，或外边距。n盒模型的提出，使网页布局完全摆脱了表格的束缚，任何 元素对象，无论是传统的段落、列表、标题、图片，还是 标准布局中的div和span新元素，都可以通过自己的属性 来实现布局，设置模型显示效果4.3 CSS布局基
5、础 CSS盒模型所有的网页元素都可以包括四个区域：内容区、补白区 、边框区和边界区。在CSS中，可以增加补白、边框和边 界的区域大小，而不影响内容区域。#box height:160px; width:260px; margin:60px; padding:60px; border:solid 60px #aaa; background-image:url(box.jpg); background-color:#CC99CC; 4.3 CSS布局基础 CSS盒模型margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-ri
6、ghtborder-topborder-bottompadding-leftpadding-rightpadding-toppadding-bottomwidthheight4.3 CSS布局基础 盒模型的类型CSS把盒模型分为两种基本形态：Block（块状） 和Inline（内联或行内）。n在默认状态下，块状元素的宽度为100%，而且后 面隐藏附带有换行符，使块状元素始终占据一行。如：div、p 、table 、ul 、li 、ol 、dl 、h1- h6n内联元素没有高度和宽度，因此也就没有固定的形 状，定义它的width和height属性无效。内联元素可 以在行内自由流动，但它会遵循盒模
7、型的基本规则 ，可以定义边界、补白、边框及背景。如：a 、b 、em 、span 、img4.3 CSS布局基础n盒模型的显示类型可以使用display属性来定义。任 何元素都可以通过display属性改变默认显示类型。 display属性的选项值如下：block：块状显示，在元素后面添加换行符，也就 是说，其他元素不能在其后并列显示。none：隐藏显示，此声明不会为被隐藏的元素保 留位置。inline：内联显示，在元素后面删除换行符，多个 元素可以在一行内并列显示。list-item：具有块状特征的列表项目显示，可添加 可选项目标志。4.3 CSS布局基础 布局模型布局模型与盒模型一样都是C
8、SS最基本、最核心的 概念，CSS包含3种基本的布局模型：Flow、Layer 和Float 1. Flow Model(流动模型)流动模型是HTML默认布局模型，在此模型中，元 素本身是被动的，随着文档流自上而下按顺序动态 分布。流动布局只能根据元素排列的先后顺序来决 定分布位置，要改变某个元素的位置，只能通过改 变它在HTML文档流中的分布位置。同时这种模式 又是活动的，它的位置随时发生变化，当我们在一 个元素前面添加另一个元素，它的位置会向后推移 。4.3 CSS布局基础2. Layer Model(层模型)Layer将页面的内容引入层，希望像图像编辑器那 样精确定位网页元素，摆脱HTM
9、L元素自然流动带 来的弊端。然而网页永远是一个活动的窗口，没法 预知不同浏览者所使用的窗口大小，同时大部分网 页本身的大小也是无法预测和控制的。3. Float Model(浮动模型)浮动模型汲取了前两者的优点，希望在流动和固定 之间取得一个平衡，实现网页布局的自适应能力。4.3 CSS布局基础 流动布局模型n流动布局模型的特征任何没有具体定义定位方式的元素，默 认都呈现流动布局模式 块状元素都会在所处的包含元素内自上而 下按顺序垂直延伸分布 内联元素都会在所处的包含元素内从左到 右水平分布显示。4.3 CSS布局基础 层布局模型层布局模型中最核心的技术是元素的定位类型。该属性取值可以包括：s
10、tatic、absolute、fixed和 relative static：不定位，遵循默认的流动模型。 absolute：绝对定位，将元素从文档流中拖出来， 使用leftrighttopbottom属性相对于其最接近的一个 具有定位属性的父包含块进行绝对定位。 fixed：固定定位。元素本身是固定的，不会随浏览 器窗口的滚动条滚动而变化。 relative：相对定位。通过leftrighttopbottom属性 确定元素在正常文档流中的偏移位置。div position:absolute; 4.3 CSS布局基础n绝对定位包含块CSS包含块是绝对定位的基础。包含块是对绝对定 位元素提供坐标偏
11、移和显示范围的参照物，即确定 绝对定位的偏移起点的参考。默认状态下，body元 素就是一个大的包含块，所有绝对定位的元素都是 根据窗口来确定自己所处的位置和百分比大小显示 的。但是如果我们定义了某个元素为包含块后，对 于包含的绝对定位元素来说，就会根据最接近的具 有定位功能的上级包含元素来决定自己的显示位置 。一般情况下，用position属性来定义任意包含块， position属性有效取值包括absolute、fixed、 relative4.3 CSS布局基础 浮动布局模型任何元素在默认情况下都是不能浮动的，但是可以 用CSS定义为浮动。n浮动布局模型的特征 任何定义为float的元素都会自动被设置为一个块状 元素显示，这样就可以为浮动元素定义width和 height属性。 浮动模型不会与流动模型发生冲突。当文档定义为 浮动布局时，它在垂直方向上应该还处于文档流中 ，既不会脱离正常的文档流任意浮动。 浮动元素始终位于包含元素内，不会游离于外，或 破坏包含元素div float:left; /* 取值还包括right、none */
