定位浮动拾遗
---恢复内容开始---
浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从
文档流中取出并对该元素尽量向左或者向右移动,周围的内容将会环绕该元素。所以,浮动会对兄弟元素的布局造成
影响,而且其效率较低,代价较高。
绝对定位则是完全脱离文档流,直接相对于包含块进行定位,对兄弟元素的布局没有影响。
绝对定位是根据定位元素的包含外边距的框(外边框)到包含块内边界(边框内部)的偏移进行定位。
display,float,position之间的爱恨纠葛:(转自W3help)
设定值 | 计算值 |
---|---|
inline-table | table |
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block |
block |
其他 | 同设定值 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了