第12课CSS浮动与定位剖析.pptx

第12课 CSS浮动与定位; ; 第14章 盒子的浮动与定位;14.1 盒子的浮动; 基本语法： float: none/left/right float属性默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。;盒子浮动的规则;14.1.1 制作基础页面;14.1.2 设置第1个浮动的div; ;14.1.3 设置第2个浮动的div;14.1.4 设置第3个浮动的div;14.1.5 改变浮动的方向; ;14.1.6 再次改变浮动的方向; ;14.1.7 全部向左浮动; ;14.1.8 使用clear属性清除浮动的影响; ; ;14.1.9 扩展盒子的高度; ;14.2 盒子的定位; ; ; ; ; ; ;14.2.1 静态定位;14.2.2 相对定位; ;2．两个子块的情况; ;3．结论; ; ;14.2.3 绝对定位; ; ; ; ;结论;绝对定位的特殊性;14.2.4 固定定位（fixed）;46;14. 3 z-index空间位置;48;行内元素的盒子;改变行内元素的高度;display属性;block元素;inline元素;列表项元素display: list-item;隐藏元素display: none;需要使用display属性切换的情况;Display属性的应用－制作竖直导航菜单;浮动的应用举例;2 菜单的竖横转换 3 制作栏目框标题栏 标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？ 最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子