1.文档流
简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)不独占一行。
一般使用margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“距离”。只要不是float和绝对定位方式布局的,都在文档流里面。
2.position属性介绍
- static,默认值。位置设置为static的元素,它始终会处于文档流给予的位置。
- inherit,规定应该从父元素继承 position属性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
- fixed,生成绝对定位的元素。默认情况下,可定位于相对于浏览器窗口的指定坐标。
- 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否,元素都会留在那个位置。但当祖先元素具有transform属性且不为none时,就会相对于祖先元素指定坐标,而不是浏览器窗口。
- absolute,生成绝对定位的元素,相对于距该元素最近的已定位的祖先元素进行定位。
- 此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
- relative,生成相对定位的元素,相对于该元素在文档中的初始位置进行定位。
- 通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。
3.相对定位
relative生成相对定位的元素,相对于其正常位置进行定位。
相对定位完成的过程如下:
按默认方式(static)生成一个元素(并且元素像层一样浮动了起来)。相对于以前的位置移动,移动的方向和幅度由 left、right、top、bottom 属性确定,偏移前的位置保留不动。
<style type="text/css"> #box1 { margin: 20px; width: 200px; height: 200px; background-color: yellow; } #box2 { margin: 20px; width: 200px; height: 200px; background-color: red; /*position: relative; left: 100px; top: 100px;*/ } </style> <div id="box1"></div> <div id="box2"></div>
其中box2中的注释代码未生效前,是按照文档流进行排序呈现。
但是,当注释代码取消注释生效后,就会相对文档流中应当呈现的位置进行移动。
所以,相对定位的参照物是它本身。
4.绝对定位
绝对定位与相对定位的一大不同之处就是,当我们把一个元素设置成绝对定位,那么这个元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它祖先元素的定位设置来确定。
所谓根据它祖先元素的定位设置来确定简单理解为:相对于该元素最近的已定位的祖先元素,如果没有一个祖先元素设置定位,那么参照物是body层。
- 在祖先元素没定位的情况下,使用absolute。在这种情况下,参考物就是body。
- 祖先元素有定位,祖先元素只要设置了值不为position:static之外的值,都视为有定位,并且最近的祖先元素会被设置为绝对定位元素的参照物。在这种情况下,参考物就是最近的祖先元素。
- 在没设置left/right、top/bottom的情况下,absolute元素的位置就是该元素在文档流里的位置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
CSS,定位
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“CSS定位的教程”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]