使用CSS的position属性掌握DIV盒模型

发布时间：2023-05-12

一、什么是DIV盒模型

CSS中的盒模型指的是HTML元素在页面中所占用的空间大小，由元素的内容、内边距、边框和外边距四个部分组成。其中，元素的宽度由内容和内边距的宽度之和计算得出，而元素的高度则由内容和内边距的高度之和计算得出。 比如下面这个DIV元素的盒模型：

<div style="width: 200px;
          height: 100px;
          padding: 10px;
          border: 1px solid #000;
          margin: 20px;"></div>

其中，width指定了元素的宽度为200px，height指定了元素的高度为100px，padding指定了元素的内边距为10px，border指定了元素的边框为1px实线黑色边框，margin指定了元素的外边距为20px。 此时，这个DIV元素的实际宽度为222px（200px + 10px2 + 1px2），实际高度为142px（100px + 10px2 + 1px2 + 20px*2）。

二、使用position属性进行元素定位

除了通过width、height、padding、border和margin属性来控制元素的大小和间距之外，CSS还提供了position属性来控制元素的定位。position属性有5个取值：

  • static：默认值，元素按照正常流排列
  • relative：元素相对于自身原来的位置进行定位（此时top、right、bottom和left属性才会生效）
  • absolute：元素相对于父元素进行定位（如果没有父元素，则相对于最外层的HTML元素进行定位），脱离文档流（此时top、right、bottom和left属性才会生效）
  • fixed：元素相对于浏览器窗口进行定位，不会随着页面滚动而移动
  • sticky：元素根据滚动位置进行定位，滚动时会固定在指定位置，不滚动时会回到原来的位置 比如下面这个DIV元素的定位：
<div style="position: relative;
          left: 50px;
          top: 50px;">This is a positioned DIV element.
</div>

其中，position指定了元素的定位方式为relative，即相对于自身原来的位置进行定位；left和top则分别指定了元素距离其原来位置向右和向下分别移动了50px。

三、使用position属性和z-index属性进行层叠

在HTML页面中，有时需要对元素进行层叠，比如有多个DIV元素重叠在一起，并且需要控制它们的显示顺序。这个时候，就可以使用position属性和z-index属性来实现。 z-index属性用于控制元素的堆叠顺序，取值为整数（负整数也可以），值越大的元素越靠近上面。比如下面这个例子：

<div style="width: 100px;
          height: 100px;
          background-color: red;
          position: absolute;
          z-index: 2;"></div>
<div style="width: 150px;
          height: 150px;
          background-color: green;
          position: absolute;
          top: 50px;
          left: 50px;
          z-index: 1;"></div>

其中，第一个DIV元素占据了整个页面，并且z-index值为2；第二个DIV元素重叠在第一个元素上方，并且z-index值为1。

四、使用position属性和transform属性进行变换

position属性还可以结合transform属性来实现元素的变换，比如旋转、缩放、平移等操作。transform属性有下面几个取值：

  • rotate(angle)：元素旋转指定角度
  • scale(x,y)：元素水平方向和垂直方向缩放指定比例
  • translate(x,y)：元素水平方向和垂直方向移动指定距离
  • skew(x-angle, y-angle)：元素水平方向和垂直方向倾斜指定角度 比如下面这个例子：
<div style="width: 100px;
          height: 100px;
          background-color: red;
          position: absolute;
          transform: rotate(45deg);"></div>

其中，transform: rotate(45deg);表示将元素顺时针旋转45度。

五、使用position属性和clip-path属性进行裁剪

另外，position属性还可以和clip-path属性进行结合，实现元素的裁剪。clip-path属性用于指定一个路径，元素只显示路径内部的部分，其余部分被裁剪掉。比如下面这个例子：

<div style="width: 200px;
          height: 200px;
          background-color: red;
          position: absolute;
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>

其中，clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);表示将元素裁剪为一个菱形。

六、结语

通过以上几个例子，我们可以看到position属性在CSS中的重要性。它在定位、层叠、变换和裁剪等方面都发挥了重要作用，同时也为我们展示了CSS强大的设计能力。

推荐文章