35.html5第一季第27章css传统布局下.pdfVIP

第27章 CSS传统布局[下] 学习要点： 1. 布局 2.box-sizing 3.resize 主讲教师：李炎恢 本课程由 北风网 和 瓢城Web 提供 本章主要探讨HTML5中CSS早期所使用的传统布局，很多情况下，这些布局方式还 是非常有用的。 一． 布局 在使用 布局前，我们先了解一下 属性的用法。CSS2提供了position属性来 实现元素的绝对 和相对 。 属性 说明 static 默认值，无 。 绝对 ，使用top、right、bottom、left absolute 进行位移。 相对 ，使用top、right、bottom、left relative 进行位移。 以窗口参考 ，使用top、right、bottom、 fixed left进行位移。 //绝对 ，脱离文档流，以窗口文档左上角0,0为起点 header position: absolute; top: 100px; left: 100px; } 所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有 文档的位置，好像浮在了空中一般，有了层次感。 由于绝对 脱离了文档流，出现层次概念。那么每个元素到底在那一层，会 覆盖。这时通过z-index属性来判定它们的层次关系。 属性 说明 auto 默认层次 数字 设置层次，数字越大，层次越高 //设置在100层上 header z-index: 100; } //以窗口参考 ，脱离文档流，会随着滚动条滚动而滚动 header position: fixed; top: 100px; left: 100px; } //相对 ，不脱离文档流，占位偏移 header position: relative; top: 100px; left: 100px; } 这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：1.既要脱 离文档流（这样元 间 相互 ）；2.以父元素，比如body或其他父元素为参考点 （这样可以实现区域性绝对 ）；3.还必须是绝对 。 //第一步，将需要设置参考点的父元素设置为相对，且不设置坐标 body position: relative; } //第二步，如果父元素设置了参考点，子元素的绝对 将以它为基准 header position: absolute; top: 0px; left: 0px; } 1.固定布局 //CSS部分