×

第6课 CSS3-盒子浮动与定位ppt课件.ppt

下载文档

ID：59017042

大小：1.04 MB

页数：39页

时间：2020-09-26

收藏

资源描述：

《第6课 CSS3-盒子浮动与定位ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第六课CSS-3盒子的浮动与定位用CSS设置表格样式第14章盒子的浮动与定位盒子的浮动准备代码设置第1个浮动的div设置第2个浮动的div设置第3个浮动的div改变浮动的方向再次改变浮动的方向全部向左浮动使用clear属性清除浮动的影响扩展盒子的高度盒子的定位静态定位相对定位1个子块的情况2个字块的情况绝对定位准备代码使用绝对定位绝对定位的特殊性质固定定位Z-index空间位置盒子的display属性14.1盒子的浮动准备代码：box1

<

2、divclass="son2">box2

box3

这里是浮动外围文字，这里是浮动外围文字，这里是浮动外围文字，这里是浮动外围文字，这里是浮动外围文字，这里是浮动外围文字，。。。。。

4、n1{background-color:#CCCCFF;float:left}结论：浮动的盒子不再伸展，其宽度为容纳内容的最小宽度。浮动的盒子已经脱离标准流，它原来的位置由标准流的内容填补。14.1.2设置第2个浮动的div.son1{background-color:#CCCCFF;float:left}.son2{background-color:#FFCCFF;float:left}注意：Box1和box2之间的空白是二者的margin构成的。14.1.3设置第3个浮动的div.son1{background-color

5、:#CCCCFF;float:left}.son2{background-color:#FFCCFF;float:left}.son3{background-color:#CC9900;float:left}14.1.4改变浮动的方向.son3{background-color:#CC9900;float:right}14.1.5交换div的位置.son2{background-color:#FFCCFF;float:right}.son3{background-color:#CC9900;float:left}结论：实现在h

6、tml不做任何改动情况下，调换盒子的布局位置。14.1.6增加box1的高度，全部向左浮动并调窄浏览器的窗口：注意：Box3被挤压到下一行，并向左浮动，被box1卡住，因此停留在box2的下方。其后面的标准流则围绕在box3右边。14.1.7如何取消文字围绕浮动的盒子使用clear属性清除浮动#fatherp{clear:left}#fatherp{clear:both}14.1.8盒子的范围：由宽度和高度决定盒子的范围由它里面的标准流内容决定，与浮动内容无关。包含浮动div的盒子如果没有设置宽度，将不会适应高度。#fathe

7、r{width：80%}设置盒子宽度为浏览器窗口的百分比。14.1.9如何使盒子居中#father{width:80%;margin-left:auto;margin-right:auto}autoauto盒子布局练习son1son2son2-1son2-2son3

8、son3-1son3-2son3-3son4di