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

<!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,不用另外设置



©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页