CSS深入理解之定位
2016-02-20 09:04:25 8 举报
AI智能生成
CSS定位是一种布局模型,它允许开发者精确控制页面元素的位置。它包括四种不同的定位方式:静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认行为,元素按照正常的文档流进行排列。相对定位允许元素相对于其正常位置进行偏移,但仍然保持在正常的文档流中。绝对定位将元素从正常的文档流中移除,并相对于最近的已定位祖先元素进行定位。固定定位与绝对定位类似,但它的位置是相对于浏览器窗口进行固定的。通过灵活运用这些定位方式,开发者可以实现各种复杂的页面布局效果。
作者其他创作
大纲/内容
relative
与absolute
限制left/top/bottom/right定位
限制z-index层级
限制overflow
与 定位
相对自身
无侵入
top和left优先
与z-index
提高层叠上下文
新建层叠上下文和层级控制
最小化影响原则
避免
最小化
添加一个div
float
初衷
文字环绕
包裹与破坏
BFC
高度塌陷
清除浮动影响
clear:both
底部插入
after伪元素
BFC
特性
去空格化
砖头化
流体布局-文字环绕衍生
文字居中
单侧固定 padding-left/ma...
DOM与显示位置匹配的单侧固定布局
width:100% + float
padding-left/margin-left
width + float + margin负值
兼容
IE7
含clear的浮动元素包裹不正确
浮动元素
倒数2个莫名垂直间距问题
最后一个字符重复问题
楼梯排列
和文本不再同一行
absolute
与float共性
包裹性
破坏性
无依赖(健壮性)
去浮动
位置跟随(难点)
下拉框 最佳实践
对齐居中或边缘
星号对齐
图文对齐
文字溢出
脱离文档流
动画尽量用在绝对定位元素上
z-index(少用)
left/top..和width/height
相互替代
方向对立时,身体爆裂拉伸
相互支持
无需固定width/height,内部亦可拉伸
容器拉伸,内部支持百分比width、height
相互合作
移动web布局
body升级,子元素升级
头尾、侧边栏各居其位
内容区域想象成body
0 条评论
下一页