- 1、本文档共25页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第14章 盒子的浮动与定位 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,直到包含他的元素的边界;而在竖直方向和兄弟元素依次排列,不能并排。 CSS中有一个float属性,默认为none,也就是标准流通常的情况。 如果将float设置为left或者right,元素就会向其父元素的左侧或者右侧靠紧,同时默认的情况下,盒子的宽度不再是伸展,而是收缩,根据盒子里边内容的宽度来确定。 准备页面 14-01.htm 父div 子div 子div 子div 子p 未设置浮动,完全按标准流显示 设置第1个浮动的div .son1{ float:left; } box-2左边框与box-1左边框重合,因为box-1已经脱离标准流,标准流中的box-2会顶到box-1的位置,而文字会环绕box-1排列 设置第2个浮动的div 14-03.htm 将 box-2 的float属性也设置为left。 box-3的左边框仍然在box-1的左边框下边。 box-1与box-2均脱离标准流,它们之间的间隙由二者margin构成。 设置第3个浮动div 14-04.htm 将box-3的float也设置为left。 改变浮动方向 14-05.htm 将box-3的float设置为right 如果将浏览器调整变窄,box-3将会被挤到下一行中,但仍然保持向右浮动。 调整浮动对象 14-06.htm box-1保持向左,box-3左浮动,box-2右浮动。 将来浏览器窗口变窄,box-3先被挤入下一行,这是按照HTML书写顺序来决定的。 浮动窗口挤入下一行位置 修改14-04.htm 将3个div均设为左浮动,box-1比box-2略高。 调整浏览器变窄,box-3将压入下一行,但会卡在box-1与box-2的高差处。 使用clear清除浮动影响 14-07.htm 为p元素增加左清除 {clear:left;},即这个段落左侧不再围绕着浮动框排列,但仍然受box-3影响。 使用clear清除浮动影响 14-07.htm 如需脱离右方浮动窗口影响,设置{clear:right;},因为右方box-3较高,脱离了其影响,自然也脱离了box-1和box-2影响。 clear属性也可设置为 both,同时清楚左右影响。 clear属性要放到文字所在的盒子里。不是放在浮动的盒子里的。 扩展盒子高度 box-1、2、3均浮动,父div中无文字段落,父div范围缩为一条。 14-08a.htm 一个div的范围是由它里边的标准流内容决定的,与里边的浮动内容无关。 要让父div包含3个浮动盒子,可以在3个浮动div后增加一个div实现。 14-08.htm .father .clear{ margin:0; padding:0; border:0; clear:both; } 内部容器水平居中 设置外部容器 text-align:center 会影响子级容器排列 不同浏览器支持不同 设置自身容器 margin:0 auto body style=text-align:center; div style=width: ; height: ; margin:0 auto; div 123/div /div /body 文本在DIV中垂直居中 vertical-align:middle; line-height:200px; vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。 Div在上级 容器中居中 盒子的 postion static:这是默认的属性值,也就是该盒子按照标准流(包括浮动方式)进行布局。 relative:相对定位,使用相对定位的盒子以标准流方式进行排版,然后使盒子相对于原位置偏移指定的距离。相对定位的盒子仍在标准流中,占用其原有位置。 absolute:绝对定位,盒子的位置以他的包含框为基准进行偏移。该盒子从标准流中脱离,其他盒子就好象这个盒子不存在一样。 fixed:固定定位,和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口滚动条时,依然保持对象位置不变。 静态定位static 默认值 14-09.htm 相对定位 relative 使用相对定位,除了将position属性设置为relative,还需要指定一定的偏移量。 例一:一个子块的情况 14-10.htm
您可能关注的文档
最近下载
- CAD链轮的画法 用CAD链轮的画法 实用.doc VIP
- 2025年电工技师考试题及答案.doc VIP
- 2024—2025学年江苏省苏州市沙溪高级中学高二上学期9月月考语文试卷.doc VIP
- 建筑工程项目管理制度.pdf VIP
- 运动康复中心的创新商业模式探索.docx VIP
- 员工婚丧及伤病住院慰问金实施办法.doc VIP
- TZZB 3693-2024 工程机械渗碳重载圆柱齿轮.pdf
- 护理查房急性心肌梗死护理查房.pptx VIP
- 统编版小学语文五年级上册第一单元 落花生 大单元学历案 教学设计附双减作业设计(基于新课标教学评一体化).docx VIP
- 2025年电工(技师)证考试题及电工(技师)试题答案 .pdf VIP
文档评论(0)