![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css/html
i前端小学生
这个作者很懒,什么都没留下…
展开
-
Element-UI 另类技巧
el-scrollbar 滚动条<el-scrollbar> <div class="box"> <p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p> </div></el-scrollbar><style scoped>.el-scrollbar { border: 1px solid #ddd; height:原创 2021-11-09 17:49:05 · 141 阅读 · 0 评论 -
微信小程序富文本设置样式
两种方法如果富文本标签有class类名,我们可以直接通过类名修改class样式js里面: 【使用拼接和正则的方式来实现】原创 2021-06-16 18:58:04 · 1327 阅读 · 2 评论 -
css文字样式超出部分...三个点显示
/* 固定高度 */ width: 450rpx; /*超出部分隐藏*/ overflow: hidden; /*添加...*/ text-overflow: ellipsis; /* 一定要写 */ display: -webkit-box; /* 控制行数 */ -webkit-line-clamp: 2; /* 水平或垂直排排列 */ ...原创 2021-05-30 21:57:19 · 847 阅读 · 0 评论 -
移动端IOS适配之输入框首字母大写问题
autocapitalize 全局属性 是一个枚举属性,它控制用户输入/编辑文本输入时文本输入是否自动大写,以及如何自动大写。属性必须取下列值之一:off or none: 没有应用自动大写(所有字母都默认为小写字母)。 on or sentences: 每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。 words: 每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。 characters: 所有的字母都默认为大写。在物理键盘上输入时,autocapitaliz原创 2021-05-21 21:22:03 · 226 阅读 · 0 评论 -
px和em和rem的区别
1、px实际上就是像素,与物理像素有一定的区别,用px设置字体大小,比较精确,但是有缺点,当浏览器页面缩放时,px并不能跟随变大。当前网页的布局就会被打破。2、em是根据基准来缩放字体的大小。em是相对单位,一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的,这样就会存在一个问题,就是每一层父元素都必须有它的数值。3、而rem不同,rem是相对于根元素html,而此时我们只需要以rem为基准就可以了...原创 2021-05-21 21:10:12 · 108 阅读 · 0 评论 -
scoped原理及穿透方法
scoped的作用在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。scoped实现原理vue中的scoped属性的效果主要通过PostCSS转译实现,PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CS原创 2021-05-20 21:41:01 · 912 阅读 · 1 评论 -
移动设备忽略将页面中的数字识别为电话号码的方法
标准的电话号码格式是这样子的:<ahref="tel:1-408-555-555">1-408-555-555</a>但是有时候不是电话号码的数字也会被浏览器自动解析为电话号码,并把数字的颜色和样式都改了,如果忽略页面中的数字识别为电话号码,只要把这个默认行为关闭即可,只要一行代码:<meta name="format-detection" content="telephone=no">这个关闭不会影响真正电话号码的识别。补充:format-de.原创 2021-05-20 20:40:43 · 325 阅读 · 0 评论 -
HTML5实现拖放效果
效果图:HTML代码:<!-- 课程元素 --><div class="list"> <div class="item blue" id="html" draggable="true" ondragstart="start(event)">HTML</div> <div class="item pink" id="css" draggable="true" ondragstart="start(event)">CSS</div转载 2021-05-07 07:57:57 · 243 阅读 · 0 评论 -
设置html title标题左侧的小图标
网页title旁边的小图片设置,图片要求格式必须是.ico,可以使用在线的转换工具把jpg和png图片转换为ico图片,转换工具百度即可。在html文件中的<head></head>标签中加上: <link rel="icon" href="img/logo.ico" type="img/x-ico" />...原创 2021-05-06 17:49:19 · 1091 阅读 · 0 评论 -
Flex弹性盒子布局详解
Flex弹性盒子布局详解目录Flex弹性盒子布局详解1、什么是 flex 布局2、基本概念3、容器的属性4、项目的属性1、什么是 flex 布局Flex 是 Flexible Box 的缩写,意为"灵活的盒子"或"弹性的盒子",所以 flex 布局一般也叫作"弹性布局"。2、基本概念2.1、什么是 flex 容器(flex container)?采用 flex 布局的元素,称为 flex 容器:.box { display: flex | i.原创 2021-05-06 17:07:24 · 420 阅读 · 0 评论