/* *{
    background-color: rgb(157, 197, 229);
} */

/* 设定 flex 特性 */
/* .container {
 display: flex;
} */

.container {
    display:flex;
    flex-wrap:warp;
   }

.container div{
    border: 1px solid rgb(220, 32, 32);
    padding: 10px;
    width:100px;
}
/*    第一次设置                           */
.box-1{
     
}
.box-2{
    
}
.box-3{
  
}

.button{
    cursor: pointer;
}
/* 光标放上去颜色变色*/
button:hover{
    background-color: rgb(78, 114, 103); 
}
/* 光标按下去颜色变色 */
 button:active{
    background-color: rgb(112, 171, 243);
}
------------------------------
 
 

.box {
width:200px;
height:200px;
background-color:gray
}

.box-animation{

}


/* ----------------------------- */
body {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 0;
    font-family: Arial, sans-serif;
}

/* 设置背景图片和半透明遮罩层 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("234.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9; /* 控制背景图透明度 */
    z-index: -1;
}
 
  

/*    达到所占取空间的最大值                       */
/* .box-1{
     flex:1;
}
.box-2{
    flex:1;
}
.box-3{
    flex:1;
} */


/* 以下程式码可以改变主题的顺序，将123的顺序改为231的顺序 注意：order的数值可以设定为负数，但是一般还是设定为正整数集 */
/* .box-1{
    flex:1;
    order:2;
}
.box-2{
   flex:1;
   order:1;
}
.box-3{
   flex:1;
} */


/* 
.box-1{
     flex:1;
}这一串程序码表示：将box-1所代表的主题，所占用的空间{宽度}填满，即页面能有多大，该主题{宽度}就能占到它所能达到的最大空间
------------------
.box-1{
     flex:1;
}
.box-2{
    flex:1;
}
.box-3{
    flex:1;
}而这一串代码代表的是：box-1 box-2 box-3三个所代表的主题空间{宽度}占比按照1:1:1的比例，当然比例可以进行修改




*/