随笔分类 - css
关于css的应用
摘要：.test { /* 设置全屏宽高，覆盖于页面上方 */ position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; opacity: 0.8; /* 生成的图片是有一张，开启repeat自动填充 */ background: rep
阅读全文
摘要：1、 <div style="float:left;width: 1px;height: 25px; background: #000;"></div> 2、 ` .lineStyle { box-sizing:border-box; display:inline-block; width:1px;
阅读全文
摘要：父元素添加 style="transform: scale3d(1, 1, 1);position: fixed;" 子元素添加：width: calc(100%); style="position: fixed;width: calc(100%);"
阅读全文
摘要：项目中可能会需要动态添加 style 行内样式，但是在长期维护的项目里面，尽量要避免使用。 注意： 1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。 2、除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'
阅读全文
摘要：一、使用场景 在 CSS 中，媒体查询用于根据不同的屏幕尺寸设置不同的样式。可以使用媒体查询来设置移动端的样式，例如调整字体大小、元素的宽度和高度、图片的缩放比例等。 二、基本使用方式 @media media-type and (media-feature-rule) { /* CSS rules
阅读全文
摘要：背景介绍： 我们做开发经常会遇到这样的一个需求，要开发一个响应式的网站，但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询（Media Queries）检测的是视窗的宽高，根本无法满足我们的业务需求，这时我们常常会用到一个container属性，容器查询来实现我们的，
阅读全文
摘要：div{ width:500px; height:600px; resize:both; // 可拖动方向 overflow:hidden; padding:15px; background-color:red; container-type:size; // 对 } div p { // cqw
阅读全文
摘要：需求： 浏览时默认只显示前三行文本，剩余部分折叠，点击“展开阅读全文”显示完整文本，再点击文末的“收起”恢复折叠状态 美化： “展开阅读全文”折叠杆挡住面板下端，并呈现半透明渐变效果 技术： HTML + CSS + Vue.js HTML代码： <div id="example"> <!-- 利用
阅读全文
摘要：mix-blend-mode 值可以是以下几个： mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mi
阅读全文
摘要：图表 <template> <div class="com-container"> <!-- 返回首页 --> <div class="retureIndex" @click="retureIndex"><i class="el-icon-full-screen"></i></div> <!-- 图
阅读全文
摘要：浅谈 清除浮动 的多种方式（clearfix） 1.什么是浮动 ? 是否脱离文档流? 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级元素在
阅读全文
摘要：注意: 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 【对象】 html 😒tyle="{ color
阅读全文
摘要：解决方案： <view class="uni-slsct"> // 父元素 <view class="uni-slsct_children" v-for="(item,index) in buttonList" :key="index" @click="intoBotton(item.id,item
阅读全文
摘要：项目中正好遇到这个问题，在网上搜了搜，终于找到合适的方法，仅借鉴过来供自己和大家学习 接到UE需求，需要对界面滚动条进行修改，主要是鼠标悬停改变颜色和大小，心里想着是比较简单的（万恶的IE肯定不在考虑范围内），谁知道愣是搞了半天才完成ORZ，直接上源码和实现图吧。 其他前端有趣的例子和坑合集：htt
阅读全文
摘要：定义ref链 在方法中执行 this.$refs.UI.style.setProperty("--color",localStorage.getItem("colorValue"));//给变量赋值(后面这个是要取得的参数) style上面应该写
阅读全文
摘要：浮动是布局的时用到的一种技术，能够方便我们进行布局。 1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3、浮动的影响：
阅读全文
