By

文章目录
  1. 1. 元素类型
  2. 2. position
  3. 3. float

本文介绍几个css常用的概念，包括：position、float等。这在初接触css时比较容易混乱。

元素类型

HTML的元素可以分为两种：

  • 块级元素（block level element）
  • 内联元素（inline element）
    两者区别在于：
  • 1.块级元素会独占一行（无法与其他元素显示在同一行内，除非显示修改元素的display属性），而内联元素会在一行内显示
  • 2.块级元素可以设置width、height属性，而内联元素设置无效
  • 3.块级元素的width 默认为100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
    最常见的块级元素是 div，内联元素有span、a、img等等

code:


.example{
    width:100px;
    height:100px;
}
为div设置上面的样式，是有效果的，因为是块级元素，而对span设置上面的样式是没有用的。要想让span改变宽高，可以通过设置display:block;当display的值设置成block时，元素将以块级形式呈现；当display设置成inline时，元素将以内联形式呈现。 若是想让元素在行内显示，又能设置宽高，可以设置： 

 display:inline-block;

inline-block:对外呈现内联元素，可以与其他元素共处于一行内，对内则让元素呈块级元素，可以改变宽高。

position

position 这个属性决定了元素将如何定位。它的值大概有以下五种:


























position值 如何定位
static position的默认值。元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative 相对定位，相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute 绝对定位，相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置
fixed 绝对定位，相对于浏览器窗口来进行定位。其余和 absolute 一样，相当于一种特殊的 absolute。
inherite 从父元素继承 position 属性的值。

每个网页都可以看成是由一层一层页面堆叠起来的，如下图所示。
z-layer

position 设置为 relative的时候，元素依然在普通流中，位置是正常位置，你可以通过 left right 等移动元素,会影响其他元素的位置。

而当一个元素的 position 值为 absolute 或 fixed 的时候，会发生三件事：

  • 1.把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。
  • 2.该元素将变为块级元素，相当于给该元素设置了display:block（给一个内联元素，如 span ，设置 absolute之后发现它可以设置宽高了）。

  • 3.如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。
    由此观之，当 position 设置为 absolute 或 fixed，就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素，可以设置 z-index 值 达到效果。

    float

    float 顾名思义，就是把元素浮动，它的取值一共有四个：left right none inherit.
    这个以后再仔细去写吧。。。

    原文作者：GeekPlux 网址

文章目录
  1. 1. 元素类型
  2. 2. position
  3. 3. float