- 博客(42)
- 收藏
- 关注
RSS订阅原创 【CSS】深入理解：BFC究竟是什么?
常见的形成BFC的场景根元素（html,:root）浮动元素（float属性部位none）绝对定位元素（absolute或fixed）行内快元素（display为inline-block）表格单元格（元素的display为table-cell(默认)）表格标题（display为table-caption）
2024-04-20 21:55:23
911
原创 【HTML】H5新增元素记录
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。data-*是全局属性，可以在所有元素中定义，并且javascript中操作DOM通过dataset轻松获取到。HTML元素用于在HTML中嵌入媒体播放器，支持文档中的视频播放。HTML元素用于在文档中嵌入音频内容，和video的用法类似。遇到浏览器不支持MP4格式时，会自动切换到webm的格式。用途：通常用于HTML和javascritp的数据传递。
2024-04-20 21:00:24
631
原创 【CSS基础】10.过度动画transition和动画animation
CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。可以让CSS的属性变化称为一个秩序一段时间的过程，而不是默认的立即生效比如在基础9中我们学到的trnaslate可以让一个元素移动，但瞬间就完成了我们可以利用trnasition让这个完成的过程有一定的动画效果属性可以控制的内容哪些属性需要进度过度动画何时开始，可以延时触发，比如2s后再进行动画持续多久（duration）动画的持续时间定义动画（匀速、先快后慢、先慢后快）timinganimation的定义。
2024-04-13 21:16:23
1097
原创 【CSS基础】9.形变transform
CSS transform属性允许对某个一个元素进行形变，包括旋转、位移、缩放、倾斜等并非所有的盒子都可以形变（通常来说行内级盒子不能进行形变）transform-origin:形变的原点在缩放scale和rotate的过程中，需要参照原点来进行形变transform-origin是一个CSS属性，并不是trnasfrom的一个函数一个值为x轴的原点默认为center二个值为x轴和y轴的原点，默认center。
2024-04-13 19:38:19
539
原创 【CSS】Flex布局中遇到的问题汇总
到底该怎么做呢，我们应该想这样一个问题，父元素设置为flex时，所有的子元素都将不再遵循行内元素或者块级元素的限制，默认的宽度（主轴的方向为x轴时）为0，高度最大为充满单行交叉轴的高度，所以为了解决盒子排布不规范，我们可以这样做。如图，显然，space-between并不能达到我们预期的效果，一般来说我们预期的效果应该是最后一行盒子从左到右依次排列，并空出一个位置。在最后一行中添加多余的元素，设置其宽度和其他盒子一样，高度为auto，这样子盒子因为有宽度会占据位置，因为没有高度不会撑开盒子，代码贴上。
2024-04-13 18:25:23
295
原创 【CSS疑难点汇总】1.bor-box失效情况总结以及高宽设置为auto的情况
box-sizing是改变盒子宽高的计算方式，一般使用bor-box，消除padding和border对整个盒子的影响，但在没有明确给出宽高的情况下，box-sizing是没有效果的。如上图，我们并没有给box设置box-sizing：border-box，但box的高度被撑开了，宽度依旧和父元素相同，并没有被撑开，因为box继承了父亲的宽度，wdith为auto。现在明白宽度的继承和设置100%的区别了吧，设置了100%相当于明确给了子元素的宽度的数值。如上图，很明显，当box的宽度和高度为auto时。
2024-04-09 08:40:27
554
原创 【CSS布局】Flex 布局
举例：当设置wrap时，第五个盒子设置的高度为auto，也就是交叉轴的方向（如果交叉轴方向为从左到右，实现效果需设置宽度为auto） 在标准流中，我们通过元素的前后顺序来给元素进行排序，在flex布局中，每个元素都有order属性，默认为0。flex flow是flex-direction和flex-wrap的简写，可以任意位置，并且都可以省略。单独对某个item设置，可以覆盖container中的align-items的设置。设置主轴的方向，主轴设置了，交叉轴也就设置成功了。 属性值更大的排在后面。
2024-04-07 23:21:31
1092
原创 【CSS布局】float考拉布局加边框的布局
核心思想：给item设置边框，有重合的边框可以利用margin负值来重叠隐藏，但需要给item宽度补偿，由于整个布局的宽度为1100px 1100px/5 = 220px，但由于布局中中间有6条边框，所以无论如何都会超出一个像素，可以将其中的一个盒子像素减少1px来解决这个问题。考拉布局加边框的布局。
2024-03-31 16:51:42
167
原创 【CSS布局之】京东浮动布局，利用宽度的auto来解决兼容性问题
总盒子宽度为1190,如果要浮动排布5个盒子，间距为10px，宽度为230px。
2024-03-31 16:26:15
220
原创 【CSS】CSS定位元素
但这样有一个缺点，海报图对于一个网站上很重要的，应该用img标签实现。当一个定位元素的层级设置为负整数时，层级没有标准流的层级高。 元素按照标准流布局，所有元素的默认定位是static。方法1：利用background-position来进行。设置绝对定位元素的垂直水平居中。方法2:利用相对定位。
2024-03-31 15:49:11
1252
原创 【CSS难点总结】元素的隐藏方法
方法：display:none元素不显示出来，并且也不占据位置，不占据任何空间（相当于不存在）方法二：visibility:hidden设置为hidden,虽然元素不可见，但是会占据元素应该占据的空间默认为visible方法三：rgba设置颜色，将a的值设置为0rgba的a设置的是alpha的值，可以设置透明度，不影响子元素方法四：opacity设置透明度，设置为0设置整个元素的透明度，会影响所有的子元素Overflowvisible:溢出部分可见hidde
2024-03-29 08:31:03
172
原创 【CSS】伪元素
伪元素常见的伪元素::first-line::first-letter::before::after为了区分伪类和伪元素，建议伪元素都使用2个冒号::first-line可以针对首行文本设置属性::first-letter可以针首字母设置属性::before 在一个元素前插件元素::after 在一个元素后插入元素
2024-03-29 08:29:12
358
原创 【CSS】高级元素：列表、表格、表单
常见的boolean属性有disabled、checked、readonly、multiple、autofocus、selected，只需要写上名称就代表这个属性。*其他取值查看文档：*https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。select和option的使用。input和label的关系。textarea的使用。
2024-03-29 08:27:46
833
原创 【CSS】设置图片背景以及和img的关系
background中bg-size是可以省略的，如果不省略需要紧跟在background-position后面，并添加/local:表示属性值随着背景相对固定，如果一个元素拥有滚动机制，北京的 内容会随着元素的内容滚动。scroll:此关键属性值表示北京相对于元素本身固定，而不是随着它的内容滚动。注意：如果设置了背景图片，而没有设置宽高的情况下，图片显示不出来。fixed:表示北京相对视口固定，北京不会随着元素的滚动而滚动。设置的第一张图片将显示在最上面，其他图片将会层叠在下面。
2024-03-26 14:06:47
383
原创 【CSS】元素的水平居中方案
行内级元素（包含inline-block） 水平居中：在父元素中设置text-align:center;块级元素 margin:0 auto;
2024-03-26 13:38:45
87
原创 【CSS】元素的水平居中方案
行内级元素（包含inline-block） 水平居中：在父元素中设置text-align:center;块级元素 margin:0 auto;
2024-03-26 09:30:59
102
1
原创 【CSS】行内非替换元素的注意事项
内边距padding:上下会被撑起来，但是不会占用空间，左右会撑起来，也会占用空间。border:上下会被撑起来，但是不占用空间，左右占据空间。margin:上下没有效果，左右可以撑起来。什么是行内非替换元素呢？
2024-03-26 09:27:02
221
1
原创 【CSS】margin的传递与折叠
垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin，这种现象叫做折叠（collapse）如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠，则这个块级元素的margin-top值会传递给父元素。显然，子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。
2024-03-26 09:10:16
453
1
原创 【CSS】盒子模型中margin-bottom的传递
总结：当父盒子的height为auto时，子盒子设置margin-top和margin-bottom时，会传递给父盒子。当我们给子元素，container一个margin-top时，父元素也会跟着移动。对于块级盒子中的子元素的margin对父盒子的影响。假如我们增加的是盒子的底部margin距离？当我们改变一点CSS。
2024-03-25 18:52:14
224
1
原创 【Git】基本操作
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hNvBZJHZ-1690898369691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230801212156496.png)]通过git config --global user.name 和git config --global user.email配置的用户名和邮箱地址，会被写。这个文件是Git 的。
2023-08-01 22:00:21
90
1
原创 Vue3中全局事件总线enentBus使用教程
在vue2中我们可以通过全局事件总线来进行任意组件的数据传递，也可以说是发送消息，全局事件总线中需要满足两个条件，其中要包含emit和on，还有就是所有组件中都需要能访问到，我们在Vue的原型对象上增加了一个全局变量，busVueprototypebus，将Vue对象指向了bus，这样我们就可以通过emit和on来进行数据的发送和接收了，但Vue3中删除了on、$off等方法，推荐使用mitt方案。
2023-06-27 14:17:00
1201
2
原创 【Vue】利用开源项目vue-element-admin来实现vue中excel的导入导出
同理，我们可以拿到vue-element-admin中vue-element-admin/src/vendor中的两个文件下载到我们的common文件中。src目录下创建upload文件夹，新建index文件，拷贝vue-element-admin中的index文件内容,创建index.vue。点击按钮就可以导出数据了，至于数据格式的问题，那就根据需求来写喽。修改vue-element-admin中下载的源文件。接着我们可以在upload文件夹中定义一个导出的组件。
2023-06-25 19:15:35
867
1
原创 【Vue插件】Vue中封装Echarts插件
百度的echarts裤并没有在vue中封装插件，我们在项目中使用 echarts时，在组件中去引用，从而导致我们的项目不好管理，特别是echarts用的多的情况下，整个项目不好维护，止于此，我们可以考虑将echarts封装成一个插件，从而方便管理，话不多说，上干货。众所周知，Vue.use(XXX)中，XXX代表插件名，这个方法表示中代表插件中必须要实现一个install方法。
2023-06-22 23:16:14
2838
1
原创 【Vue】Vue-Vuex的简单用法（一）
学习vue2.0时特别记录如何使用vuex，现在只记录如何使用，后续再修改心得以上为Vuex中state、matations、actions的用法。
2023-06-14 20:57:09
41
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人