css拾遗(7)-猫头鹰选择器

作者: 姜治宇 | 来源:发表于2022-04-18 11:28 被阅读0次

css拾遗(7)-猫头鹰选择器
CSS 拾遗
CSS选择器--猫头鹰选择器
CSS选择器
CSS3
CSS选择器
css选择器
CSS 选择器
Sublime 学习web的css
CSS选择器

自动计算距离

flex最迷人的地方就是自动计算距离。比如这样一个菜单设计：

1.png

右边的美食一项，如果用ul li结构设计，最后一个li可以用margin-left:auto自动计算距离，因为flex默认是填满整个空间的。

<!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>
        .site-nav {
            display:flex;
            padding:10px;
            list-style: none;
            background:#242425;
            
        }
        .site-nav > li {
            background-color:#177ddc;
            padding: 5px 10px;
        }
        .site-nav > li > a{
            display: block;
           
            color:white;
            text-decoration: none;
        }
        .site-nav > li + li {
            margin-left:30px;
        }
        .site-nav > .nav-right {
            margin-left: auto;
            
        }
    </style>
</head>
<body>
    <div>
        <ul class="site-nav">
            <li><a href="">首页</a></li>
            <li><a href="">财经</a></li>
            <li><a href="">军事</a></li>
            <li><a href="">社会</a></li>
            <li class="nav-right"><a href="">美食</a></li>

        </ul>
    </div>
</body>
</html>

猫头鹰选择器

我们可以单独定义一个flex类，然后用猫头鹰选择器来优化以上代码。

<!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>
        .flex{
            display:flex;
        }
        .flex > * + * {  /*猫头鹰选择器*/
            margin-left:30px;
        }
        .site-nav {
            padding:10px;
            list-style: none;
            background:#242425;
        }
        .site-nav > li {
            background-color:#177ddc;
            padding: 5px 10px;
        }
        .site-nav > li > a{
            display: block;
            color:white;
            text-decoration: none;
        }

        .site-nav > .nav-right {
            margin-left: auto;
            
        }
    </style>
</head>
<body>
    <div>
        <ul class="site-nav flex">
            <li><a href="">首页</a></li>
            <li><a href="">财经</a></li>
            <li><a href="">军事</a></li>
            <li><a href="">社会</a></li>
            <li class="nav-right"><a href="">美食</a></li>

        </ul>
    </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>
        body * + * {

            margin-top:20px;/*相邻边距设为20px*/
        }
        .flex {
            display:flex;
            
        }
        .column {
            flex-direction: column;
        }
        .box{
            width:100%;
        }
        .header{
            height:50px;
            background:red;
        }
        .content{
            height:calc(100vh - 150px);
            background:yellow;
        }
        .footer{
            height:100px;
            background:blue;
        }

    </style>
</head>
<body>
    <div class="box flex column">
        <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">底部</div>
    </div>
</body>
</html>

2.png