整理最近碰到的问题-CSDN博客

本文链接：https://blog.csdn.net/Candy_mi/article/details/84186721

1.排版布局碰到长串数字自动换行文字左右两侧对齐

 text-align: justify;
 word-wrap: break-word;

2.锚点跳转偏移位置（当顶部导航设置固定定位时挡住锚点区内容时）

设置虚锚点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>aaaaaaaaaa</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 70%;
            height: 80px;
            margin: 0 auto;
            background: pink;
            text-align: 80px;
            position: fixed;
            top: 0;
            z-index: 99;
        }

        .index {
            width: 100%;
            background: lightseagreen;
            ;
            height: 900px;
        }

          .concent{
            width: 100%;
            background: red;
            height: 900px;
        }

        .about-us {
            width: 100%;
            background: yellow;
            height: 900px;
        }
      
    </style>
</head>

<body>

    <!-- 固定导航栏 -->
    <div class="nav">
        <a href="#index" class="font-title font-active">首页</a>
        <a href="#concent" class="font-title">内容</a>
        <a href="#about-us" class="font-title">关于我们</a>
    </div>

    <div class="kong" style="height: 80px;width: 100%"></div>
    <div class="main-description">

        <!-- 设置暗锚点 -->
        <a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
        <!-- 真实锚点显示地方 -->
        <div class="index">首页</div>

        <a name="concent" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
        <div class="concent">内容</div>

        <a name="about-us" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a>
        <div class="about-us"><span>关于我们</span></div>
       
        <div class="kong" style="height: 80px;width: 100%"></div>
    </div>

</body>

</html>