借助浏览器流特性设置宽度 - xiaoxustudy

借助浏览器流特性设置宽度

本文为学习《CSS世界》第 3 章后所作笔记。

目录：

　　1. 借助浏览器流特性设置宽度

　　2. 通过 “ 容器宽度 - 水平 padding - 水平 margin = ? ”计算具体宽度

给垂直导航栏设置宽度有 2 种方法，一是借助浏览器流特性设置宽度，二是通过 “ 容器宽度 - 水平 padding - 水平 margin = ? ”计算具体宽度。

方法二的缺点是：多代码、多计算、多维护

推荐使用方法一，不推荐使用方法二。

下面来看通过两种方式设置宽度的区别。

一、借助浏览器流特性设置宽度

设置外面容器宽度为 240 px，a 元素显示为块元素，没有给 a 元素设置宽度，因为流特性，a 元素宽度自适应，即使外面容器宽度改变，a 元素宽度也能够自适应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav{
                background-color: red;
                width: 240px;
            }
            .nav-a{
                display: block;
                margin: 0 10px;
                padding: 9px 10px;
                border-bottom: 1px solid black;
                border-top: 1px solid white;
                color: white;
                text-decoration: none;
            }
            .nav-a:first-child { 
                border-top: 0; 
            }
            .nav-a:last-child { 
                border-bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="" class="nav-a">导航1</a>
            <a href="" class="nav-a">导航2</a>
            <a href="" class="nav-a">导航3</a>
        </div>
    </body>
</html>

View Code

二、通过 “ 容器宽度 - 水平 padding - 水平 margin = ? ”计算具体宽度

设置外面容器宽度为 240 px，a 元素显示为块元素，通过计算给 a 元素设置了宽度，实现的效果跟上面借助流特性实现的一样。如果更改外面容器的宽度，那么 a 元素的宽度需要重新计算。

如果给 a 元素设置宽度为 100%，那么 a 元素内容将超出外部容器。

posted on 2020-10-01 16:15 xiaoxustudy 阅读(125) 评论(0) 收藏举报

刷新页面返回顶部