CSS----padding的应用新浪导航条以及外边距合并问题

最新推荐文章于 2023-09-25 12:12:36 发布

A &......

最新推荐文章于 2023-09-25 12:12:36 发布

阅读量302

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/m0_47531829/article/details/115490880

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在新浪的导航条中，我们可以看到，文字的字数虽然不一样，但是当我们鼠标点击导航条的时候，在每一个盒子中文字的左右边距是一样的。那么，这是怎么用css实现的呢？
下面是两个方法来实现：
1，给一个固定宽度。我们之前经常给盒子模型，一个固定的宽度和高度来进行设置（新手入门时候），但是这样设置会有一个缺点。在这里插入图片描述
这样就导致了我们在设置盒子模型的时候，由于文字的数目本来是不同的，而我们设置盒子的宽度是一样的，那么此时，再设置内边距的时候，会导致左右不对称。
2.合理的利用padding。我们知道padding 是可以撑开盒子的，先不设置宽度而只设置一下高度，再利用padding，设置文字的左右内边距相等，这样就可以达到新浪导航条设置的效果了。在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
        }

        .nav a {
            /* a属于行内元素   此时必须要转换  行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            text-decoration: none;
            color: #4c4c4c;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">关注我</a>
    </div>
</body>

</html>

此代码中a为行内元素，如果单纯的给a设置高度的话，不会起任何作用，需要将a转换成行内块级元素才能实现。。。。。

最近在模仿pink老师做学成在线网站设计的时候，在设计最后foot里面版权copyright的时候，出现一个问题，就是外边距合并问题。
关于外边距合并问题见这两张截图。
在这里插入图片描述

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r37607.shtml

pink老师的做法是放弃了设置外边距，转而设置了内边距，因为外边距会有外边距合并的问题，但是内边距并不会啊。。。。

=================================================
来自B站视频黑马pink老师一个视频讲解，在此整理。。。。。

A &......

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS----padding的应用新浪导航条以及外边距合并问题

在新浪的导航条中，我们可以看到，文字的字数虽然不一样，但是当我们鼠标点击导航条的时候，在每一个盒子中文字的左右边距是一样的。那么，这是怎么用css实现的呢？下面是两个方法来实现：1，给一个固定宽度。我们之前经常给盒子模型，一个固定的宽度和高度来进行设置（新手入门时候），但是这样设置会有一个缺点。这样就导致了我们在设置盒子模型的时候，由于文字的数目本来是不同的，而我们设置盒子的宽度是一样的，那么此时，再设置内边距的时候，会导致左右不对称。2.合理的利用padding。我们知道padding 是可以撑开
复制链接

扫一扫