前端基础——进阶css（四）-优快云博客

本文链接：https://blog.youkuaiyun.com/deartors/article/details/127372884

本文深入探讨了前端CSS的几个重要概念：锚点用于快速定位页面内容，核心在于id选择器和超链接a标签的配合；精灵图是一种图片整合技术，利用background-position实现背景图片定位；宽高自适应可以通过min-height/max-width实现；calc函数则用于动态计算长度值；此外，文章还介绍了两种不同的三栏布局实现方式，为前端开发者提供了实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚点

锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接，运用相当普遍。使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

核心代码是在需要跳转的地方加上id选择器，然后在点击跳转的地方用超链接a标签调用这个选择器。

在点击右边对应的文字时会跳转到中间相应的栏目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        ul{
            list-style: none;
            position: fixed;
            right: 0px;
            top: 100px;
        }
        li{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid rgb(0, 0, 0);
            font-family: '宋体';
            font-weight: 800;
        }
        div{
            height: 600px;
            border: 1px solid rgb(44, 44, 44);
            font-family: '宋体';
            text-align: center;
            font-size: 30px;
            font-weight: 900;
        }
        a{
            text-decoration: none;
            color: rgb(213, 133, 27);
        }

    </style>
</head>
<body>
    <ul>
        <li> <a href="#a">京东秒杀</a></li>
        <li><a href="#b">双十一</a></li>
        <li><a href="#c">频道优选</a></li>
        <li><a href="#d">京东自营</a></li>
    </ul>
    <div id="a">京东秒杀</div>
    <div id="b">双十一</div>
    <div id="c">频道优选</div>
    <div id="d">京东自营</div>
</body>
</html>

精灵图

css Sprites的原理（图片整合技术）（css精灵）/雪碧图

一·将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。

例如一张含有很多商标这样一张图，设置position的位置，相对应的负值可以显示想要的区域的商标。

宽高自适应

宽度不写与写width：auto；等同于宽高自适应。

可以给页面一个缓冲程度，给一个最小高度或者最大高度。

min-height/max-width

calc函数

用于动态计算长度值

需要注意的是格式中间运算符的两边都是空格。支持：“+” ，“-” ，“/” ，“*”

三栏布局

通过设置body标签设置一个满布局，让左右两个盒子放在前面浮动起来，然后在中间盒子设置两个距离。

第一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .a,.c{
            width: 200px;
            height: 100%;
        }
        .a{
            float: left;
            background-color: brown;
        }
        .c{
            float: right;
            background-color: blueviolet;
        }
        .b{
            height: 100%;
            margin-left: 200px;
            margin-right: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="c"></div>
    <div class="b"></div>
</body>
</html>

第二种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .a,.c{
            width: 100%;
            height: 50px;
            background: rgb(226, 118, 17);
        }
        .b{
            height: calc(100% - 100px);
            background: yellow;
        }
        .one,.three{
            width: 100px;
            height: 100%;
            background: red;
            float: left;
        }
        .two{
            width: calc(100% - 200px);
            height: 100%;
            background: black;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="c"></div>
</body>
</html>