/*
去掉所有标签的默认样式
清除浮动 '.clear'
媒体查询 小屏幕 | 中等屏幕 | 大屏幕
flex布局,
grid布局[具体写法参考：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html],
margin,padding[xs，sx，m，lg，xl]，
n行冒号省略，
下划线颜色，
背景色[黑，白，灰] [ '.bg-black' | '.bg-white' | '.bg-grey' | '.bg-gray']
字体颜色
字号[8,10,12,14,16,18,20,22,24,26,28,30,32,34,36]   -->   'f-size-' + 字号
定位 position   -->   'position-' + ['absolute'/'fixed'/'relative']
圆角   -->   'round-' + [方向] + '-' + ['3'/'5'/'10'/'15'/'25'] ; 'round-circular'长款比为1时 是正圆;
自定义阴影  'box-shadow'
自定义底部灰线 'border-bottom'
行内元素对齐方式 'text-align-' + ['center'/'right']
宽度100% 'width-100'

等基础样式 */


/*屏幕大小边界 变量*/
/* 768px 超小 | 小 */
/* 992px 小 | 中 */
/* 1200px中 | 大 */
/*
@media (max-width: 768px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
*/

/* ================
    默认样式处理
  =================*/
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
  /*默认有边距，都要清除*/
  margin:0;
  padding:0;
  /*字体设置*/
  font-size: 14px;
  font-family: "Microsoft Yahei",sans-serif;
  color:#000;
  /*去掉列表的圆点*/
  list-style: none;
  /*默认鼠标*/
  cursor: default;
}
/*行内块元素*/
input,img{
  margin:0;
  padding:0;
  border:0 none;
  outline-style: none;
  vertical-align: bottom;
}
/*行内元素*/
a,a:active,a:visited{
  /*下划线和颜色*/
  text-decoration: none;
  color:#ccc;
}
a:hover{
  color:#333;
}
textarea{
  /*边框清零*/
  border: none;
  /*轮廓线清零*/
  outline: none;
  /*防止文本域被睡随意拖拽*/
  resize: none;
}
i{
  /*文字样式*/
  font-style:normal;
}
table{
  /*边框合并*/
  border-collapse: collapse;
  border-spacing: 0;
}
.clear::before,.clear::after{
  content: '';
  height:0;
  line-height: 0;
  display: block;
  /*visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
    display: none----将元素的显示设为无，即在网页中不占任何的位置。*/
  visibility: hidden;
  clear: both;
}

/* ==================
          布局
 ==================== */
/*  -- flex弹性布局 -- */
.flex {
  display: flex;
}
.basis-xs {
  flex-basis: 20%;
}
.basis-sm {
  flex-basis: 40%;
}
.basis-df {
  flex-basis: 50%;
}
.basis-lg {
  flex-basis: 60%;
}
.basis-xl {
  flex-basis: 80%;
}
.flex-sub {
  flex: 1;
}
.flex-twice {
  flex: 2;
}
.flex-treble {
  flex: 3;
}
.flex-direction {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-stretch {
  align-items: stretch;
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
.align-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-stretch{
	justify-content: stretch;
}

/* =======================
         grid布局(网格布局)
   =======================*/
/*
* 行 --> row
* 列 --> column
* 行和列交叉的区域 --> 单元格(cell)
* 容器 --> Grid布局的对象
* 项目 --> 容器的顶层子元素
*/

/*对容器生效*/
.grid{
  display: grid;
}

/*对容器生效*/
.inline-grid{
  display: inline-grid;
}
/* 注意，设为网格布局以后，容器子元素（项目）的
float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 */
/*
① 属性: grid-template-columns --> 列宽
例子：三列 [px] --> grid-template-columns: 100px 100px 100px;
         [%] --> grid-template-columns: 33.33% 33.33% 33.33%;
         [repeat(a)] --> grid-template-columns: repeat(3, 33.33%);
         [repeat(a,b c)] --> grid-template-columns: repeat(2, 100px 20px 80px);

② 属性: grid-template-rows --> 行高
例子：三行 [px] --> grid-template-rows: 100px 100px 100px;
         [%] -->grid-template-rows: 33.33% 33.33% 33.33%;
         [repeat(a,b)] --> grid-template-rows: repeat(3, 33.33%);
         [repeat(a,b c)] --> grid-template-columns: repeat(2, 100px 20px 80px);

③ 关键字：auto-fill
例子：自动填满列宽为100px的列
grid-template-columns: repeat(auto-fill, 100px);
行高同理

④ 关键字：fr
例子：fr（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
grid-template-columns: 150px 1fr 2fr;
行高同理

⑤ minmax()
例子：minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
行高同理

⑥ auto 关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

⑦ 网格线的名称
例子： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
网格布局允许同一根线有多个名字，比如[fifth-line row-5]。
行高同理

⑧ grid-row-gap --> 行间距
⑨ grid-column-gap --> 列间距
⑩ grid-gap --> grid-column-gap 和 grid-row-gap的合并简写形式
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。
例子：
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-gap: <grid-row-gap> <grid-column-gap>;

⑪ grid-template-areas --> 定义区域
例子：先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
例子：下面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
例子：如果某些区域不需要利用，则使用"点"（.）表示。
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。


⑫ 属性： grid-auto-flow
这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
grid-auto-flow: column;
grid-auto-flow: row;

⑬ dense
例子：现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
grid-auto-flow: row dense;

⑭属性 justify-items 设置单元格内容的水平位置（左中右）
justify-items: start | end | center | stretch;

start --> 对齐单元格的起始边缘。
end --> 对齐单元格的结束边缘。
center --> 单元格内部居中。
stretch --> 拉伸，占满单元格的整个宽度（默认值）。

⑮ 属性 align-items
align-items: start | end | center | stretch;

⑯ 属性 place-items --> align-items属性和justify-items属性的合并简写形式 如果省略第二个值，则浏览器认为与第一个值相等。

⑰ 属性 justify-content --> 整个内容区域在容器里面的水平位置（左中右）

⑱ 属性 justify-content --> 整个内容区域在容器里面的水平位置（左中右）
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

⑲ 属性 align-content --> 整个内容区域的垂直位置（上中下）
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
stretch --> 项目大小没有指定时，拉伸占据整个网格容器。
space-around --> 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between --> 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly --> 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

⑳ 属性 place-content --> align-content属性和justify-content属性的合并简写形式。

⑴ 属性 grid-auto-columns --> 浏览器自动创建的多余网格的列宽
⑵ 属性 grid-auto-rows --> 浏览器自动创建的多余网格的行高

⑶ 属性 grid-template --> grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
⑷ 属性 grid --> grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。


⑸ 属性 grid-column-start --> 左边框所在的垂直网格线 (使用对象 项目)
⑹ 属性 grid-column-end --> 右边框所在的垂直网格线 (使用对象 项目)
⑺ 属性 grid-row-start --> 上边框所在的水平网格线 (使用对象 项目)
⑻ 属性 grid-row-end --> 下边框所在的水平网格线 (使用对象 项目)
例子：指定第几个边框
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
例子：左边框和右边框的位置，都指定为网格线的名字。
.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

⑼ 属性 grid-column --> grid-column-start和grid-column-end的合并简写形式
⑽ 属性 grid-row --> grid-row-start属性和grid-row-end的合并简写形式
例子
.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

⑾ 属性 grid-area  --> 指定项目放在哪一个区域。
.item-1 {
  grid-area: e;
}
.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

⑿ 属性 justify-self --> 设置单元格内容的水平位置（左中右）
⒀ 属性 align-self --> 设置单元格内容的垂直位置（上中下）
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

*/




/*  -- 内外边距 -- */
.margin-0 {
  margin: 0;
}
.margin-xs {
  margin: 0.3125rem;
}
.margin-sm {
  margin: 0.625rem;
}
.margin-m {
  margin: 0.9375rem;
}
.margin-lg {
  margin: 1.25rem;
}
.margin-xl {
  margin: 1.5625rem;
}
.margin-top-xs {
  margin-top: 0.3125rem;
}
.margin-top-sm {
  margin-top: 0.625rem;
}
.margin-top-m {
  margin-top: 0.9375rem;
}
.margin-top-lg {
  margin-top: 1.25rem;
}
.margin-top-xl {
  margin-top: 1.5625rem;
}
.margin-top-auto{
  margin-top:auto;
}
.margin-right-xs {
  margin-right: 0.3125rem;
}
.margin-right-sm {
  margin-right: 0.625rem;
}
.margin-right-m {
  margin-right: 0.9375rem;
}
.margin-right-lg {
  margin-right: 1.25rem;
}
.margin-right-xl {
  margin-right: 1.5625rem;
}
.margin-right-auto{
  margin-right:auto;
}
.margin-bottom-xs {
  margin-bottom: 0.3125rem;
}
.margin-bottom-sm {
  margin-bottom: 0.625rem;
}
.margin-bottom-m {
  margin-bottom: 0.9375rem;
}
.margin-bottom-lg {
  margin-bottom: 1.25rem;
}
.margin-bottom-xl {
  margin-bottom: 1.5625rem;
}
.margin-bottom-auto{
  margin-bottom:auto;
}
.margin-left-xs {
  margin-left: 0.3125rem;
}
.margin-left-sm {
  margin-left: 0.625rem;
}
.margin-left-m {
  margin-left: 0.9375rem;
}
.margin-left-lg {
  margin-left: 1.25rem;
}
.margin-left-xl {
  margin-left: 1.5625rem;
}
.margin-left-auto{
  margin-left: auto;
}
.margin-lr-xs {
  margin-left: 0.3125rem;
  margin-right: 0.3125rem;
}
.margin-lr-sm {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.margin-lr-m {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
}
.margin-lr-lg {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.margin-lr-xl {
  margin-left: 1.5625rem;
  margin-right: 1.5625rem;
}
.margin-lr-auto{
  margin-left: auto;
  margin-right: auto;
}
.margin-tb-xs {
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}
.margin-tb-sm {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.margin-tb-m {
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}
.margin-tb-lg {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.margin-tb-xl {
  margin-top: 1.5625rem;
  margin-bottom: 1.5625rem;
}
.margin-tb-auto{
  margin-top:auto;
  margin-bottom:auto;
}
.padding-0 {
  padding: 0;
}
.padding-xs {
  padding: 0.3125rem;
}
.padding-sm {
  padding: 0.625rem;
}
.padding-m {
  padding: 0.9375rem;
}
.padding-lg {
  padding: 1.25rem;
}
.padding-xl {
  padding: 1.5625rem;
}
.padding-top-xs {
  padding-top: 0.3125rem;
}
.padding-top-sm {
  padding-top: 0.625rem;
}
.padding-top-m {
  padding-top: 0.9375rem;
}
.padding-top-lg {
  padding-top: 1.25rem;
}
.padding-top-xl {
  padding-top: 1.5625rem;
}
.padding-right-xs {
  padding-right: 0.3125rem;
}
.padding-right-sm {
  padding-right: 0.625rem;
}
.padding-right-m {
  padding-right: 0.9375rem;
}
.padding-right-lg {
  padding-right: 1.25rem;
}
.padding-right-xl {
  padding-right: 1.5625rem;
}
.padding-bottom-xs {
  padding-bottom: 0.3125rem;
}
.padding-bottom-sm {
  padding-bottom: 0.625rem;
}
.padding-bottom-m {
  padding-bottom: 0.9375rem;
}
.padding-bottom-lg {
  padding-bottom: 1.25rem;
}
.padding-bottom-xl {
  padding-bottom: 1.5625rem;
}
.padding-left-xs {
  padding-left: 0.3125rem;
}
.padding-left-sm {
  padding-left: 0.625rem;
}
.padding-left-m {
  padding-left: 0.9375rem;
}
.padding-left-lg {
  padding-left: 1.25rem;
}
.padding-left-xl {
  padding-left: 1.5625rem;
}
.padding-lr-xs {
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}
.padding-lr-sm {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.padding-lr-m {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.padding-lr-lg {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.padding-lr-xl {
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
}
.padding-tb-xs {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}
.padding-tb-sm {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.padding-tb-m {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}
.padding-tb-lg {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.padding-tb-xl {
  padding-top: 1.5625rem;
  padding-bottom: 1.5625rem;
}
.text-red,
.line-red,
.lines-red {
  color: #e54d42;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #f37b1d;
}

.text-yellow,
.line-yellow,
.lines-yellow {
  color: #fbbd08;
}

.text-olive,
.line-olive,
.lines-olive {
  color: #8dc63f;
}

.text-green,
.line-green,
.lines-green {
  color: #39b54a;
}

.text-cyan,
.line-cyan,
.lines-cyan {
  color: #1cbbb4;
}

.text-blue,
.line-blue,
.lines-blue {
  color: #0081ff;
}

.text-purple,
.line-purple,
.lines-purple {
  color: #6739b6;
}

.text-mauve,
.line-mauve,
.lines-mauve {
  color: #9c26b0;
}

.text-pink,
.line-pink,
.lines-pink {
  color: #e03997;
}

.text-brown,
.line-brown,
.lines-brown {
  color: #a5673f;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #8799a3;
}

.text-gray,
.line-gray,
.lines-gray {
  color: #aaaaaa;
}

.text-black,
.line-black,
.lines-black {
  color: #333333;
}

.text-white,
.line-white,
.lines-white {
  color: #ffffff;
}
.bg-grey {
  background-color: #8799a3;
  color: #ffffff;
}

.bg-gray {
  background-color: #f0f0f0;
  color: #333333;
}

.bg-black {
  background-color: #333333;
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
  color: #666666;
}

/* 字号大小 */
.f-size-8{
  font-size: 8px;
}
.f-size-10{
  font-size: 10px;
}
.f-size-12{
  font-size: 12px;
}
.f-size-14{
  font-size: 14px;
}
.f-size-16{
  font-size: 16px;
}
.f-size-18{
  font-size: 18px;
}
.f-size-20{
  font-size: 20px;
}
.f-size-22{
  font-size: 22px;
}
.f-size-24{
  font-size: 24px;
}
.f-size-26{
  font-size: 26px;
}
.f-size-28{
  font-size: 28px;
}
.f-size-30{
  font-size: 30px;
}
.f-size-32{
  font-size: 32px;
}
.f-size-32{
  font-size: 34px;
}
.f-size-32{
  font-size: 36px;
}


/*定位样式*/
.position-relative{position:relative}
.position-absolute{position:absolute;}
.position-fixed{position:fixed;}

/*圆角样式*/
.round-3{border-radius: .188rem;}
.round-top-3{border-radius: .188rem .188rem 0 0;}
.round-bottom-3{border-radius:0 0 .188rem .188rem;}
.round-left-3{border-radius: .188rem 0 0 .188rem;}
.round-right-3{border-radius: 0 .188rem .188rem 0;}

.round-5{border-radius: .313rem;}
.round-top-5{border-radius: .313rem .313rem 0 0;}
.round-bottom-5{border-radius:0 0 .313rem .313rem;}
.round-left-5{border-radius: .313rem 0 0 .313rem;}
.round-right-5{border-radius: 0 .313rem .313rem 0;}

.round-10{border-radius: .625rem;}
.round-top-10{border-radius: .625rem .625rem 0 0;}
.round-bottom-10{border-radius:0 0 .625rem .625rem;}
.round-left-10{border-radius: .625rem 0 0 .625rem;}
.round-right-10{border-radius: 0 .625rem .625rem 0;}

.round-15{border-radius: .938rem;}
.round-top-15{border-radius: .938rem .938rem 0 0;}
.round-bottom-15{border-radius:0 0 .938rem .938rem;}
.round-left-15{border-radius: .938rem 0 0 .938rem;}
.round-right-15{border-radius: 0 .938rem .938rem 0;}

.round-25{border-radius: 1.56rem;}
.round-top-25{border-radius: 1.56rem 1.56rem 0 0;}
.round-bottom-25{border-radius:0 0 1.56rem 1.56rem;}
.round-left-25{border-radius: 1.56rem 0 0 1.56rem;}
.round-right-25{border-radius: 0 1.56rem 1.56rem 0;}

.round-circular{
  border-radius: 50%;
}
.box-shadow{
  box-shadow: -2px 2px 10px -5px #858585;
}

.border-bottom{
  border-bottom:1px solid #eeeeee;
}

.text-align-center{
  text-align: center;
}
.text-align-right{
  text-align: right;
}
.width-100{
  width:100%;
}
.inner-scroll-x{
	white-space: nowrap;
	width: 100%;
}

.one-line{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.two-line{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
.three-line{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
.inline-block{
	display: inline-block;
}

.font-bold{
	font-weight: bold;
}
.top-0{
	top: 0%;
}
.left-0{
	left:0;
}
.z-index-2{
	z-index: 2;
}