html

常用标签

编程小技巧

  • 如何打空格: 使用 即可在页面中显示空格(注意分号┭┮﹏┭┮)

JavaScript

CSS

盒子模型

CSS中的盒子模型如下图所示:
盒子模型

CSS定位

CSS中的定位用于对页面中的元素进行布局,常见的定位有以下几种:

  1. 静态定位(static)
    一般标签元素在不加任何定位属性时都属于静态定位,属于标准流。
  2. 绝对定位(absolute)
    绝对定位会将指定元素从文档流中拿出,再通过位移属性相对于其最近的已定位祖先元素(该祖先元素的position设置为relative)。

    因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

  3. 相对定位(relative)
    相对定位是相对于该元素在正常文件流中的位置,通过设置的位移属性计算得到。

    该元素仍然保持其未定位前的形状，它原本所占的空间仍保留

  4. 固定定位(fixed)
    与绝对定位类似,但它是相对于浏览器窗口定位,不会随滚动条进行滚动。
  5. 粘性定位(sticky)
    粘性定位可以被认为是相对定位和固定定位的混合。简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置