CSS浮动float的导航栏小案例总结

最新推荐文章于 2023-03-23 11:46:06 发布

学学学无止境

最新推荐文章于 2023-03-23 11:46:06 发布

阅读量521

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46872121/article/details/109317514

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .list{
            width: 1210px;
            height: 48px;
            background-color: #E8E7E3;
            margin:100px auto;
        }
        .list li{
            list-style: none;
            line-height: 48px;
            float: left;
            /*height: 100px;*//*设置了line-height之后就不用设置height了*/
            /*width: 140px;*/
            /*text-align: center;*/
        }
        .list a{
            /*没有给li设置宽度，默认其由于浮动，其宽度会被a原始内容撑开*/
            display: block;
            /*height: 100%;*不用设置，此时的行高会继承li的48px*/
            text-decoration: none;
            /*padding:0 39px;*/
            color: #777777;
            font-size: 18px;
            padding: 0 35px;
        }
        .list li:last-child a{
            padding:0 42px 0 52px;
        }
        .list a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }
    </style>
</head>
<body>
        <ul class="list">
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Border YTY</a></li>
            <li><a href="#">Service DSV</a></li>
            <li><a href="#">BDRHFZB</a></li>
            <li><a href="#">HDSNVKIS</a></li>
            <li><a href="#">HDSVAERBSJPS</a></li>
            <li><a href="#">asdvNSNBI</a></li>
        </ul>
</body>
</html>
总结：
1.由于是为li设置浮动，因此将a元素转换为block元素时，a仍是随着父级元素li按水平排列的
2.由于li设置了浮动，a属于li的子元素，当向改变li的大小时有两种方法
 2.1 设置li的宽度width
 2.2 设置a内容大小，此时li会被a元素内容大小所撑开
3. 为每个a设置左右的边距时，不能使用margin，因为margin不属于盒子的可视化区域，此时盒子的可视化去会变小，而padding不会
4.当设置了文字的水平居中属性line-height: 48px；时，此时该盒子的高度也默认时48px，不用另外设置