HTMLCSS学习笔记

定义版心类

.wrapper{
    width: 1200px;
    margin: 0 auto;
}

<div class='wrapper'></div>

透明的背景颜色

background-color: rgba(0,0,0, 0.3)
里面的0.3就是透明度

垂直居中属性

vertical-align:middle
垂直居中需要定义父级组件高度

清楚浮动通用代码

/* .clearfix::before 作用：解决外边距塌陷问题 */
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

/* 真正清除浮动的标签 */
.clearfix::after {
    clear: both;
}

<div class='clearfix'></div>

定位position

相对定位：relative
相对定位是根据自己本身的位置来做位置偏移

绝对定位：absolute
绝对定位根据上一个定位的组件来发生偏移的。所以在使用的时候一般都会在上一个组件的css属性上添加一个相对定位来做坐标起始点。

绝对定位水平垂直都居中

/*基于窗口的水平垂直都居中的盒子*/
.box{
    position:absolute;
    left:50%;
    /* margin-left: -150px; */

    top:50%;
    /* margin-top: -150px; */

    /* 位移：自己定位宽度高度的一般 */
    transform: translate(-50%, -50%);

    width:300px;
    height:300px;
    background-color:pink;
}

精灵图

同一个透明的png图片，用背景定位去选取对应哪个需要的图标

.one{
     display:inline-block;
     width: 18px;
     height: 24px;
     background-image: url(./images/taobao.png);
     /*
     背景图位置属性：改变背景图的位置
     水平方向位置   垂直方向的位置
     background-position: x y;
     */
     background-position: -3px -20px;
}

css自定义变量

css变量有作用域，所以根据需要来定义变量，如下代码所示作用域为整个页面

html{
    /*定义css变量*/
    --main-color: #C00000;
}

.box{
    background-color: var(--main-color);
}