css 学习笔记

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量57 收藏
点赞数
分类专栏： html 文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a136447572/article/details/131003859
版权

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.csdn.net/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.csdn.net/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 */
a136447572
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
CSS学习笔记
m0_58761900的博客
09-18 2999
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 864
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 1872
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
css学习笔记
weixin_45085122的博客
11-13 1288
css
【CSS学习笔记】
weixin_45037690的博客
08-12 723
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 98
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 322
【代码】vuetify3.0+tailwindcss+vite最新框架。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 112
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 304
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
【前端技术】CSS基础入门篇
软件测试知识输出
04-24 673
css（Cascading Style Sheets，缩写为，也叫作层叠样式表）是一套美化HTML标签所编写出页面的语法，CSS描述了如何在不同设备上渲染内容的方法。
深入解读CSS高级选择器
艾恩小灰灰的博客
04-27 175
CSS选择器是网页样式设计的核心组成部分，它们使开发者能够精准定位页面上的元素并施加相应的样式。在众多选择器中，高级选择器因其强大的定位能力和灵活性备受青睐。接下来，我们将逐一详解这些高级选择器，并通过实例代码加深理解。
CSS实现广告自动轮播
m0_72895175的博客
04-20 580
实现原理该广告轮播功能的实现主要依靠HTML和CSS。HTML负责搭建轮播框架，而CSS则控制样式和动画效果。通过CSS中的关键帧动画（Keyframes），我们可以定义图片在容器内的滚动效果，从而实现轮播功能。
CSS体验
lan_da_wang的博客
04-27 133
</em>:表示字体倾斜。区别：<em>
css盒子设置圆角边框的方法
2302_79590880的博客
04-24 338
css设置圆边盒子的方法
【CSS】深入理解：BFC究竟是什么?
kakaai77的博客
04-20 836
常见的形成BFC的场景根元素（html,:root）浮动元素（float属性部位none）绝对定位元素（absolute或fixed）行内快元素（display为inline-block）表格单元格（元素的display为table-cell(默认)）表格标题（display为table-caption）
css常见动画
weixin_43411214的博客
04-16 684
【代码】css常见动画。
黑马程序员css笔记
08-18
- *1* *2* *3* [黑马程序员pink老师_CSS学习笔记](https://blog.csdn.net/weixin_46764819/article/details/123336658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值