
css
ttt唐老鸭
爱做视频,爱玩游戏,爱摸鱼的程序猿
展开
-
uniapp image 的mode常用属性
比起文字,我更喜欢图片来的直接,使用image时,外层建议包裹一层view,因为image mode .image_wrapper{ width: 400rpx; height: 400rpx; border: 1px solid black; margin: 0 auto; .img{ width: 100%; height: 100%; } }aspectFit 缩放显示图片全部aspectFill 缩放填满容器,但原创 2021-07-05 14:46:30 · 14852 阅读 · 0 评论 -
flex 设置一行个数
关键属性flex-wrap: wrap;,是否felx里面会换行。如何设置几个设置子元素的宽度,想3个 就宽度33.3333% 想5个就20%例子 .cardList { display: flex; flex-wrap: wrap; .card { width: 33.3%; .content { width: 220rpx; height: 260rpx; margin: 0 auto;原创 2021-06-08 17:51:54 · 8965 阅读 · 2 评论 -
在行内样式 或 对象格式的样式中 使用scss变量
前言scss可以通过$mcolor:color,设置变量,方便全局统一样式和后续修改整体风格。一般也不会写行内样式,所以用起来没什么问题。但是在使用uniapp及其第三方ui框架uview的时候,有的样式你还必须得写成行内。比如下面这个配置。必须写成对象格式的。所以需要在这里也能拿到scss定义的变量。方法,使用css变量/*uni.scss scss文件*/$testColor: red;/*App.vue 全局的样式文件*/body{--difference:#{$testColor原创 2021-06-08 15:47:48 · 3653 阅读 · 0 评论 -
css溢出文本省略号
参考地址CSS实现单行、多行文本溢出显示省略号(…)简单总结overflow: hidden;text-overflow: ellipsis;white-space: nowrap;原创 2021-05-12 16:41:58 · 115 阅读 · 0 评论 -
Css单位px,rem,em,vw,vh vm的区别
pxpx就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的emem是相对于父元素的字体尺寸,如果父元素没设置则相对于浏览器设置的默认字体尺寸。所以em的值每次都可能不一样。remrem是相对于HTML根元素的字体大小来计算的,有设置html的字体大小的时候就会以默认字体大小16px设置。所以html{font-size: 62.5%}(10÷16),这样设置1rem就等于10px了,方便计算。vw,vh是相对于浏览器可视的宽度和高度定的,比例原创 2021-04-07 16:50:17 · 585 阅读 · 0 评论 -
css 清楚浮动
1 父元素overflow:hidden.father { border:1px solid green; overflow: hidden;}.son{ border:1px solid red; height:100px; width:100px; float: left;}2 父元素强行设置高度管你浮不浮动,老子就这么高3 最麻烦的clear:both在浮动的div后面再加个空div <div className="clear"></原创 2021-04-07 16:20:58 · 98 阅读 · 0 评论 -
css 水平垂直居中
1 通过绝对定位和相对定位经常看见有人分什么子元素宽度已知和宽度未知,这两个其实就是一种情况。用百分比是通吃的。原理就是top 50% 和 left 50% 的时候是以左上角为基准的,左上角居中了,这时候只要把自己再反过来移动半个宽度和高度就变成真正的居中了.father { border:1px solid black; height:400px; width:400px; position: relative;}.son{ border:1px solid red;原创 2021-04-07 16:11:23 · 113 阅读 · 0 评论 -
react 轮番图库swiper
相关地址github官方demoapiswiper的react使用文档实例import React from 'react'//引入核心和组件import SwiperCore, {Pagination,EffectCoverflow } from 'swiper';import { Swiper, SwiperSlide} from "swiper/react";//引入样式import "swiper/swiper.scss";import "swiper/components/原创 2021-02-25 19:34:35 · 244 阅读 · 0 评论 -
浮动后缩放或调整浏览器大小导致塌陷 和 通过绝对定位来实现宽度高度自适应
1.浮动后缩放或调整浏览器大小导致塌陷正常情况缩放或调整了浏览器大小导致了塌陷解决方法父元素设置指定宽度(width或者min-width)2.通过绝对定位来实现宽度高度自适应问题a,b 左浮动,c右浮动.怎么能让b在不同的缩放和浏览器大小下自动填满中间呢?解决方法利用绝对定位.left{ float: left; width: 300px;}.middle{ position: absolute; left: 300px;原创 2021-02-19 23:14:05 · 927 阅读 · 0 评论 -
好用的屏幕取色器Just Color Picker
前言因为设计师给的页面设计图只是一张图片没有具体的颜色参数,所以照着画前端界面的时候就需要拾色器来获取准确的颜色。软件 Just Color Picker下载地址下载方法1. 点击download2. 选择你电脑对应的版本 windows 64位就是选第一个使用方法软件非常小点开即可使用,在选项中可以设置快捷键和打开自动复制...原创 2021-02-19 20:58:34 · 1234 阅读 · 0 评论 -
react css 修改复写antd组件样式,而且不污染全局
方法比如说我想删掉antd Input.Search 的左边框从页面上找到要修改的位置,页面上修改后确定是这个样式名利用:globalcss中写法:global(.ant-input-search-icon:before){ border-left: initial;}scss或者less中写法 scss自带嵌套比较方便 :global{ .ant-input-search-icon:before{ border-left:原创 2021-02-09 21:20:42 · 6259 阅读 · 1 评论 -
css 背景图片模糊遮罩效果
思路在父元素上之上再加一个图层并调整该图层的透明度顺便一提:熟悉ps或pr的应该知道这图层叫做遮罩或者蒙版方法利用:after伪元素dom元素 <div className={styles.headerWrapper}> <div className={styles.header}> </div> </div>css代码.headerWrapper{ background-size: cover; backgr原创 2021-02-09 18:20:52 · 1912 阅读 · 0 评论 -
css 垂直居中
方法display: inline-block;vertical-align:middle.logo{ background: url("../../assets/img/logo.png"); width: 30px; height: 30px; display: inline-block; vertical-align:middle}效果原创 2021-02-09 10:01:00 · 93 阅读 · 0 评论