文章分类 -  前端

原生js实现图片瀑布流（图片加载不及时，高度获取不到（采用onload和递归函数解决））
摘要：瀑布流 阅读全文
posted @ 2025-09-02 10:30 五季-子琛 阅读(4) 评论(1) 推荐(0)
rem布局模式(少量)+ filter 滤镜(主要)
摘要：1、em和rem的区别 em 相对于当前元素或父元素标签的尺寸 ，可以说，套的层级越深越复杂 rem 相对于 html 根标签的尺寸 ，使用 rem 避免了层级关系，避免了复杂程度 必须要知道html的默认尺寸是多少：16px 2、rem 应用场景 rem可以根据不同设备的屏幕尺寸来调整页面的布局和 阅读全文
posted @ 2023-11-01 18:59 五季-子琛 阅读(65) 评论(1) 推荐(0)
文本背景裁剪与渐变效果
摘要：文本背景裁剪 background-clip: text; -webkit-background-clip: text; 呈现效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport 阅读全文
posted @ 2023-10-31 20:13 五季-子琛 阅读(19) 评论(0) 推荐(0)
3D效果 + 布局模式1
摘要：1、透视、视距 透视属性 perspective: 300px; 这种方法添加在父元素身上 灭点位置(看图的位置) perspective-origin: right bottom; 透视属性添加在子元素身上 transform:perspective(500px); 2、3D模型（使用3D） tr 阅读全文
posted @ 2023-10-31 20:03 五季-子琛 阅读(21) 评论(0) 推荐(0)
CSS过渡效果、2D 效果及动画效果
摘要：1、过渡 定义过度的属性 transition-property: width,height; transition-property: all; 过度的时间：单位s transition-duration: 1s; 合并：属性 + 时间 + 运动曲线 transition: all 1s ease 阅读全文
posted @ 2023-10-30 20:33 五季-子琛 阅读(106) 评论(1) 推荐(0)
浮动与内外边距合并
摘要：浮动 div元素在一行显示,可以有哪些方式: 1、display:inline-block 行块元素 2、父元素添加弹性盒子 display:flex 3、浮动 float 特性:可以提升半个层级(盒子可以抬起,但是文字没办法) 浮动的元素,要么碰到盒子的边框;要么碰到另外一个浮动框,也会停止 会影 阅读全文
posted @ 2023-10-25 10:32 五季-子琛 阅读(17) 评论(0) 推荐(0)
HTML表单标签
摘要：一、属性有 action 提交的路径地址,也就是后端的接口地址 method: get 表示地址栏提交数据，有比较私密的信息尽量不要使用 传递的数据量是有限的 post 以隐藏的方式提交 enctype 属性是 HTML 表单中的一个重要属性 定义了当表单数据被提交到服务器时，应该如何对数据进行编码 阅读全文
posted @ 2023-10-14 13:49 五季-子琛 阅读(16) 评论(0) 推荐(0)
HTML/CSS盒子模型 display，overflow的作用
摘要：一 display /* 把块元素 转为 行元素 */ /* display: inline; */ /* 元素隐藏 none */ display: none; /* 把行元素 转为 块元素 */ /* display: block; */ /* 行快元素 */ display: inline-b 阅读全文
posted @ 2023-10-14 11:47 五季-子琛 阅读(34) 评论(0) 推荐(0)
CSS--flex布局与定位
摘要：flex弹性盒子布局 1. 关键词 display:flex; 我们将设置flex布局的盒子称之为容器，将容器下面的儿子（仅儿子）称之为项目；当给儿子设置flex后，它就变成了容器！ 父元素=容器,子元素=项目, (默认)水平方向=主轴, (默认)垂直方向=交叉轴 当 项目 的 宽高 接近于 容器 阅读全文
posted @ 2023-10-14 11:19 五季-子琛 阅读(777) 评论(1) 推荐(0)
html+css标签属性
摘要：top 上 right 右 bottom 下 left 左 ctrl+/ 注释 width 宽 height 高 &nbsp 一个空格 &emsp 四个空格 <br/> 换行 <hr/> 横线 align 位置left/center/right 下面三个应用于文本隐藏+省略号 1. Whist-sp 阅读全文
posted @ 2023-10-10 20:39 五季-子琛 阅读(9) 评论(0) 推荐(0)