样式笔记

最新推荐文章于 2024-07-25 11:12:43 发布

北冥烟雨

最新推荐文章于 2024-07-25 11:12:43 发布

阅读量480

点赞数 19

文章标签：笔记 notepad++

本文链接：https://blog.csdn.net/qq_45423800/article/details/135181886

版权

老年版

//html中
:class="angeRemUnit? 'notice-normal':'notice-elder'"
//或者 .objection_page_content(:class="store.state.remUnit ? 'objection_normal' : 'objection_elder'")
//js中
computed: {
    ...mapState({ angeRemUnit: "remUnit" }),
  },
//css中
.notice(@font-sm:12px,@font-md:14px,@font-lg:18px){....}
.notice-normal{.notice()}
.notice-elder{.notice(18px,20px,22px)}

//只改字体大小的时候是这么写方便，但如果还要改布局等样式还是多写个样式好
:class=[angeRenUnit?'':'notice-elder','page_content']

禁止选中

user-select:none;

按钮移入出现小手

cursor:pointer;

强制换行

word-break:break-all;

单行省略

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

多行省略

display:-webkit-box;

text-overflow: ellipsis;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

微信小程序会出现编译后属性消失的情况
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */

注：英文自动换行

word-wrap:break-word;

word-break:break-all;

选中文字显示下划线

.active_tab {
    font-size: 28px;
    font-weight: 700;
    position: relative;
    &:after {
     content: '';
     width: 32px;
     height: 8px;
     background: linear-gradient(#258beb 0%, #25c3eb 100%);
     border-radius: 4px;
     position: absolute;
     left: 40%;    
     transform: translateX(-50%);
     bottom: 0;
    }
  }

class动态绑定

：class=“[isTest?‘active’:‘active1’,{‘one’:isOne},‘second’]”

数组里面逗号隔开，多个静态用空格隔开，

style动态绑定

:style='isTest?{width:item.minWidth}:{width:item.width}'
//样式多时
：style='isTest?style.active:style.commom'

let style=reactive({
	active:{
		width:'200px'
	},
	commonStyle:{...}
})

滚动样式

.box {
  height: 100 / @vh;
  overflow: auto;
  //滚动槽
  &::-webkit-scrollbar {
    width: 8 / @vw;
    border-radius: 2px;
    background: rgba(30, 144, 255, 0.2);
  }
  //滚动槽样式
  &::-webkit-scrollbar-track {
    border-radius: 2 / @vw;
    //opacity:0;
  }
  //滚动块样式
  &::-webkit-scrollbar-thumb {
    background-color: rgba(46, 140, 255, 0.8) !important;
    border-radius: 2 / @vw;
  }
}

字体

引入

@font-face {
  font-family: "DIN";
  src: url("../../../assets/fonts/DIN-Medium.otf");
}

颜色渐变

background-image: -webkit-linear-gradient(
  -90deg,
  #ffffff 50%,
  #a0e4ff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

暂无数据

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

边框渐变

//边框没有圆角
.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
//边框有圆角但背景不透明
box-sizing: border-box; 
padding: 1px; //这是边框的宽度
border-radius: 14px; 
background-image: linear-gradient(to right, rgba(1,254,255,1) 2%, rgba(0,255,255,0) 50%, rgba(1,254,255,1) 98%); 
//边框有圆角且背景透明
用绝对定位固定,四个角以及渐变的线条

媒体查询

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {
  .car_box.el-card {
    min-width: 450px !important;
    width: 450px !important;
  }
}

数字固定宽度

font-variant-numeric: tabular-nums

连续空格

<text decode>&nbsp;&nbsp; <text>

按钮点击

.btn:active {
  transform: scale(0.98);
}

图片

aspect-ratio

//设置宽高比 取值 3 / 2

object-fit

cover 会裁剪
fill 会拉伸
none contain 会留白
// 可以用 object-position 修改展示位置，默认 50% 50%

sass

函数变量

$base_width:1920;
@function vw($px){
	@return ($px / $base_width)*100vw;
}
$base_height:1080;
@function vh($px){
	@return ($px / $base_height)*100vh;
}
.left_top{
	height:vh(290);
}

注意事项

变量 –

 header {
/* 设置一个控制背景色位置的CSS变量，方便JS控制 */
        --position: 100;
 }
const header = document.getElementsByTagName('header')[0];
header.style.setProperty('--position', 100 - Math.min(100, top));

1.伪元素不要用flex居中，在iOS上伪元素可能不是元素，无法居中

2.calc()函数内需写空格，不然不会起作用

3.less中引入 @import url(“./assembly/admin/layout.less”);

适配

1.iframe嵌入 ,用px

2.用less,定义变量，然后除

@vw: 19.2vw;
@vh: 10.8vh;
.home_screen {
  display: flex;
  .between_area {
    width: 490 / @vw;
    flex-shrink: 0;
  }
  .center_area {
    flex-grow: 2;
    padding: 0 36 / @vw;
  }
}

3.用sass,定义函数

$base_width: 1920;
@function vw($px) {
  @return ($px / $base_width) * 100vw;
}
$base_height: 1080;
@function vh($px) {
  @return ($px / $base_height) * 100vh;
}
.title {
  opacity: 0.6;
  font-size: 3rem;
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  padding-top: vh(23);
  padding-left: vw(43);
}

4.uniapp,用rpx
5.使用zoom,但一些拖拽，一些组件库的鼠标事件需要额外处理