使用的CSS属性displayblock;行内元素例如.PPT

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * （3）绝对定位（p150） 使用CSS属性position:absolute，在绝对定位下，元素的 位置相对于“最近”的“已定位”的“祖先”元素。即以他的包含框为基准进行定位 已定位：position属性被设置且不是static。 祖　先：从该元素开始一直到要节点的所有元素。 最　近：距该元素距离最短的一个节点。 标准流中盒子的位置关系 使用了绝对定位后盒子的位置关系(2) 使用了绝对定位后盒子的位置关系(1) 查看演示实例 注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值不会对绝对定位元素的位置造成影响。 绝对定位的偏移值是指从它的包含框边框内侧到元素的外边界之间的距离，如果修改元素的margin值会影响元素内容的显示位置。如果不设置绝对定位元素的偏移值，那么它位于未设置绝对定位属性时在标准流中的初始位置 绝对定位应用举例： （1）缺角的导航条 （2）中英文双语菜单 （3）CSS下拉菜单 相对定位和绝对定位的比较 相对定位 relative 绝对定位 absolute 定位基准 以它自己原来的位置为基准 以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准 原来的位置 还占用着原来的位置，未脱离标准流 不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样 三、浮动（float） 浮动模型是在布局中用到的最重要的概念之一 ，使用 float属性进行控制。浮动的盒子可以左右移动，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。 对一个元素应用float属性会自动将它转变成一个块级元 素，其它元素的内容在其周围流动。利用这个特性我们可 以让文字环绕在图片周围，形成Word中文字环绕的效果。 float可以取三个可能的值 left：向左浮动； right：向右浮动； none：消除浮动 1. 浮动的一些规则 ： （1）多个浮动元素不会相互覆盖，一个浮动元素的框 碰到另一个浮动元素的框后便停止运动。  （2）若包含的容器太窄，无法容纳水平排列的三个浮 动元素，那么其他浮动块向下移动。但如果浮动元素的高 度不同，那当它们向下移动时可能会被卡住。 2. 浮动的清除 使用CSS属性clear进行控制，它的值为： left： 清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 2. 浮动的浏览器解释 IE对浮动的解释与标准浏览器不同 （1） 当父元素未设置宽高时，，IE与firefox显示一致 当父元素设置宽高时，IE中的浮动占据外围容器控件，而firefox不占据 （IE8已经和firefox一致） （2）扩展外围盒子高度 （3）元素浮动但是其后面相邻元素不浮动（ IE8已经和firefox一致） 摄影师个人网站布局实例 (一)内容分析 内容决定网页形式 作品列表 名称 宣传语 简介 相关链接 联系方式 (二)HTML结构设计 根据内容设计出合理的XHTML文件结构。 不关心显示效果，完全从网页的内容出发。 (三)原型设计 (三) CSS设计(1) (三) CSS设计(2) 综合布局实例 本部分结束 * * * * * * * * * * * * 嵌套盒子在IE和Firefox中的不同显示 当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的最小高度为止；若同时设置了子块高度，IE将使子块高度自动压缩，直到能容纳内容的最小高度为止。而Firefox对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。 标准流下：用盒子属性制作导航条 CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项，是其他所有背景属性的缩写 其他背景属性的值的集合 background-color 设置背景颜色 rgb颜色 命名颜色 16进制颜色 background-image 设置背景图片 url background-repeat