定位元素

定位元素

css中对于元素的定位主要由三个属性控制

• position 控制页面上元素间的位置关系

  有四个值

  • static 默认，静态定位。按照顺序从上到下堆叠

  • relative 相对定位，相对的是它原来在文档流中的位置。此时就可以使用top、right、bottom、left属性来改变它的位置

  • absolute 绝对定位，使用该值元素就完全脱离了常规文档流，就会相对于顶级元素body来定位。

    默认是相对于顶级元素body来定位，但是如果祖先元素设置为relative ，就会根据该祖先元素来定位

  • fixed 固定定位。固定定位元素不会随着页面滚动而滚动。常见使用为导航栏

• display 控制元素是堆叠、并排还是不显示。

  可以把块级元素变成行内元素，或者将行内元素变成块级元素

  /* 变为行内元素*/
  p {display:inline;}
  /* 变为块级元素*/
  a {display:block;}

• float 提供控制的方式，使得元素可以组成多栏布局。可以实现文本环绕图片的效果

  p {
      margin:0;
  }
  
  img{
      float:left; /* 图片会浮动到左侧，从而让文本可以绕排到右侧*/
      margin:1 4px 4px 0;
  }