网页设计基础第十九讲：CSS定位实战 —— 打造精美布局的个人简介页通过深入学习CSS中的静态、相对、绝对、固定和粘性

通过深入学习CSS中的静态、相对、绝对、固定和粘性定位，掌握如何灵活运用这些定位方式来创建一个布局精美的个人简介页。本教程将带你从零开始，逐步构建一个包含个人头像、姓名、简介、技能列表和联系方式的响应式网页。

知识回顾

1. 浮动可以让多个块级盒子在一行没有缝隙排列显示，经常用于横向排列盒子

2. 定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中某个位置

3定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。

定位模式

静态定位（Static）：这是元素的默认定位方式，遵循正常的文档流布局，不会受到其他定位属性的影响。
相对定位（Relative）：相对于其自身正常位置进行偏移，但不会影响周围元素的位置。
绝对定位（Absolute）：相对于最近的非static祖先元素定位，如果所有祖先都是static，则相对于初始包含块（通常是浏览器窗口）。
固定定位（Fixed）：相对于浏览器窗口定位，即使页面滚动也不会改变位置。
粘性定位（Sticky）：结合了相对定位和固定定位的特点，当元素滚动到特定位置时变为固定定位。

通过CSS 的 position 属性来设置

相对定位：边偏移

小结

任务描述

设计要求

页面结构：
- 包含个人头像、姓名、个人简介、技能列表和联系方式。
- 确保各个部分有明确的分隔，使内容易于阅读。
布局要求：
- 使用CSS的相对定位和流式布局，避免使用绝对定位以防止内容重叠。
- 使用适当的padding和margin调整元素之间的间距。
样式设计：
- 个人头像应为圆形，使用边框样式提升美观性（如：border-radius和border）。
- 技能列表使用背景和文本颜色增强可读性（如：蓝色背景和白色文本）。
- 使用阴影和圆角样式（如：box-shadow和border-radius）提升整体视觉效果。

任务准备

理解HTML基本结构
理解CSS的基本语法，了解盒模型的概念
对CSS定位有一个初步的认识

任务实施

步骤1：准备开发环境

创建项目文件夹：
- 在本地计算机上创建一个新的文件夹，例如personal-profile。
创建文件：
- 在项目文件夹内创建一个HTML文件，命名为index.html。

步骤2：编写HTML结构

打开index.html文件：
- 使用文本编辑器（如VS Code、Sublime Text等）打开index.html。
编写基础HTML结构：
- 粘贴以下HTML代码到文件中：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
    <style>
        /* 此处添加CSS样式 */
        /* 详见之前的设计要求具体属性 */
    </style>
</head>
<body>
    <div class="container">
        <div class="profile">
            <img src="profile.jpg" alt="个人头像">
            <div class="name">张三</div>
            <div class="description">前端开发工程师 | 热爱编程和设计</div>
        </div>
        <div class="skills">
            <h3>技能</h3>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>Node.js</li>
            </ul>
        </div>
        <div class="contact">
            <h3>联系方式</h3>
            <p>Email: zhangsan@example.com</p>
            <p>电话: 123-456-7890</p>
        </div>
    </div>
</body>
</html>

步骤3：编写CSS样式

在<style>标签中添加样式：
- 根据之前的要求，将CSS样式代码粘贴到<style>标签内。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative; /* 相对定位，以便绝对定位子元素参照 */
    padding: 20px;
}

.profile {
    position: relative; /* 使用相对定位 */
    text-align: center;
    margin-bottom: 20px;
}

.profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #3498db;
}

.name {
    font-size: 26px;
    margin: 10px 0;
}

.description {
    font-size: 16px;
    color: #555;
}

.skills {
    padding-top: 20px; /* 增加顶部间距 */
}

.skills h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}

.skills ul {
    list-style: none;
    padding: 0;
}

.skills li {
    background: #3498db;
    color: white;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.contact {
    text-align: center;
    margin-top: 20px;
}

.contact h3 {
    margin: 10px 0;
}

.contact p {
    margin: 5px 0;
}

@media (max-width: 600px) {
    .container {
        width: 90%; /* 小屏幕时容器宽度增加 */
    }
}

步骤4：添加个人头像

准备头像图片：
- 准备一张个人头像图片，并将其命名为profile.jpg。
将图片文件放入项目文件夹：
- 将准备好的头像图片文件放入项目的根目录中，确保路径正确。

步骤5：测试和调整

在浏览器中打开HTML文件：
- 双击index.html文件，以在浏览器中打开页面，检查布局和样式效果。
调整样式：
- 如果发现布局不如预期，返回到CSS样式中进行相应的调整。可以根据需要改变margin、padding和其他样式属性。

使用了相对定位（position: relative;）在外部容器上，使得子元素可以根据其位置进行绝对定位。
技能列表使用绝对定位（position: absolute;），可以自由调整其位置。

定位居中应用场景：设计小技巧

文本居中

水平居中：text-align:center
垂直居中：可以line-height的值等于父容器的height高度
示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中效果实现</title>
    <style>
      .div1 {
        text-align: center;
        line-height: 200px;
        background-color: pink;
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <span>居中效果实现</span>
    </div>
  </body>
</html>

Flex布局居中

将父容器设为Flexbox布局。这种布局方式让子元素可以在容器中进行更灵活的排列和对齐。
水平居中: justify-content: center;在水平方向上居中对齐。
垂直居中: align-items: center;则是使得子元素在垂直方向上居中。
示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中效果实现</title>
    <style>
        .father,.son{
          border: 1px solid black;
        }
        .father{
          display: flex;
          justify-content:center;
          align-items: center;
          background-color:pink;
          width: 200px;
          height: 200px;
        }
        .son{
          background-color: rgb(192, 248, 255);
          width: 100px;
          height: 100px;
        }
      </style>
  </head>
  <body>
    <div class="father">
      <div class="son">居中效果</div>
    </div>
  </body>
</html>

定位配合margin auto 实现居中

原理如下：

相对定位与绝对定位：设置父元素.father为相对定位，子元素.son为绝对定位，这样子元素的定位是相对于父元素的。
四个边界设置为0：

通过设置子元素的top、left、right、bottom为0，使其占据父元素的整个可用空间。在这种情况下，子元素的实际大小将由margin决定，从而实现垂直和水平居中。

Margin自动调整：

margin: auto;的重要性在于，它允许浏览器计算并均匀分配子元素四个边的空白区域，从而实现居中效果。当所有边距均为自动时，浏览器会将可用的剩余空间（父元素的高度和宽度减去子元素的高度和宽度）均匀分配。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中效果实现</title>
    <style>
        .father,.son{
          border: 1px solid black;
        }
        .father{
          position: relative;
          background-color:pink;
          width: 200px;
          height: 200px;
        }
        .son{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: rgb(192, 248, 255);
          width: 100px;
          height: 100px;
        }
      </style>
  </head>
    <body>
        <div class="father">
          <div class="son"></div>
        </div>
      </body>

      </html>

定位配合CSS3的transfrom

相对定位与绝对定位：父元素.father使用相对定位，使其成为子元素.son的参考点。子元素的绝对定位确保了它的位置是相对于父元素的。
中心定位：通过将子元素的top和left设置为50%，可以将它的左上角移动到父容器的中心。
使用transform进行调整：由于设置在50%的位置只是将子元素的左上角对准了父容器的中心，实际需要使用transform: translate(-50%, -50%);来将子元素的整个宽度和高度的50%向左和向上移动，从而实现居中效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中效果实现</title>
    <style>
        .father,.son{
          border: 1px solid black;
        }
        .father{
          position: relative;
          background-color:pink;
          width: 200px;
          height: 200px;
        }
        .son{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background-color: rgb(192, 248, 255);
          width: 100px;
          height: 100px;
        }
      </style>
      </head>
    <body>
        <div class="father">
          <div class="son"></div>
        </div>
      </body>
      </html>

硬定位

父框的设置: .father类被设置为position: relative，这意味着它是一个相对定位的元素。相对定位允许其子元素（在本例中为.son）使用绝对定位时相对于其边界进行定位。
- 父框的宽度和高度被设置为200px，背景颜色为粉色。
子框的绝对定位:

子框（.son）的position被设置为absolute，这意味着它会相对于最近的定位父元素（在本例中就是.father）进行定位。

-   `top`和`left`属性的设置为：

    ```
    top: calc(100px - 50px);
    left: calc(100px - 50px);
    ```

这里的100px是父框高度和宽度的一半（200px的一半），而50px是子框的高度和宽度的一半（100px的一半）。因此，这个计算实际上是将子框的中心点放在父框的中心位置。 3.示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>居中</title>
  <style>
    .father,.son{
      border: 1px solid black;
    }
    .father{
      position: relative;
      background-color:pink;
      width: 200px;
      height: 200px;
    }
    .son{
      position: absolute;
      top: calc(100px - 50px);
      left: calc(100px - 50px);
      /* transform: translate(-50%,-50%); */
      background-color: rgb(192, 248, 255);
      width: 100px;
      height: 100px;
    }
  </style>
  </head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
  </html>

元素居中

在 CSS 中水平和垂直居中元素可能有点棘手。然而，有一个简单的一行代码，你可以用来居中页面上的任何元素：

.center {
  margin: 0 auto;
}

这将使元素在页面上水平居中。你也可以添加以下代码来使元素垂直居中：

.center {
  text-align: center;
}

响应式图片

图片是任何网站的重要组成部分，但让图片响应式也是一个挑战。如果你的图片代码不正确，它们在不同的屏幕尺寸上可能会显得拉伸或扭曲。

为了使你的图片响应式，你可以使用以下一行代码

img {
  max-width: 100%;
  height: auto;
}

网页设计基础 第十九讲：CSS定位实战 —— 打造精美布局的个人简介页