CSS 盒子模型与定位

CSS 盒子模型

CSS 盒子模型是描述元素框的设计和布局的基础概念。每个元素被视为一个矩形盒子，决定了该元素如何与周围的元素互动。

盒子模型主要包括以下组件：

内容 (Content) 是元素的实际内容，如文本、图片等。

内边距 (Padding) 是内容周围的空间，提供内容与边框之间的缓冲。

边框 (Border) 围绕内边距和内容的线条，用于定义元素的边界。

外边距 (Margin) 是盒子外部的空间，用于分隔盒子与其他元素，确保元素之间有适当的间距。

box-sizing 属性决定了元素的宽度和高度如何对应于盒子模型的组件。

div {
  box-sizing: border-box;
}

CSS 提供了多种方法来定位元素，定位类型由 position 属性决定。

静态定位是元素的默认定位方式，元素按照正常的页面流进行定位。

div {
  position: static;
}

相对定位使元素相对于其正常位置进行定位。通过调整 top 和 left 属性，可以移动元素的位置。

div {
  position: relative;
  top: 10px; /* 向下移动 10px */
  left: 20px; /* 向右移动 20px */
}

绝对定位使元素相对于其最近的非静态定位父元素进行定位。如果没有非静态定位的父元素，元素将相对于页面的 <body> 元素定位。

div {
  position: absolute;
  top: 10px;
  left: 20px;
}

固定定位使元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在同一位置。

div {
  position: fixed;
  top: 10px;
  left: 20px;
}

粘性定位是一种混合的定位类型，元素根据用户的滚动位置在相对定位和固定定位之间切换。当元素滚动到指定位置时，会固定在视口中。

div {
  position: sticky;
  top: 10px;
}

使用定位属性时，top、right、bottom 和 left 属性将确定元素的确切位置。