原创力文档- 1、本文档共59页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第12课CSS浮动与定位教程
第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的高度，使它在视觉上能包含住两个浮动的盒子
文档评论（0）