css
关注
分享
扫一扫
香荣如梦
这个作者很懒，什么都没留下…
展开
-
css中网页缩放属性zoomtransform中的scale
如果项目的版心是1300px的话，如果小屏观看的话会有横向的滚动条，这个时候再去改项目的样式的话就比较的麻烦了，可以使用zoom来缩放页面zoom支持的类型有：类型说明百分比zoom:50%;表示缩小到原来的一半数值zoom:0.5;表示缩小到原来的一半mormal关键字zoom:normal;等同于zoom:1;虽然谷歌等浏览器支持了zoom但是zoom并不是标准的属性css3中transform的scaletransform中的scale是明.原创 2020-09-18 16:31:55 · 1544 阅读 · 0 评论 -
彻底搞懂css中的单位px、em、rem
css单位px单位px代表着绝对尺寸，不会因其他元素的尺寸变化而变化，利用排序设置的字体集元素宽高比较稳定和精准，但是不能随着浏览器的缩放而变化，所以不适用于响应式网站em单位em和rem都是灵活的可扩展的单位，由浏览器转化为像素值，具体取决于设计图中的大小。很多人认为em单位是相对于父元素的字体的大小，但是根据w3标准，他是相对于使用em档位的元素的字体的大小，也就是使用em单位的元素的本身。父元素的字体大小可以影响em值，是因为继承。<style> #wrap{原创 2020-09-02 13:40:05 · 289 阅读 · 0 评论 -
使用css制作跳动的心
利用css动画制作跳动的心代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./moment.js"></script> &l原创 2020-08-05 10:57:37 · 610 阅读 · 0 评论 -
使用css制作心形图案并且添加动画心动效果
个人博客已经建好，欢迎各位前来访问 http://mengyang.info/纯css制作心形图案首先制作一个正方形并且旋转45度.heart{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate原创 2020-07-28 21:53:40 · 877 阅读 · 1 评论 -
去掉input的type为number输入框的右侧箭头
去掉input输入框右侧的箭头在项目中不需要这个箭头直接手动输入input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}禁用鼠标滚轮上下滑动<input type="number" onmousewheel="return false;">转载 2020-07-26 10:06:53 · 1730 阅读 · 0 评论 -
css中英文单词换行的问题
单词换行的问题在项目中有时候会遇到英文很长的句子，然后当div剩下的部分不足以放下一个单词的时候，单词就会换行显示，这样的话尾部就会空了很大的地方显得很不好看解决方法可以通过两个css属性来实现这个需求：word-wrap:break-word;word-break:break-all;word-wrapword-wrap用来控制换行，有两种值：+ normal+ break-word(这个值用来强制换行的，内容将在边界内换行，在中文中是没有任何问题，英文语句也是没有任何问题，但是对于很原创 2020-07-25 19:33:44 · 8962 阅读 · 0 评论 -
css3动画的使用图片上下循环跳动
animation动画使用图片上下循环跳转html代码：<div class="siteicon"> <img src="./siteicon.png" alt=""> <p>点击跳转</p> </div>css代码：@keyframes icon{ 0%{ opacity: 0.8; transform: translate(0,0); } 50%{ opacity: 1; transform:原创 2020-07-07 22:00:05 · 2285 阅读 · 0 评论 -
使用element中el-table动态增减表头列的时候出现抖动闪动的问题
el-table表格抖动的解决办法动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可//重写表格样式，不在自动计算，解决表格渲染时闪烁问题//不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数.el-table .cell{ height:20px!important;}表头变动的时候数据可能会下掉，使用element中的dolayout函数解决element中写到：doLayout方法 对Table进行重新布局。当原创 2020-07-06 10:03:41 · 7497 阅读 · 3 评论 -
css cursor中鼠标悬停禁用样式
鼠标悬停时禁用的样式cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠//其中还有一个属性也是这个样式 cursor:no-drop;cursor在项目中最常用的属性是pointer小手样式属性原创 2020-07-05 21:23:06 · 12961 阅读 · 0 评论