/**
 * @file CSS-多项目通用类-注释版
 * @description 所有类型的项目都能使用的CSS样式类文件 只收纳了一些复用性较高的样式
 * @author Darry <1327022089@qq.com>
 * @copyright no
 * @createDate 2025-01-23 08:00
 * @lastEditTime 2025-03-05 08:00
 */

/* 
	一、基础类集合
*/

/* 设置盒子为宽度100%的盒模型 CSS3语法 */
/* 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的 */
.bdbox {
  box-sizing: border-box;
}

/* 设置盒子为相对定位 */
.pos_rel {
  position: relative;
}

/* 设置盒子为绝对定位 */
.pos_abs {
  position: absolute;
}

/* 设置盒子为固定定位 */
.pos_fix {
  position: fixed;
}

/* 盒子溢出隐藏 */
/* 作用：1(超出部分隐藏) 2(清除浮动) 3(解决margin-top的时候，父div会跟着一起下来) */
.over_hide {
	overflow: hidden;
}

/* 超过容器，可以拖动 */
/* 作用：区域滚动效果 */
.over_auto {
	overflow: auto; 
}

/* 盒子水平居中(必须给盒子指定宽度才能生效) */
.m_auto {
	margin: 0 auto;
}

/* ——————END—————— */


/* 
	二、弹性布局(Flex布局)集合 CSS3语法 (该文件的弹性布局的相关样式只采用了使用频率较高的部分) 
*/

/* 声明盒子为弹性布局 */
.flex {
  display: flex;
}

/* 盒子内子项排列方向-垂直方向-从上往下 (前提该盒子为flex布局) */
.flex_column {
  flex-direction: column;
}

/* 盒子内子项换行方式-子项溢出后换行-从上往下排 (前提该盒子为flex布局) */
.flex_wrap {
  flex-wrap: wrap;
}

/* 盒子内子项水平对齐方式-子项水平靠右 (前提该盒子为flex布局) */
.jc_end {
  justify-content: flex-end;
}

/* 盒子内子项水平对齐方式-子项两端对齐 (前提该盒子为flex布局) */
.jc_between {
  justify-content: space-between;
}

/* 盒子内子项水平对齐方式-子项两侧对齐 (前提该盒子为flex布局) */
.jc_around {
  justify-content: space-around;
}

/* 盒子内子项-水平加垂直居中 */
.h_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 盒子内子项-垂直居中 */
.h_center1 {
  display: flex;
  align-items: center;
}

/* 盒子内子项-水平居中 */
.h_center2 {
  display: flex;
  justify-content: center;
}

/* 防止flex布局的挤压问题 */
/* 作用于 flex布局下其中一个子盒子没有宽度(且被其子级内容撑开宽度) 导致同级盒子被挤压变形 */

/* 挤压问题解决方案一 给挤压方使用 */
.not_squeeze1 {
	flex: 1;
	width: 0;
}

/* 挤压问题解决方案二 给被挤压方使用 */
.not_squeeze2 {
	flex-shrink: 0;
}

/* 设置弹性布局盒子的子项目属性(前提该盒子的父亲为flex布局) */
/* 相当于lex-grow、flex-shrink、flex-basis一起指定 */
/* flex-grow属性 定义项目的放大比例，解决的问题是：在空间有多余时把多余空间分配给各个子元素 */
/* flex-shrink属性 定义项目的收缩比例，解决的问题是：在空间不够时让各个子元素收缩以适应有限的空间 */
/* flex-basis属性 定义项目的初始大小 */
/* 项目的实际宽度有个优先级：max-width/min-width > flex-basis > width > box 意味着这些属性同时存在时 优先取 max-width和min-width */

/* 子项目占用空间比例 为 1 */
/* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
.flex_1 {
  flex: 1;
}

/* 子项目占用空间比例 为 2 */
.flex_2 {
  flex: 2;
}

/* 子项目占用空间比例 为 3 */
.flex_3 {
  flex: 3;
}

/* 子项目占用空间比例 为 4 */
.flex_4 {
  flex: 4;
}

/* ——————END—————— */


/* 
	三、文本类集合
*/

/* 文字粗体 */
.text_w300 {
  font-weight: 300;
}

.text_w400 {
  font-weight: 400;
}

.text_w500 {
  font-weight: 500;
}

.text_w600 {
  font-weight: 600;
}

.text_w700 {
  font-weight: 700;
}

.text_w800 {
  font-weight: 800;
}

.text_w900 {
  font-weight: 900;
}

/* 文本的水平对齐方式-文本靠左 */
.text_left {
  text-align: left;
}

/* 文本的水平对齐方式-文本居中 */
.text_center {
  text-align: center;
}

/* 文本的水平对齐方式-文本靠右 */
.text_right {
  text-align: right;
}

/* 文本的换行规则-允许在单词内换行 */
/* 解决css中数字和英文不自动换行的问题 */
.text_break_all {
  word-break: break-all;
}

/* 文字超出width显示隐藏带省略号 一行*/
/* word-break: break-all 如果不确定会有纯数字或者中文那一定要加上这句，不然到时候就会出现数字有作用而中文却没有作用，或者中文有作用而数字没有用 */
.ellipsis_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
	word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 文字超出width显示隐藏带省略号 两行*/
.ellipsis_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
	word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 文字超出width显示隐藏带省略号 三行*/
.ellipsis_3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
	word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ——————END—————— */