/* @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。*/
/* screen 定位当前屏幕 */
@media screen and (max-width: nnpx)
注意格式：
注意 空格 的重要性，特别是在设置calc()值的时候，注意运算符和数值之间的空格，否则会出现无法运行的问题。/* @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。*/
/* screen 定位当前屏幕 */
@media screen and (max-width: nnpx)
注意格式：
注意 空格 的重要性，特别是在设置calc()值的时候，注意运算符和数值之间的空格，否则会出现无法运行的问题。/* 响应式布局：大致可以针对浏览器分为以下三个部分
中小屏幕:以990为分界   <=calc(50px+990px+50px-1px)标准屏幕:以1190为分界>=(50px + 1190px + 50px) and <=(50px+1400px+50px-1px)大屏幕:以1400为分界>=50px + 1400px +50px
*/
@media screen and (max-width:calc(50px + 990px + 50px - 1px)) {
    .banxin {
        width: 990px;
        background-color: lightcyan;
    }
    html {
        max-width: calc(50px + 990px + 50px - 1px);
    }
  /* 设置某个块中的样式：进一步了解 “伪对象选择符”  */
    .left-nav::after {
        content: "我是小屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}
@media screen and (min-width:calc(50px + 990px + 50px)) and (max-width:calc(50px + 1400px + 50px - 1px)) {
    .banxin {
        width: 1190px;
        background-color: lightsalmon;
    }
    html {
        max-width: calc(50px + 1190px + 50px);
        min-width: calc(50px + 1400px +50px -1px);
    }
    .left-nav::after {
        content: "我是标准屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}
@media screen and (min-width:calc(50px + 1400px + 50px)) {
    .banxin {
        width: 1400px;
        background-color: lightgreen;
    }
    html {
        min-width: calc(50px + 1400px + 50px);
    }
    .left-nav::after {
        content: "我是大屏幕";
        color: #0f0d0d;
        display: block;
        font-size: 26px;
    }
}

/* 在此处定义了一套浮动样式，在调用时可直接引用，此处的写法可固定，根据具体情况可增减 */
.fl {
    float: left;
}
.fr {
    float: right;
}
/* 此处的目的是为了防止，标签塌陷，如果塌陷进而隐藏标签 */
.fo {
    overflow: hidden;
}
/* 定义了一个哈士奇，防止自己的块标签跑到别人的家里 */
.clearfix::before {
    content: " ";
    display: table; /* 显示为表格 */
}
/* 定义了一个哈士奇，防止别人的块标签跑到自己的家里 */
.clearfix::after {
    content: "";
    display: block; /* 把本伪标签变性为块状元素，设置宽和高为0后就看不见了 */
    width: 0;
    height: 0;
    clear: both; /* 从这个伪元素开始，前面的浮动不再影响后续标签的排版 */
}