css
文章平均质量分 72
Dear_Mr
尽自己的努力,做好该做的事情
展开
-
如何修改input[type="file"]的默认样式
1.首先我们先来看一下input[type=”file”]默认的样子 <input type="file" />2.改变input[type=”file”]默认的样子 这里我设置了 opacity: 0;使得 input变得不可见了.change{ opacity: 0;}<input class="change" type="file" multiple="multiple" />原创 2017-02-20 22:06:04 · 57761 阅读 · 1 评论 -
用CSS减少JavaScript代码量
用CSS减少JavaScript代码量写此篇博客的目的就是提醒自己和需要的人,在遇到某些需求的时候,可以通过灵活的CSS的样式去减少项目中JavaScript的代码量。现在假定有这样一个需求,在列表页面中,每次点击某一行,这个时候前端会向后端发出请求,请求该行所对应的模板,并将这个模板显示在详情弹窗,但有时候,这一行对应的不仅是一个模板,但是需要的只是其中之一,现在需要用前端代码去控制选取...原创 2018-07-17 23:44:34 · 473 阅读 · 0 评论 -
CSS中的focus-within伪类选择器
:focus-within很容易让人联想到focus,区别就在于focus是对于当前元素,而:focus-within则是对于当前对象和当前对象子元素 MDN: The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has re原创 2018-01-22 18:45:29 · 1079 阅读 · 0 评论 -
常用的CSS效果总结
遮罩层效果通过设置top、right、bottom、left为0,使得遮罩层覆盖整个可视区域如果页面中是有滚动条的,就涉及到需要给body增加overflow: ‘hidden’background-color: rgba(0, 0, 0 , 0.5) 使得背景颜色更加清晰<div id="bg-gray" class="bg" v-if="viewShowGrayBg"> <butto原创 2017-12-29 16:20:09 · 561 阅读 · 0 评论 -
CSS3学习
CSS3学习最近在面试中,而CSS3目前成为我的一大问题,了解的太少,所以在面试中,碰到这样的问题,我就感觉到有点无力,只能说点相关的东西,但是总差那么一些,所以我决定开始积累有关CSS3的知识和问到的问题,此篇博客长期更新绘制正方形、三角形、扇形和饼状图transparent(透明色)、transform: rotate(0deg)(旋转)、clip属性剪裁clip: rect (top, rig原创 2017-08-22 16:48:00 · 889 阅读 · 0 评论 -
定宽高的水平垂直居中
绝对定位和负magin值效果预览<div class="parent"> <div class="child"></div></div> div.parent { width: 400px; height: 400px; background: #EDEDED; position: relative;}div.child { width: 200px; heigh原创 2017-08-05 15:58:12 · 785 阅读 · 0 评论 -
不定宽高水平且垂直居中的实现方法
不定宽高水平且垂直居中的实现方法flex布局效果预览<div class="parent"><div class="child">水平垂直居中</div></div> div.parent { display: flex; justify-content: center; /*主轴对齐方式*/ align-items: center; /*交叉轴上如何对齐*/ backgrou原创 2017-08-05 12:09:29 · 797 阅读 · 0 评论 -
flex布局学习笔记
布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局简要介绍flex(Flexible Box)的缩写,弹性布局,任何一个容器都可以指定为Flex布局,Webkit 内核的浏览器,必须加上-webkit前缀,但是设置为Flex布原创 2017-08-05 11:10:50 · 513 阅读 · 0 评论 -
深入理解css中position属性及z-index属性
原文链接在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。第一部分:position: staticstatic定位是HTML元素的默认值,即没转载 2017-08-02 18:57:29 · 1985 阅读 · 0 评论 -
CSS的伪类和伪元素
下面的CSS代码是修改浏览器选中文字的默认样式:::select { background-color: #b3d4fc; text-shadow: none;}看到上面的 “::” ,你是否会有一定疑问呢?希望下面的解释可以解答你心中的疑问 ^_^伪类与伪元素W3C对于两者的定义:CSS伪类用于向某些选择器添加特殊的效果CSS伪元素用于将特殊的效果添加到某些选择器从定义中也可以很容原创 2017-05-06 22:54:16 · 539 阅读 · 0 评论 -
样式问题记录
遇到的样式问题的记录border 相关CSS问题-鼠标移入icon时(hover状态),会造成页面内容有上下移动的情况.icon-radius { border: 0.5px solid #dde0e1; &:hover { border: 0; }}问题:可以发现是因为border的变化,导致该ICON高度宽度发生变化,所以出现了上...原创 2019-08-06 21:29:20 · 277 阅读 · 0 评论