随笔分类 - css
摘要://隐藏滚动条 ::-webkit-scrollbar { display: none; } 项目详情展示模式和项目操作模式的区分 详情展示只读模式 readonly布尔值控制整个详情展示 项目操作模式, 若有时间线,那么只有当前时间线的可操作,其他全部为readonly只读模式 流程线控制,用流程
阅读全文
摘要:父盒子 overflow:hidden; 图片 float:left; 简介 overflow:hidden;
阅读全文
摘要:1.z-index简介 (1) 概念 z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生覆盖的层叠关系。 (2) 属性值 1.默认auto 为什么元素添加定位属性(不包括static)后会覆盖普通元素? 元素添加定位属性(不包括static)后,z-index默认是auto
阅读全文
摘要:如果要给一个dom元素,同时设置多个不同的CSS变换(transform)属性时, 在属性中间用空格隔开即可, 旋转 缩放 扭曲 等同时执行多个效果! div{ width: 100px; height: 100px; background: red; <!--这里是设置变换过渡时间--> tran
阅读全文
摘要:前言 修改svg颜色,一般直接修改文件的svg的fill属性就可以了,可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代码整洁度考虑,都更佳优秀,但问题也随之而来,没法通过css改变svg的颜色。 下面来介绍一种通过css改变通
阅读全文
摘要:小程序的横向滚动生效需要具备以下条件 1.scroll-view 中的需要滑动的元素不可以用 float 浮动; 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的; 3.scroll-view 中的需要滑动的元素要用 dislay:inline-
阅读全文
摘要:wxml <view class="conts"> <textarea class="areas" placeholder='订单备注' maxlength="{{orderNoteMax}}" bindinput="inputs"> <text class="currentWordNumber">
阅读全文
摘要:最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:inter-ideograph; 但问题是,我怎么就看不到效果呢?无论是英文还是中文,在IE和chrom
阅读全文
摘要:height:calc(100% - 20px); 注意:减号两边一定要打空格,不然会失效
阅读全文
摘要:CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。 一、文本选择颜色 当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。 我们可以使用伪元素来实现这种效果: ::selection { backgrou
阅读全文
摘要:如何清除图片下方出现几像素的空白间隙? 方法1: img{display:block;} 方法2: img{vertical-align:top;} 除了top值,还可以设置为text-top | middle | bottom | text-bottom 甚至特定的和值都可以 方法3: #test
阅读全文
摘要:.font2 { display: inline-block; font-family: '微软雅黑'; font-size: 10em; position: relative; } .font2::after { content: attr(data-text); color: green; po
阅读全文
摘要:小程序对换行很敏感,若数据渲染有换行,可能导致盒子高度改变(文本行高导致,空格也当作内容) vh和vw以及100%,rpx做样式适配
阅读全文
摘要:display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-between;
阅读全文
摘要:/* checkbox大小的调整 */ checkbox { transform: scale(0.7,0.7); } /*checkbox选中后图标样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width
阅读全文
摘要:flex布局 居中 display:flex; justify-content: center;检查侧轴是否居中,比如古代竖着写字,检查字是否在每条竹简的中央。 display:flex; align-items: center;检查横轴是否居中,比如现代人是横着写字,检查字是否写在上下横线的中间。
阅读全文
摘要:/* radio样式修改 */ /* 单选、多选 勾选 */ /* 默认背景样式*/ radio .wx-radio-input{ width: 20rpx; height: 20rpx; background-color: #fff!important; text-align: center; l
阅读全文
摘要://核心是 -webkit- background: -webkit-linear-gradient(left, #fb5c30, #ef1125);
阅读全文
摘要:/* // 取消input的上下箭头,局部样式不能生效 */ input::-webkit-inner-spin-button { -webkit-appearance: none !important; } input::-webkit-outer-spin-button{ -webkit-app
阅读全文