返回
CSS定位和布局属性PPT课件

CSS定位和布局属性PPT课件

ID：82711673

大小：3.77 MB

页数：69页

时间：2022-10-30

上传者：胜利的果实
CSS定位和布局属性PPT课件_第1页
CSS定位和布局属性PPT课件_第2页
CSS定位和布局属性PPT课件_第3页
CSS定位和布局属性PPT课件_第4页
CSS定位和布局属性PPT课件_第5页
CSS定位和布局属性PPT课件_第6页
CSS定位和布局属性PPT课件_第7页
CSS定位和布局属性PPT课件_第8页
CSS定位和布局属性PPT课件_第9页
CSS定位和布局属性PPT课件_第10页
资源描述：

《CSS定位和布局属性PPT课件》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

CSS定位和布局属性第13章

113.1CSS定位属性13.2CSS布局属性13.3综合案例——幼儿园页面设计

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

313.1CSS定位属性CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。

413.1.1正常流向正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。

5【例13-1】正常流向（13-1.html）示例

6部分代码如下：div{width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#000;text-align:center;}#div1{background:#ba9578;color:#FFF;}#div2{background:#cef091;color:#000;}#div3{background:#70c17f;color:#FFF;}

713.1.2定位偏移属性top、bottom、right、left基本语法：top:auto|长度|百分比;bottom:auto|长度|百分比;right:auto|长度|百分比;left:auto|长度|百分比;语法说明：auto：无特殊定位，根据HTML定位规则在文档流中分配。长度：用长度值来定义偏移量，可以为负值。百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。

813.1.3定位方式position基本语法：position:static|relative|absolute|fixed|center|page|sticky;定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS使用position属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。

9静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。1.相对定位relative

10【例13-2】使用相对定位（13-2.html）

11部分代码如下：div{width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#000;text-align:center;}#div1{position:static;/*静态定位*/background:#ba9578;color:#FFF;}#div2{position:relative;/*相对定位*/top:60px;left:30px;background:#cef091;color:#000;}#div3{position:static;/*静态定位*/background:#70c17f;color:#FFF;}b{border:1pxsolidred;}.b2{position:relative;/*相对定位*/left:80px;top:60px;}

12

div1

div2

b元素1b元素2b元素3

div3

13绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。绝对定位的盒子不存在正常流向问题，也不会影响到正常流向中的其它BOX。2.绝对定位absolute

14【例13-3】使用绝对定位（13-3.html）

15部分代码如下：div{width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#000;text-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:1pxsolidred;}.b2{position:absolute;/*绝对定位*/left:-20px;top:120px;}

16

div1

div2

b元素1b元素2b元素3

div3

17固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。3.固定定位fixed

18【例13-4】使用固定定位（13-4.html）

19部分代码如下：body{height:700px;}header{position:fixed;width:100%;height:100px;top:0px;right:0px;bottom:auto;left:0px;border:1pxdashedblack;color:#FFF;background-color:#5f6062;text-align:center;line-height:3;}aside{position:fixed;width:200px;height:auto;top:100px;right:auto;bottom:100px;left:0px;border:1pxdashedblack;background-color:#f6edc6;text-align:center;line-height:3;}

20section{position:fixed;width:auto;height:auto;top:100px;right:0px;bottom:100px;left:200px;border:1pxdashedblack;background-color:#fde8ed;text-align:center;line-height:3;}footer{position:fixed;width:100%;height:100px;top:auto;right:0;bottom:0;left:0px;border:1pxdashedblack;background-color:#f0ede4;text-align:center;line-height:3;}

21sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果。sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效果。4.吸附定位sticky

22【例13-5】使用吸附定位（13-5.html）

23部分代码如下：div{width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#000;text-align:center;}#div1{position:static;/*静态定位*/background:#ba9578;color:#FFF;}#div2{position:sticky;/*吸附定位*/top:140px;left:100px;background:#cef091;color:#000;}#div3{position:static;/*静态定位*/background:#70c17f;color:#FFF;}

div1

div2

div3

2413.1.4分层呈现z-index基本语法：z-index:auto|数字;语法说明：auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。

25【例13-6】设置堆叠次序（13-6.html）

26部分代码如下：div{position:staic;width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#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;/*绝对定位*/z-index:4;/*堆叠次序*/top:140px;left:100px;background:#70c17f;color:#FFF;}

2713.1.5裁切clip基本语法：clip：auto|：rect(|auto|auto|auto|auto)语法说明：auto：默认，不裁剪。rect(|auto|auto|auto|auto)：依据上-右-下-左的顺序提供以对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。“上-左”方位的裁剪：从0开始剪裁直到设定值，即“上-左”方位的auto值等同于0；“右-下”方位的裁切：从设定值开始裁切直到最右边和最下边，即“右-下”方位的auto值为盒子的实际宽度和高度。

28【例13-7】使用裁切（13-7.html）

29部分代码如下：未被裁剪的效果被裁切后的效果

3013.2CSS布局属性CSS布局（Layout）属性控制已应用CSS样式规则的HTML元素与页面上的其它元素进行交互。例如，隐藏元素、设置元素的浮动效果、设置溢出属性确定滚动条能否出现等。

3113.2.1可见性visibility基本语法：visibility:visible|hidden|collapse;语法说明：visible：元素可见。hidden：元素隐藏，但元素保留其占据的原有空间，影响页面的布局。collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其它内容使用。对于表格外的其它对象，其作用等同于hidden。

32【例13-8】设置可见性（13-8.html）

33可见性div{width:200px;height:80px;margin:10px;padding:10px;border:2pxdashed#000;text-align:center;}#div1{visibility:visible;/*可见*/background:#ba9578;部分代码如下：color:#FFF;}#div2{visibility:hidden;/*隐藏*/background:#cef091;color:#000;}#div3{background:#70c17f;}.vc{visibility:collapse;/*隐藏表格行列*/}

34THANKYOUSUCCESS10/21/202235可编辑

35

显示

隐藏

单元格1单元格2单元格3部分代码如下：单元格4单元格5单元格6单元格7单元格8单元格9

3613.2.2溢出overflow基本语法：overflow：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overflow-x：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overflow-y：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;

37语法说明：visible：对溢出内容不做处理，内容可能会超出容器。hidden：隐藏溢出容器的内容且不出现滚动条。scroll：无论是否溢出都出现滚动条。auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body元素和textarea的默认值。page-x、page-y、page-x-controls、page-y-controls和fragments属性值都是CSS3新增，目前主流浏览器均不支持，不做详述。

38【例13-9】设置CSS溢出效果（13-9.html）

39部分代码如下：div{width:200px;height:100px;margin:30px5px;padding:5px;border:1pxsolid#000;text-align:center;float:left;background:#daf6f7;}#div1{overflow:visible;/*溢出内容可见，不做处理*/}#div2{overflow:hidden;/*隐藏溢出容器的内容且不出现滚动条*/}#div3{overflow:scroll;/*无论溢出与否都有滚动条*/}#div4{overflow:auto;/*按需出现滚动条*/}

4013.2.3显示display基本语法：display：none|inline|block|list-item|inline-block|table|inline-table|table-caption|table-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex;

41语法说明：none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。inline：指定对象为内联元素。block：指定对象为块级元素。list-item：指定对象为列表项目。inline-block：指定对象为内联块元素。table：指定对象作为块元素级的表格。类同于html标记

。inline-table：指定对象作为内联元素级的表格。类同于html标记
。table-caption：指定对象作为表格标题。类同于html标记。table-row-group：指定对象作为表格行组。类同于html标记。table-column：指定对象作为表格列。类同于html标记。table-column-group：指定对象作为表格列组显示。类同于html标记。table-header-group：指定对象作为表格标题组。类同于html标记。table-footer-group：指定对象作为表格脚注组。类同于html标记。run-in：CSS3新增关键字，根据上下文决定对象是内联对象还是块级对象。box：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最老版本）inline-box：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）。flexbox：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒过渡版本）。inline-flexbox：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）。flex：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最新版本）。inline-flex：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）。

42【例13-10】使用display构造表格（13-10.html）

43部分代码如下：body{font-size:13px;line-height:1.5;text-align:center;}.table{display:table;/*显示为表格*/margin:0auto;border-collapse:collapse;border:1pxsolid#ccc;}.table-caption{display:table-caption;/*显示为表格标题*/font-size:16px;text-align:center;}

44.table-header-group{/*显示为表格标题行*/display:table-header-group;background:#eee;font-weight:bold;}.table-row-group{/*显示为表格行组*/display:table-row-group;}.table-row{display:table-row;/*显示为表格行*/}/*表格行组中的表格行鼠标经过时背景色为淡黄色#ffffcc*/.table-row-group.table-row:hover{background:#ffffcc;}.table-cell{display:table-cell;/*显示为表格单元格*/padding:05px;border:1pxsolid#ccc;width:100px;}

45学生信息表学号姓名年龄201677001袁天一19201677002马丽娜18201677003侯雨欣20

4613.2.4浮动float基本语法：float:none|left|right语法说明：none：设置元素不浮动；left：设置元素浮在左边；right：设置元素浮在右边。

47【例13-11】使用浮动效果（13-11.html）

48部分代码如下：浮动section{width:500px;height:120px;border:1pxsolid#000;margin:10px;background:#f3de83;}h1,h2,h3{background:#daf6f7;margin:10px;padding:5px;border:1pxsolid#000;font-size:14px;text-align:center;height:auto;}h1{width:60px;}h2{width:100px;}h3{width:150px;}.float_none{float:none;/*不浮动*/}.float_left{float:left;/*浮动在左*/}.float_right{float:right;/*浮动在右*/}

49

H1H2H3
H1H2H3
H1H2H3

5013.2.5清除clear基本语法：clear:none|left|right|both;语法说明：none：允许两边都可以有浮动元素。both：不允许有浮动元素。left：不允许左边有浮动元素。right：不允许右边有浮动元素。

51【例13-12】使用清除浮动（13-12.html）

52部分代码如下：section{width:500px;height:120px;border:1pxsolid#000;margin:10px;background:#f3de83;}h1,h2,h3{background:#daf6f7;margin:10px;padding:5px;border:1pxsolid#000;font-size:14px;text-align:center;height:auto;}h1{width:60px;}h2{width:100px;}h3{width:150px;}h4{width:200px;padding:10px;background:#f9aa9d;border:2pxdashed#000;font-size:14px;text-align:center;}p{font:13px/1.5宋体;}.float_none{float:none;/*不浮动*/}.float_left{float:left;/*浮动在左*/}.float_right{float:right;/*浮动在右*/}.clear_both{/*清除两侧浮动*/clear:both;}

53

H1左浮动H2左浮动H3右浮动H4不浮动
H1左浮动H2左浮动H3右浮动

段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。

54

H1左浮动H2左浮动H3右浮动H4不浮动，清除两侧浮动
H1左浮动H2左浮动H3右浮动段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。

5513.3综合实例——幼儿园页面设计

56【例13-13】CSS布局定位综合案例（13-13.html&css13-13.css）

57园内介绍家园互动宝贝风采特色课程教师天地信息中心健康快车
部分HTML代码如下：

58

中秋节放假按国家规定为期三天，分别为9月15、16和17日，即周四、周五和周六，周日照常上课。预祝您节日愉快！

59

  • 园长信箱
  • 资源共享
  • 互助论坛
  • 党员之家

家长您好！…………………………….

60

  • 今天：10金秋十月，爱心传递——幼儿十月精彩图集大放送，萌娃的幼儿园生活，爸爸妈妈看过来（图）。
  • 9月20日：快乐中秋，幸福童年——幼儿园大型月饼DIY活动纪实，看小厨师如何嗨翻天（图）。
  • 9月14日：为留守儿童献爱心——9月12日，幼儿园小朋友为留守儿童送出玩具和图书（图）。
  • 8月16日：幼儿歌咏会——“我是小歌手”大型亲子演唱会8月6日隆重开唱（图）。
  • 5月15日：快乐六一，欢乐童年——大一班小朋友积极排练木偶剧匹诺曹（图）。

61版权所有©清华大学出版社本书编委

62/*全局样式*/body{text-align:center;margin:0px;}p{margin:10px;font:13px/1.8宋体;text-indent:2em;text-align:left}/*外部父div样式开始*/#container{width:880px;margin:0auto;}/*外部父div样式结束*/CSS代码如下：/*导航区域样式开始*/#navi{clear:both;/*不允许两侧有浮动*/background:#00a8ce;margin:5px15px;height:36px;border:3px#fffsolid;border-radius:10px;box-shadow:002px2px#CCCCCC;}#navispan{/*导航条中span元素样式*/display:block;/*显示为块级元素*/float:left;/*浮动在左*/width:80px;padding:5px;margin:10px0px;font:14px黑体;color:#FFF;}

63#naviform{/*导航区表单样式*/float:right;/*浮动在右*/margin:3px;}.sinput{/*导航区表单文本框样式*/width:100px;height:21px;padding:4px7px;color:#737272;background:#95e3f3;border:1pxsolid#787575;border-radius:3px003px;}.sbtn{/*导航区表单搜索按钮样式*/width:60px;height:31px;margin-left:-10px;padding:012px;border-radius:0px3px3px0px;border:1pxsolid#787575;background-color:#4c4b4b;font-size:13px;color:#f3f7fc;}/*导航区域样式结束*/

64/*主体部分横向第一栏样式开始*/#main1{clear:both;/*不允许两侧有浮动*/margin:2px;height:340px;}#main1_left{float:left;width:220px;height:340px;background:url(images/board.gif)no-repeatcentertop;}#main1_right{float:right;width:656px;}#main1_leftp{margin:60px50px;}/*内容部分横向第一栏样式结束*/

65/*内容部分横向第二栏样式开始*/#main2{clear:both;margin:2px;height:196px;}#main2_left{/*内容部分横向第二栏左侧样式*/width:220px;float:left;/*浮动在左*/}#main2_right{/*内容部分横向第二栏右侧样式*/float:right;/*浮动在右*/width:654px;border:1px#a4db18solid;border-radius:5px;}#main2_leftul{/*内容部分横向第二栏左侧列表样式*/margin:0;padding:0;}#main2_leftulli{/*内容部分横向第二栏左侧列表项样式*/list-style:none;font:13px/1.8宋体;margin:5pxauto;padding:3px;border:1px#ebf811solid;background:#a4db18;width:85%;border-radius:4px;}#main2_leftulli:hover{/*鼠标经过内容部分横向第二栏左侧列表项样式*/background:#ebf811;}/*内容部分横向第二栏样式结束*/

66/*内容部分横向第三栏样式开始*/#main3{clear:both;padding:010px;margin:2px;border:1px#a4db18solid;border-radius:5px;}#main3ulli{/*内容部分横向第三栏列表项样式*/list-style-image:url(images/heart.png);margin:5px0;font-size:13px;text-align:left;line-height:1.5;}#main3a{/*内容部分横向第三栏超链接样式*/text-decoration:none;color:black;}#main3a:hover{/*鼠标经过内容部分横向第三栏列表项样式*/text-decoration:underline;color:#e52355;}/*内容部分横向第三栏样式结束*//*页脚部分样式开始*/#foot{clear:both;background:#a4db18;padding:20px0;border-radius:5px;}/*页脚部分样式结束*/

67第13章结束多加练习勤于思考

68THANKYOUSUCCESS10/21/202269可编辑

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
最近更新
更多
大家都在看
近期热门

首页

分享

客服

关闭
。table-cell：指定对象作为表格单元格。类同于html标记
。table-row：指定对象作为表格行。类同于html标记