css定位和布局属性－金锄头文库

资源描述

《css定位和布局属性》由会员分享，可在线阅读，更多相关《css定位和布局属性（67页珍藏版）》请在金锄头文库上搜索。

1、CSS定位和布局属性,第13章,13.1 CSS定位属性,13.2 CSS布局属性,13.3综合案例幼儿园页面设计,CSS盒子布局和定位,本章学习目标：（1）理解网页中BOX的正常流向。（2）会使用top、bottom、right和left属性配合position属性定义偏移量。（3）掌握CSS元素的定位方法，重点掌握static、relative和absolute定位，理解fixed 和 sticky定位。（4）盒子发生堆叠时，会使用z-index控制堆叠次序。（5）理解盒子内容的裁切。（6）能控制盒子的可见性和溢出方式。（7）能够使用display改变常见元素的显示方式。（

2、8）能够使用float和clear控制浮动定位。,13.1 CSS定位属性,CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。,13.1.1 正常流向,正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。在正常流向中，块级元素盒子

3、会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。,【例13-1】正常流向（13-1.html）示例,部分代码如下：,div width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; #div1 background:#ba9578; color:#FFF; #div2 background:#cef091; color:#000; #div3 background:#70c17f; color:#FFF; ,13.1.2 定位偏移属性t

5、e | sticky;,定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。,静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个

6、距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。,1. 相对定位relative,【例13-2】使用相对定位（13-2.html）,部分代码如下：, div width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; #div1 position:static; /*静态定位*

7、/ background:#ba9578; color:#FFF; #div2 position:relative; /*相对定位*/ top:60px; left:30px;,background:#cef091; color:#000; #div3 position:static; /*静态定位*/ background:#70c17f; color:#FFF; b border:1px solid red; .b2 position:relative; /*相对定位*/ left:80px; top:60px; , div1 div2 b元素1 b元素2 b元素3 div3 ,绝对定位a

8、bsolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。绝对定位的盒子不存在正常流向问题，也不会影响到正常流向中的其它BOX。,2. 绝对定位absolute,【例13-3】使用绝对定位（13-3.html）,部分代码如下：, div width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; t

9、ext-align:center; #div1 position:absolute; /*绝对定位*/ top:100px; right:30px; background:#ba9578; color:#FFF; #div2 position:relative; /*相对定位*/ top:60px;,left:30px; background:#cef091; color:#000; #div3 position:static; /*静态定位*/ background:#70c17f; color:#FFF; b border:1px solid red; .b2 position:absol

10、ute; /*绝对定位*/ left:-20px; top:120px; , div1 div2 b元素1 b元素2 b元素3 div3 ,固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。,3. 固定定位fixed,【例13-4】使用固定定位（13-4.html）,部分

11、代码如下：, body height:700px; header position:fixed; width:100%; height:100px; top:0px; right:0px; bottom:auto; left:0px; border:1px dashed black; color:#FFF; background-color:#5f6062; text-align:center; line-height:3; ,aside position:fixed; width:200px; height:auto; top:100px; right:auto; bottom:100px;

12、 left:0px; border:1px dashed black; background-color:#f6edc6; text-align:center; line-height:3; ,section position:fixed; width:auto; height:auto; top:100px; right:0px; bottom:100px; left:200px; border:1px dashed black; background-color:#fde8ed; text-align:center; line-height:3; ,footer position:fixe

13、d; width:100%; height:100px; top:auto; right:0; bottom:0; left:0px; border:1px dashed black; background-color:#f0ede4; text-align:center; line-height:3; ,sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果。 sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效

14、果。,4. 吸附定位sticky,【例13-5】使用吸附定位（13-5.html）,部分代码如下：, div width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; #div1 position:static; /*静态定位*/ background:#ba9578; color:#FFF; #div2 position:sticky; /*吸附定位*/,top:140px; left:100px; background:#cef091; color:#000

15、; #div3 position:static; /*静态定位*/ background:#70c17f; color:#FFF; div1 div2 div3 ,13.1.4 分层呈现z-index,基本语法：,z-index: auto | 数字;,语法说明： auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。,【例13-6】设置堆叠次序（13-

16、6.html）,部分代码如下：, div position:staic; width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; #div1 position:absolute; /*绝对定位*/ z-index:2; /*堆叠次序*/ top:0px; left:0px; background:#ba9578; color:#FFF; ,#div2 position:absolute; /*绝对定位*/ z-index:6; /*堆叠次序*/ top:70px; left:50px; background:#cef091; color:#000; #div3 position:absolute; /*绝对

展开阅读全文