/* =============块级元素和行内（内联）元素=============
每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

常用的块状元素（display:block）有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form>
常用的内联元素（display:inline）有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>（表示计算机源代码或者其他机器可以阅读的文本内容）
常用的内联块状元素（display:inline-block）有：
<img>、<input>
=============块级元素和行内（内联）元素============= */



// -------- 自定义样式 -----------

/*
功能：相对于浏览器窗口进行固定定位
适用于：块级元素
使用场景：根元素采用该样式
*/
.tn-g-base {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*
功能：当文本溢出包含它的元素时，不换行，显示省略号 (...) 
适用于: 块级元素
使用场景：显示文本时
*/
.tn-g-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
功能：占据剩余空间
适用于: 所有元素
使用场景：父元素采用了弹性（display: flex）布局，采用此样式填充剩余空间
*/
.tn-g-fill-remaining-space {
    flex: 1 1 auto;
}

/*
功能：当文本溢出包含它的元素时，不换行，显示省略号 (...) 
适用于: 所有元素
使用场景：显示文本时
*/
.tn-g-ellipsis {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*
功能：水平靠左对齐 
适用于: 块级元素
使用场景：靠左对齐
*/
.tn-g-left {
    text-align: left;
}

/*
功能：水平靠右对齐 
适用于: 块级元素
使用场景：靠右对齐
*/
.tn-g-right {
    text-align: right;
}

/*
功能：当内容超出元素时，显示滚动条查看其余内容 
适用于: 块级元素
使用场景：如果元素中的内容超出了给定的宽度和高度，显示滚动条
*/
.tn-g-scrollable-scrollbar {
    overflow: auto;
}

/*
功能：当内容超出元素时，滚动查看其余内容，不显示滚动条
适用于: 块级元素
使用场景：如果元素中的内容超出了给定的宽度和高度，滚动查看其余内容
*/
.tn-g-scrollable {
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}

/*
功能：元素不可见 
适用于: 块级元素
使用场景：占据页面空间，但不可见
*/
.tn-g-invisible {
    visibility: hidden;
}

/*
功能：元素不显示 
适用于: 块级元素
使用场景：不占据页面空间，不显示元素
*/
.tn-g-hidden {
    display: none;
}