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 条评论
 下一页
  
   
   
   
   
  
  
  
  
  
  
  
  
  
  
 