阶段总结：CSS定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单：它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

• HTML元素复习：

块级元素有：

div p h1-h6 ul ol table form dl hr address center ······

行内元素有：

span b strong i a img input br sup sub del textarea select u ······

块级元素的特点：

• 独占一行，在默认情况下，宽度自动填满父元素宽度

• 宽度和高度可以控制

• margin和padding横向纵向设置都有效

• 可以通过display: inline; 转换为行内元素

• 除个别特殊元素外，可包含块状元素和行内元素

行内元素的特点：

• 不能独占一行

• 宽高由内容撑开

• margin和padding横向设置有效，纵向设置不产生边距效果

• 可以通过display: block; 转换为块状元素

• 除ins和del外，不能包含块状元素

一、CSS定位属性

• CSS共有9大定位属性，这些属性允许你对元素进行定位
  
• CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

1.1 CSS的position属性

• 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

• position属性的含义：

  • static

  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  • relative

  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

  • absolute

  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • fixed

  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

1.2 CSS的top属性\right属性\left属性\bottom属性

• 定义了一个定位元素的上外\右外\左外\下外边距边界与其包含块上边界之间的偏移
• 可能的值：
  
  • auto：默认值。通过浏览器计算上\右\左\下边缘的位置。
  • %：设置以包含元素的百分比计的上\右\左\下边位置。可使用负值。
  • length：使用 px、cm 等单位设置元素的上\右\左\下边位置。可使用负值。
  • inherit：规定应该从父元素继承 top\right\left\bottom 属性的值。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

注释：如果 “position” 属性的值为 “static”，那么设置 “top”\”right”\”left”\”bottom” 属性不会产生任何效果。

1.3 CSS的overflow属性

• 设置当元素的内容溢出其区域时发生的事情
• 可能的值：
  
  • visible：默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden：内容会被修剪，并且其余内容是不可见的。
  • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit：规定应该从父元素继承 overflow 属性的值。

说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

1.4 CSS的clip属性

• 设置元素的形状。元素被剪入这个形状之中，然后显示出来
• 可能的值：
  
  • shape：设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
  • auto：默认值。不应用任何剪裁。
  • inherit：规定应该从父元素继承 clip 属性的值。

说明：这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

代码示例：

效果图：

1.5 CSS的vertical-align属性

• 设置元素的垂直对齐方式

说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

示例代码：

    
    
    


    

        这是一幅图片：
        
    

效果图：

说明：允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

1.6 CSS的z-index属性

• 设置元素的堆叠顺序
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
• 可能的值：
  
  • auto：默认。堆叠顺序与父元素相等。
  • number：设置元素的堆叠顺序。
  • inherit：规定应该从父元素继承 z-index 属性的值。

二、浮动定位

2.1 什么是浮动定位？

• 作用：可以让块元素左右排列
• 特点：浮动的目标会离队（脱离流）
• 步骤：1）浮动的目标离队 2）弟弟前进 3）目标到达指定位置
• 分类：左浮动 / 右浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2.2 右浮动

• 作用：可以让块按照倒序左右排列
• 浏览器加载（渲染）网页的规则：
  
  • 元素的高度会自适应，以内部流的高度为准
  • 浏览器认为文字很重要，若浮动元素遮挡了文字，浏览器会想办法让文字显示完整

代码示例：

    
    
    


    

        

        

        

    
    
浮动时观察我的位置

效果图：

第一次右浮动：

#d1 { float: right; }

效果图：

第二次右浮动：

#d2 { float: right; }

效果图：

第三次右浮动：

#d3 { float: right; }

效果图：

2.3 左浮动

• 作用：可以让块按照正序左右排列

第一次左浮动：

#d1 { float: left; }

效果图：

第二次左浮动：

#d2 { float: left; }

效果图：

第三次左浮动：

#d3 { float: left; }

效果图：

2.4 如何消除浮动影响？

• 答：clear：left\right\both;

在哪个元素上增加clear，就消除浮动对该元素的影响，则该元素就会出现在浮动元素的下方。

• 可以分为两种情况：

  • 若无需保留父元素边框，则只对p消除影响即可

    p { clear: left;}
    

    效果图：
    

  • 若需要保留父元素边框，方法如下：

    • 在父元素内加一个空块

    • 在空块上下clear

      
          
      
          
      
          
      
          
      
      
      浮动时观察我的位置
      

      效果图：
      

      空块会出现在浮动元素下方，空块在流内，拉伸了父元素的高度

三、其他定位：相对、绝对和固定定位

3.1 相对定位

• 以自身为目标产生偏移，通常偏移量很小
• 目标不离队（不脱离流）
• position：relative；
• 特点：偏移量小，元素不离队

代码示例：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

效果图：

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3.2 绝对定位

• 以带有position属性的父辈元素为目标产生偏移，通常偏移量较大
  
  • 若父辈都有position属性，则以就近的父辈为目标
  • 若父辈都没有position属性，则以body（即以最远的父辈）为目标
• 目标会离队（即脱离流）
• position：absolute；
  

  注意：实际工作中，我们想要以谁为目标，就在谁上面加position属性（postion的属性值不能是static）

代码示例：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

**效果图：** 

3.3 固定定位

• 以浏览器窗口为目标产生偏移
• 目标离队（位置要释放，也就是脱离流）
• position：fixed；
  

  注意：如果想要把元素挂在窗口上不动时，用固定定位

3.4 相对、绝对和固定定位之间的区别和联系？

• 相同点：设置偏移的方式相同
  
• 不同点：参考的目标不同
  
  • 相对定位：以自身为目标（不会脱离流）
  • 绝对定位：以带有postion属性的父元素为目标（脱离流）
  • 固定定位：以浏览器窗口为目标（脱离流）

四、归纳：选择定位的建议

• 固定定位：看是否需要将元素挂在窗口上不动
• 浮动定位：看是否要将块元素左右排列
• 相对定位：看是否偏移量很小，是否元素不释放位置
• 绝对定位：以上三种都不是，剩下的就是用绝对定位