笔记-day08-前端基础CSS第六天.pdf

CSS 定位基础知识 CSS 定位是 CSS 布局中非常重要的一部分，它可以让我们更灵活地控制页面元素的位置和布局。今天，我们将学习 CSS 定位的基础知识，包括为什么需要使用定位、定位的组成部分、定位模式的分类和特点等。 为什么需要使用定位？ ----------------- 在学习 CSS 定位之前，我们需要了解为什么需要使用定位。在标准流和浮动中，我们可以实现基本的布局，但是存在一些局限性。在某些场景下，标准流和浮动无法快速实现一些特殊的布局效果，例如，某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子。这时，我们需要使用 CSS 定位来实现这些效果。 定位的组成部分 ------------- CSS 定位由两部分组成：定位模式和边偏移。定位模式用于指定一个元素在文档中的定位方式，而边偏移则决定了该元素的最终位置。边偏移有四个属性：top、bottom、left 和 right，它们分别定义元素相对于其父元素的上边线、下边线、左边线和右边线的距离。 定位模式的分类 ------------- CSS 定位模式可以分为四种：静态定位、相对定位、绝对定位和固定定位。每种定位模式都有其特点和应用场景。 ### 静态定位 静态定位是元素的默认定位方式，也是无定位的意思。它按照标准流的特性摆放位置， 没有边偏移。静态定位在布局时我们几乎不用。 ### 相对定位 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的。它的特点是：相对于自己原来的位置来移动的，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。相对定位最典型的应用是给绝对定位当爹。 ### 绝对定位 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。它的特点是：完全脱标，完全不占位置；父元素没有定位，则以浏览器为准定位。 ### 固定定位 固定定位是元素在移动位置的时候，是相对于浏览器窗口来说的。它的特点是：固定在某个位置，不管浏览器如何滚动，元素也不会移动。 小结 ---- 今天，我们学习了 CSS 定位的基础知识，包括为什么需要使用定位、定位的组成部分、定位模式的分类和特点等。掌握这些基础知识，可以帮助我们更好地控制页面元素的位置和布局，实现更加复杂和灵活的布局效果。