阶段总结：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：