css
文章平均质量分 53
森小六
世界是自己的,和他人毫无关系
展开
-
css几种方法使元素水平垂直居中
闲来无事,好久没写css代码,感觉当初用习惯的,现在都忘了,现在自己网罗资料加上自己理解,来总结一下。元素水平居中先判断元素类型,若为块级元素,可以使用margin:0 auto;当然也可以将它变成内联块性质 display:inline-block,再用法二。 若为内联块元素,给它的父级设置text-align:cente原创 2017-02-17 14:46:30 · 395 阅读 · 0 评论 -
vue-cli 项目中css使用渐变色属性,打包后样式丢失不生效
vue-cli项目中使用css做了一个渐变色的横条,在本地显示正常,但打包后发现css文件中渐变属性只剩下一行,其他全部丢失。 background:-webkit-gradient(linear, left top,right top, from(#000000), to(#ffffff)); background:-webkit-linear-gradient(left, #0000...原创 2019-06-25 10:09:00 · 1566 阅读 · 0 评论 -
echarts 点击事件调用多次问题解决
项目中做关系图遇到 点击关系图元素,发现点击事件会被调用两次,百度后发现解决方法,确实有用,记录一下。原文URL:https://www.cnblogs.com/niepan/p/9297731.html具体代码如下myChart.clear(); //清除画布myChart.setOption(option);myChart.off('click'); //解绑点击事...转载 2019-06-25 09:45:13 · 2495 阅读 · 1 评论 -
position:fixed 失效问题记录
要做导航条固定,点击导航条的某个按钮跳转到下方页面相应的模块,下方模块必须可以滚动;刚开始给body加了smooth-scroll的插件,发现position:fixed失效,百度后查到原因,父级元素一旦使用了transform:translate,positon:fixed属性会自动转为position:absolute,插件原理正是使用了这个属性;解决方法并未找到;方法一:1、不使...原创 2018-11-26 15:27:19 · 368 阅读 · 0 评论 -
css篇-子元素高度撑满父级(父级未设置高度),同时子元素内文字垂直居中
好久未写博客,又回来了,还是得实时督促自己最近遇到了一个css问题;问题如下父元素不设置高度,子元素全为(display:inline-block),左侧内容撑开高,想要右侧子元素高度为100%(即与左侧子元素高一致),使用height:100%,并不好使,始终是内容撑开的高,而非父级高,<li v-for="list in lists”> //父元素<div...原创 2018-11-22 16:26:30 · 26895 阅读 · 3 评论 -
css 实现标签内容多行截取(...)
css实现单行截取字符串比较简单,css属性:overflow:hidden;white-space:nowrap;想要实现多行截取,经过百度得到,取两行然后截取的属性;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient;vertical;o 解决问题;...原创 2018-04-13 10:39:10 · 3058 阅读 · 0 评论 -
ie浏览器下滚动条问题
众所周知,原始浏览器滚动条不美观,所以重新修改样式,但在ie上并不起效果;没有办法,只好寻找插件,来实现;最终找到的是smooth-scrollbar(但也只能兼容到ie10(11)了且原始要加滚动条的div属性不能是overflow-y:scroll)方法:import Scrollbar from 'smooth-scrollbar';//引入自定义滚动条控件mounted() {Scroll...原创 2018-03-09 10:40:52 · 4019 阅读 · 0 评论 -
页面布局左侧固定宽度,右侧屏幕自适应
开发初期,页面布局要实现左侧固定宽度右侧屏幕自适应,且右侧内容块的距离是8px固定,我们考虑的最小分辨率是1366px,1366以下并不能像bootstrap那样内容块被挤下去。因为没有考虑清楚,没有使用bootstrap,采用了左边用px,右侧用rem,当屏幕<1366px,font-size=100px.固定了宽度。结果出现问题,大于1366px,由于左侧固定宽度,分辨率变大,右侧变大,...原创 2018-03-09 10:20:27 · 778 阅读 · 0 评论 -
css3渐变属性兼容性和div圆角属性兼容性
一、渐变最近开发页面使用到了css渐变和border-radius 属性,最初只是百度了一下方法,后经测试,在IE9中并不生效,又开始解决;菜鸟驿站上标明了浏览器兼容浏览器支持表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。属性IE原创 2018-01-19 10:14:13 · 987 阅读 · 0 评论 -
vue项目中使用echarts 遇到问题总结
需要注意echarts版本不同,部分属性可能有所不同,我用的是echarts4.0.一、echarts图表自适应问题。自适应代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchan原创 2018-02-01 16:18:47 · 8951 阅读 · 0 评论 -
css对于文本处理的几个不常用属性
随着所做项目的增多,对于文本处理的CSS属性,遇见几个之前不常用的属性1 text-align 文本对齐有5个值left、right、center、justify、inherit。前3个常用不再介绍。text-align:justify;是实现文本两端对齐。text-align:inherit;继承父级文本对齐方式,不兼容IE8及以下。2 word-spacing 字间隔有3个值原创 2017-03-22 16:11:51 · 289 阅读 · 0 评论 -
CSS伪类选择器之属性选择
CSS独立给某些元素设置属性时,需要单独选择到某个元素。这里来总结一下常用到的。1 :first-child 父元素的第一个子元素2 :last-child 父元素的最后一个子元素3 :nth-child(n) n从1开始,父元素的第n个子元素4 :not 不是某个元素当然这里可以联合起来使用,具体形式为 :not(:last-child)当然这里需要原创 2017-03-22 10:11:33 · 1082 阅读 · 2 评论 -
css div li 使用float但高度不确定造成的错位问题我遇到的(部分360浏览器问题)
今天遇到个CSS样式问题,而且单单在部分人的360浏览器上出现了这样的问题。也是考虑上的失误及经验上的不足。是这样的一共是四个div,但高度不定。需要做成两两一行的样式。之前没做多大考虑,直接用了float,在大部分浏览器上并未出现问题。但在360浏览器(别人的)出现错位问题。即第一行第一个元素过高导致第三个元素排在了第二个下面。网上搜罗了一下方法,在不影响原来布局的情况下,考虑选择放原创 2017-01-18 15:14:29 · 1798 阅读 · 0 评论 -
mintui 底部导航栏按钮点击事件
前端h5选择框架时,决定使用mintui(为了和vue更好结合),结果用了感觉效果很一般,文档也不是很全,好多问题。用mint-ui做底部导航栏时,即<mt-tabbar><mt-tab-item>首页</mt-tab-item></mt-tabbar>一开始点击事件加到mt-tab-item标签上(即@click),发现不起效果...原创 2019-07-05 14:39:27 · 1832 阅读 · 0 评论