你不一定知道的css知识-top等属性

html-css013

你不一定知道的css知识-top等属性,第1张

如果一个元素的position属性值不是‘static’,那么就说这个元素是定位的。

注意，'top','right','bottom','left'这四个属性对于static定位的元素无效。因此，我们说top等的含义时，就是在讲这些属性在相对定位和绝对定位下的含义。

绝对定位下，这四个属性的含义就很不一样了。

这里要解释一下俩个概念：top margin边 和包含块的概念。

我们都知道，每个盒子都由内容、内边距、边框和外边距组成。外边距区域最顶部的位置就是top margin 边，最底部的位置就是bottom margin边。

包含块的概念：元素盒子的位置和大小有时是根据一个特定矩形计算的，叫做该元素的包含块。

对于绝对定位的元素，它的包含块就是由最近的已经定位的祖先元素创建。如果没有这样的祖先，包含块就是根元素所在的包含块。

你的这两个问题都没法儿回答，top:0px和position:absolute都是css属性产生的效果，top是指距离顶部多远，position:absolute是指定位方式为绝对定位，默认值是流式定位。写了不写当然不一样，不然为啥非要写呢，对不对。

顺手采纳了吧，真的没法儿再回答的更明白了。

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {

position: relative

left: 30px

top: 20px

}

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

可能的值

left元素向左浮动。

right元素向右浮动。

none默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit规定应该从父元素继承 float 属性的值。