[浅谈CSS核心概念] CSS布局模型：float和position

时间：2022-11-11 10:52:44

1、流动模型

[浅谈CSS核心概念] CSS布局模型：float和position

HTML元素在默认情况下都是按照“流动模型”进行布局的，网上也有人称之为“普通流”、“文档流”之类的。这种布局模式的特点在于：
  • 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
  • 内联元素都会在所处的包含元素内从左到右水平分布显示
 

2、层模型

[浅谈CSS核心概念] CSS布局模型：float和position
如上图，网页呈现的内容，就像PS中的图层一样，是多层重叠呈现的效果，当然，一般情况下我们的网页只有一层，因为任何元素在默认情况下是不能浮动的。但是 脱离了“普通流”的层，顾名思义是浮动的，那么它会覆盖下一层元素。

2.1 float

然而，当一个元素被定义为浮动了，那么效果不言而喻，浮动元素使用 float: left/right 来定义，设置后其会脱离“普通流”：
  • 浮动元素变为块级，且不再占据原来那层的空间，它还会覆盖下一层的元素
  • 浮动后，该元素的下个非浮动兄弟元素，会往前移动补充位置（浮动元素脱离该层了，那么其后的非浮动元素自然要往前靠来补位）
  • 如果浮动元素的下个兄弟元素中有内联元素（往往是文字），则会围绕该浮动元素，类似“文字围绕图片”的效果
  • 浮动的设定只有left/right，没有top/bottom

2.2 position

那么在层模型中，这些元素又是如何定位的呢，这就要用到position属性，并通过left/right/top/bottom进行定位：
  • position:absolute
  • position:fixed
  • position:relative

注：
  • position的默认值是static，即不会特殊定位
  • 浮动的元素如果不想覆盖下层元素，可以通过z-index属性调整
  • 清除浮动，此处不再展开（e.g.清除浮动）


position:absolute 绝对定位
绝对定位的元素，会脱离“普通流”，它的定位原则是： 相对于其最接近的一个具有定位属性的父包含块，如果没有，则相对于浏览器窗口。同时，该元素变为块级。 划下重点： 最近的、具有定位属性position的、父包含块； 如果不存在这样的包含块，则相对于浏览器窗口。

e.g. 
   
   
   
    

  1. .relative {
    2. 
    
    
    
  2.  position: relative;
    3. 
    
    
    
  3.  width: 600px;
    4. 
    
    
    
  4.  height: 400px;
    5. 
    
    
    
  5. }
    6. 
    
    
    
  6. .absolute {
    7. 
    
    
    
  7.  position: absolute;
    8. 
    
    
    
  8.  top: 120px;
    9. 
    
    
    
  9.  right: 0;
    10. 
    
    
    
  10.  width: 300px;
    11. 
    
    
    
  11.  height: 200px;
    12. 
    
    
    
  12. }
    13.
[浅谈CSS核心概念] CSS布局模型：float和position


position:fixed 固定定位
固定定位的元素，也会脱离“普通流”，但它的定位则是相对于视图（即屏幕内的网页窗口），所以除非你拖动浏览器的窗口，否则该元素的位置是始终不动的。同时，该元素变为块级。

e.g. 
   
   
   
    

  1. .fixed {
    2. 
    
    
    
  2.  position: fixed;
    3. 
    
    
    
  3.  bottom: 0;
    4. 
    
    
    
  4.  right: 0;
    5. 
    
    
    
  5.  width: 200px;
    6. 
    
    
    
  6.  background-color: white;
    7. 
    
    
    
  7. }
    8.
[浅谈CSS核心概念] CSS布局模型：float和position
 


position:relative 相对定位
相对定位的元素，比较特殊，它的定位原则是相当于该元素在原“普通流”中的位置进行偏移。意思就是，相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

e.g. 
   
   
   
    

  1. .relative1 {
    2. 
    
    
    
  2.  position: relative;
    3. 
    
    
    
  3. }
    4. 
    
    
    
  4. .relative2 {
    5. 
    
    
    
  5.  position: relative;
    6. 
    
    
    
  6.  top: -20px;
    7. 
    
    
    
  7.  left: 20px;
    8. 
    
    
    
  8.  background-color: white;
    9. 
    
    
    
  9.  width: 500px;
    10. 
    
    
    
  10. }
    11.
[浅谈CSS核心概念] CSS布局模型：float和position
 

3、参考链接



标签：

相关文章