/* 所有网页开头加上这句话，控制尺寸更直观(不然等着掉头发) */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 颜色的alpha通道 0表示完全透明，1表示完全不透明。只要有可以写颜色的地方都可以写alpha*/
.alpha{
    /* 完全透明 */
    color: rgba(0, 0, 0, 0);
    /* 完全不透明 */
    color: rgba(0, 0, 0, 1);
    /* 半透明 */
    color: rgba(0, 0, 0, 0.5);

    opacity: 0.5;
    /* 这个半透明透明和 opacity: 0.5 是不一样的，前者是对盒子背景作用，后者还对盒子内部控件作用，比如文字 */
}


/* 最大最小宽高 :当一个元素的尺寸会自动变化时，设置最大最小宽高，让它不至于太小或者太大*/
html{
    min-width: 1226px;
}
img{
    max-width: 100%;
}


/* 盒子相对于父元素左右居中，设置左右margin为auto */
box{
    margin-left: auto;
    margin-right: auto;
    /* 一步到位写的方式 */
    margin: 0 auto;
}


/* 文字相对于父元素内部居中，设置text-align */
.h1{
    text-align: center;
}


/* 文本框的一些操作 */
.txt{
    /* 外边框 不占用位置*/
    outline: none;
    /* 边框 */
    border: 1px solid #ccc;
    /* 首行缩进,用padding更好 */
    padding: 0 8px;
    /* text-indent: 10px; */

    border-radius: 5px;
    width: 100%;
    height: 40px;
    font-size: 14px;
}

/* 文本框聚焦变色操作 */
.txt:focus::placeholder{
    color: #333;
}

    /* 聚焦变色 */
.txt:focus{
    border-color: rgb(75, 117, 214);
}

/* 多行文本框是否可以被改变尺寸 */
textarea{
    /* 不可改变 */
    resize: none;
    /* 水平可以改变 */
    resize: horizontal;
    /* 竖值可以改变 */
    resize: vertical;
}

/* 按钮基本操作 */
button{
    /* 鼠标变成小手 */
    cursor: pointer;
}

/* 选中禁用状态的按钮 */
input:disabled{
    background: rgba(75, 117, 214, 0.49);
    cursor: not-allowed;
}

/* 统一处理浮动 */
.left{
    float: left;
    /* 解决浮动高度坍塌 ,随便在最后加一个伪元素，设置clear:both也可以解决*/
    overflow: hidden;

}
.right{
    float: right;
}

/* 伪元素解决高度坍塌 */
.class::after{
    content: '';
    display: block;
    clear: both;
}

/* 行高不对齐就是要使用vertical-align, 一点一点调 */
.span{
    vertical-align: 2.1px;
}

/* 颜色变化选中状态 */
label input:checked ~ span{
    color: #081620;
}

/* 精灵图的运用 */
.item{
    width: 115px;
    height: 118px;
    margin: 50px auto;
    /* 用来显现对比 */
    outline: 1px solid;
    background: url(../img/精灵图.jpg) no-repeat;
    /* 背景坐标来调，调完后就改宽高 */
    background-position: -92px -135px;
}
/* 精灵图渲染 */
/* 假如截取好的精灵图刚好是灰色，就可以渲染成白色

filter: brightness(0) invert(1);
    brightness(0)：将图标变为全黑。
    invert(1)：将黑色反转为白色。 */

/* 如果不是颜色反转，而是渲染成其他颜色？ */
/* 通过 mask 属性将精灵图作为遮罩，透出黄色背景色 */

    /* mask 属性将精灵图作为遮罩，仅保留图标区域可见。
    background-color: yellow 用黄色填充可见区域。
    */
.play {
    position: absolute;
    width: 32px;
    height: 28px;
    left: 50%;
    top: 50%;
    background-color: yellow; /* 黄色背景 */
    -webkit-mask: url(../img/sprite.webp) no-repeat -42px -4px;
    mask: url(../img/sprite.webp) no-repeat -42px -4px;
}



/* 绝对定位 */——————/*所有绝对定位或者浮动的元素自动就变成display:block*/
/* 什么时候用决定定位？
下面三个条件满足任何一个，就可以使用
    1. 元素出现啊在一个天马行空的位置
    2. 元素是否存在，不影响其他元素的排列
    3. 单个元素在某个区域内水平垂直居中 */

/* fixed和absolute的区别
fixed是绝对定位的一种特殊情况，它们的参考系不一样
    absolute参考有定位的父元素——子绝父相
    fixed参考视图(浏览器窗口) */

/* 绝对定位的居中 */
/* 宽高一定要设置 */
.login{
    width: 200px;
    height: 100px;
    position: absolute;

    /* left和top是相对于参考系 */
    left: 50%;
    top: 50%;

    /* 此时只是左上角居中了，现在需要移动自己自身宽高的一半，使用margin-left */
    margin-left: -100px;
    margin-top: -50px;
}

/* 多个定位用户体验优先级 z-index(一般只对定位元素有效) 越大越靠近用户*/


/* 文字竖值居中就设置行高line-height，高度与父高一样 */


/* 如果考虑视频按钮渐变出来，可以考虑附上这些代码 */
.需要渐变的盒子box{
    /* ...代码区... */
    opacity: 0;/* 初始透明 */
    visibility: hidden;/* 隐藏元素 */
    transition: opacity 0.3s; /* 只对 opacity 过渡 */
}

.盒子的父亲:hover .box{
    opacity: 1;       /* 完全不透明 */
    visibility: visible; /* 显示元素 */
}


/* 属性值的计算过程 */
/* 确定声明值——属性冲突——继承——使用默认值 */
a{
    text-decoration: none;
    color: inherit;/*继承父元素的属性*/
}

/* 伪类选择器 */

:link 选中未访问过的超链接
:visited 选中已经访问过的超链接
:hover 选中鼠标移入的元素
:active 选中鼠标按下的元素
:focus 选中聚焦的表单元素
:disabled 选中被禁用的表单元素
:checked 选中被选中的表单元素
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-last-child(an+b) 选中an+b个子元素，a和b是常量，n的值会从0开始递增
:first-of-type 选中第一个指定类型的子元素
:last-of-type 选中最后一个指定类型的子元素

{display: block;}
/* 超链接：爱恨法则 love hate     LVHA
a:link{

}
a:visited{

}
a:hover{

}
a:active{

} */