css 学习笔记

base.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/* 内减 */
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

/*.clearfix::after{*/
/*    content: "";*/
/*    display: block;*/
/*    clear: both;*/
/*}*/

.clearfix::before , .clearfix::after{
    content: "";
    display: table;
}

.clearfix::after{
    clear: both;
}

笔记

.sx1 {
    /*超出父级部分  hidden  auto  scrool*/
    overflow: hidden;
    /* x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 内外阴影 默认阴影 */
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5) inset;
    /* 内部元素水平居中 */
    text-align: center;

    /*背景图片*/
    background-image: url("../img/icon_wx.png");
    /*不平铺 显示原大小*/
    background-repeat: no-repeat;
    /*显示位置 x y center 居中显示 0 从头开始显示*/
    background-position: 0 center;

    /* 浮动  块级元素 一行显示 顶对齐 ,行内块显示模式特点 */
    /* 浮动的盒子 会脱离标准显示 */
    float: left;
    float: right;
}
.imgzidinyi{
    background: url("../img/icon_wx.png") no-repeat right center;

}

/*合并相邻边框*/
.table4123{
    border-collapse: collapse;
}


/*清除浮动影响  清除两侧的影响*/
/*1 额外标签发 在底部添加一个 额外的 块级元素,清除浮动  块级元素使用的class 内 使用clear 属性且公认名称为 clearfix*/

.clearfix{
   clear: both;
}
/*2 单伪元素发  在父级上方*/
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

/*3 双伪元素法  同时解决 浮动影响 与 塌陷问题*/
.clearfix::before ,
.clearfix::after{
    content: "";
    display: table;
}

/*4 overfolw : hidden  解决浮动*/


.clearfix::after{
    clear: both;
}

.a1:hover{
    color: red;
}

.a1{
    text-decoration: none;
}


/*flex 布局*/
.flex1{
    /*具有挤压和拉伸的效果 */
    /*默认情况下 主轴方向的尺寸靠 内容撑开 ,侧轴方向 拉伸*/
    display: flex;
    /*主轴对齐方式*/
    /*space-around 平均显示 中间的空白是 两边空白的2倍*/
    /*space-between 两头贴边 ,中间平均显示 */
    /*space-evenly  全部空白 均分 */
    /*flex-start 从起点开始排列*/
    /*flex-end 从终点开始排列*/
    /*center zi布局会显示在fu布局的中间 所有子布局的总宽度居中显示*/
    justify-content: space-evenly;
    /*侧轴对齐方式*/
    /*1 align-items fu 布局设置 ,控制所有子控件*/
/*子控件使用 2 align-self  子控件设置  控制自己*/
    /*flex-start 从头开始显示   flex-end 从终点开始显示  center 居中显示  stretch 拉申*/
    align-items: center;
    /*主轴方向 row 横向   column 纵向*/
    flex-direction: column;

    /*父级剩余的尺寸 按比例分配*/
    flex:1;

    /*一行方不下 会 自动换行 wrap 换行 */
    flex-wrap: wrap;

    /*行对齐方式  区别于 侧轴 ,同时设置 以行对齐为标准*/
    /*space-around 平均显示 中间的空白是 两边空白的2倍*/
    /*space-between 两头贴边 ,中间平均显示 */
    /*space-evenly  全部空白 均分 */
    /*flex-start 从起点开始排列*/
    /*flex-end 从终点开始排列*/
    /*center zi布局会显示在fu布局的中间 所有子布局的总宽度居中显示   没有 warp 属性时  需设置 align-items 属性*/
    align-content: center;


}


/*input 相关设置*/
.myinput1{
    /*去掉输入框的边框*/
    border: 0;
    /*背景色透明*/
    background-color: transparent;
    /*去掉表单控件的焦点框*/
    outline: none;
}
/*修改input placeholder 的属性 */
.myinput1::placeholder{
    font-size: 14px;
    color: #787878;
}

/*a标签 修改宽高时 需要转为块级元素  或者 父级元素使用flex 模式*/

/*行内块和行内垂直方向对齐方式 vertical-align*/
.xs2{
    /*middle 居中*/
    vertical-align: middle;
}


/*<dl>*/
/* <dt>数据可视化课程</dt>*/
/* <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>*/
/*</dl>*/


/*相对定位 position: relative*/
/*相对定位 改变的 位置 是相对自己原来的位置*/
/*相对位置 不脱离标准流 原来的位置还是会占位的*/
/*相对定位 原模式不变 ,块级的还是块级的*/
.xx36891273{
    position: relative;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
}

/*绝对定位   子绝对布局 父相对布局*/
/*绝对定位 ,脱离标准流不占位*/
/*绝对定位 , 父级是position定位 这参照父级的 ,父级没有 这参照浏览器*/
/*绝对定位后的盒子 ,会变为 行内块级元素*/
.xx512412{
    position: absolute;

    transform: translate(-50%,-50%);
}

/*固定定位 */
/*固定定位 脱标 不占位 */
/*边偏移  top right left bottom 按浏览器为标准*/
/*行内块的特点  加宽高生效*/
.xx15701921{
    position: fixed;

    /*取值越大 ,显示位置月靠上*/
    z-index: 1;
}

/*CSS 精灵  css sprites*/

/*字体图标*/


/*垂直对齐方式 vertical-align*/
/*使用时 ,需要把属性设置到 height 最高的那个元素上*/
/*基线对齐后 也可以 去除底部基线*/
/*display:block 可以去除底部空白*/


/*transition 过度*/

.img231412{
    width: 200px;
    width: 200px;
    transition: all 1s;
}


.img231412:hover{
    width: 300px;
    width: 300px;
}


/*opacity 透明度*/
/*属性名 opacity*/
/*属性值 0-1*/

/*cursor 光标类型*/

/*作用: 鼠标悬停在元素上时 指针显示样式*/
/*属性值 */
/*default  默认 */
/*pointer 小手 */
/*text 工字型 提示输入文字*/
/*move 十字光标  提示移动*/


/*搜索引擎优化  SEO */
/*1 花钱*/
/*2 html 后缀*/
/*3 标签语义化  合适的地方 合适的标签*/
/*4 title  meta */

/*<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=yes">*/
/*<meta name="description" content="京东JD.COM-专业的综合网上购物商城，  为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">*/
/*<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">*/


/*transform : translate(x轴移动距离,y轴移动距离)*/
/*取值为百分比时 移动按距离按自身的宽高计算*/
/*translateX*/
/*translateY*/

/*transform:rotate 旋转角度  单位 deg (360度)*/

/*ransform-origin 水平原点位置 垂直原点位置   改变旋转的中心点*/
/*left right bottom top center*/

/*多重转换 先平移后旋转*/
/*transform :translate() rotate()*/


/*transform:scale(缩放比例)*/
/*transform:scale(x轴缩放 ,y轴缩放)*/


/*opacity : 0 透明度*/


/*transform:skew(); 倾斜*/

.adas121241{
    /*background-image: linear-gradient(
    方向,
    颜色1,
    颜色2
    );*/

    background-image: linear-gradient(red,green);
    /*to right 像右边渐变*/
    background-image: linear-gradient(to right ,red,green);

    /*45度斜角渐变,且在红色到达全部界面的80%后才开始渐变*/
    background-image: linear-gradient(45deg ,red 80%,green);

}

.asda12123{
    /*background-image: radial-gradient(*/
    /*半径 at 圆心位置,*/
    /*颜色1,*/
    /*颜色2 */
    /*);*/
    background-image: radial-gradient(
        50px at center center, red,pink
    );
    background-image: radial-gradient(
            50px 20px at center center, red,pink
    );
    background-image: radial-gradient(
            50px  at 50px 30px, red,pink 50%
    );


}

/** background-color: 指定填充背景的颜色。*/
/** background-image: 引用图片作为背景。*/
/** background-position: 指定元素背景图片的位置。*/
/** background-repeat: 决定是否重复背景图片。*/
/** background-attachment: 决定背景图是否随页面滚动*/
/*https://blog.youkuaiyun.com/weixin_43564570/article/details/113616689*/
.asd99742{
    position:relative;
}

.asd99742::after{
    position:absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    /*background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置*/
    /*background和background-size不能一起连用，否则不生效*/
    /*background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比），是图片宽高最长的那个边覆盖元素一边即可；*/
    /*background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比），是图片宽高最短的那个边覆盖元素一边即可；*/
    /*background-size ：100px 100px; // 调整图片到指定大小；*/
    /*background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸（并且并不需要包含元素显示设置宽高）*/

    background: rgba(0,0,0,0.5) url("../img/icon02.png") no-repeat center / 20px;
    opacity: 0;
    transition: all 0.5s;
}

/*
小提示:
默认状态下 html 和 body 的高度都为 0
*/

.asd99742:hover::after{
    opacity: 1;
    background-size: 50px;
}

/*空间转换*/

.kongjian01{
    /*transform: translate3d(x,y,z);*/
    /*transform: translateX();*/
    /*transform: translateY();*/
    /*transform: translateZ();*/

    /*默认是无法看到z轴的移动效果的*/

    /*perspective:  视距属性; 800 - 1200 给父级设置*/

    /*transform: rotateZ();*/


    transform-style: preserve-3d;/*3d 父级添加*/
    transform-style: flat;       /*平面*/
}


.cube{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: all 1s;
    transform-style: preserve-3d;
}
.cube div{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
}

.front{
    background-color: orange;
    transform: translateZ(100px);
}
.back{
    background-color: green;
    transform: translateZ(-100px);
}

.cube:hover{
    transform: rotateY(80deg);
}


@keyframes anim1 {
    from{

    }
    to{

    }
}

@keyframes anim2 {
    0%{

    }
    10%{

    }
    100%{

    }
}
/*
https://blog.youkuaiyun.com/m0_50037012/article/details/124305930
animation : 动画名称 动画时常 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态

速度曲线
        ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
        linear - 规定从开始到结束的速度相同的动画
        ease-in - 规定慢速开始的动画
        ease-out - 规定慢速结束的动画
        ease-in-out - 指定开始和结束较慢的动画
        cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
        steps(3) 分步动画

延迟时间
        1s 2s ...
重复次数
        2
        3 固定数值 固定重复次数
        infinite  一直重复
动画方向
        alternate  反向动画 过去 回来 过去 回来
执行完毕状态
        forwards  停留在动画执行完毕的状态
        backwards 停留在动画开始状态 (默认值)

单独设置
animation-name 动画名称
animation-duration 动画时常
animation-delay 延迟时间
animation-fill-mode 动画执行完毕状态
animation-timing-function 速度曲线
animation-iteration-count 重复次数
animation-direction 动画执行方向
animation-play-state 暂停动画 paused为暂停 通常配合:hover使用

*/
.animasd{

    animation: anim1 1s;

}
/*bootstrap*/

/*https://v5.bootcss.com/docs/getting-started/download/*/
/*container 响应式版心*/
/*row 行*/
/*col-1 列 */
/*栅格系统*/
/*none  <  576*/
/*sm  >= 576*/
/*md  >= 768*/
/*lg  >= 992*/
/*xl  >= 1200*/
/*xxl >= 1400*/

/*父级必须是 row*/
/*col -sm - 1 */
/*col -md - 1 */
/*col -lg - 1 */
/*col -xl - 1 */
/*col -xxl- 1 */