CSS深入理解之定位
2016-07-28 00:48:17 0 举报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 条评论
下一页
