CSS
关注
分享
扫一扫
ruanhongbiao
最想要去的地方，怎能半途返航。
展开
-
前端兼容性问题：快速去掉mac safari浏览器input右边的小图标/小按钮
去掉mac safari浏览器input右边的小图标/小按钮input:focus::-webkit-contacts-auto-fill-button{ opacity: 0;}去掉Safari浏览器下密码输入框自带的小钥匙图标input::-webkit-credentials-auto-fill-button { display: none !important...转载 2020-04-15 09:19:56 · 1133 阅读 · 0 评论 -
前端需要知道的CSS函数大全
之前一直以为css没有几个函数，今天才发现css现在竟然已经有86个函数了，意不意外，惊不惊喜！！！我一直比较喜欢用css来解决之前js实现的效果，这样对性能时一种优化，自己也有成就感，希望这些函数能够更多的应用到自己的项目中，向张鑫旭老师学习做一些惊艳的效果出来把css玩出花根据w3cplus中可以划分为以下几类：属性函数：attr()；背景图片函数：linear-grad...原创 2019-12-03 18:04:47 · 349 阅读 · 0 评论 -
css样式问题踩坑汇总
1.position:fixed定位时 “高度坍塌” 问题发现在用jquery的css()方法给position：fixed的元素设置高度时，获取到的高度为0，如图：我把position:fixed样式取消了就可以获取到高度，我想了一下可能是脱离了普通文档流引起的，后面去网上搜索了一下解决方案，通过在这个元素的下面再加一个div，在这个div上设置高度来解决了这个问题，html代...原创 2019-10-25 18:13:47 · 303 阅读 · 0 评论 -
如何去掉网页的横向滚动条，竖向滚动条
让竖条没有：<body style=`overflow:-Scroll;overflow-y:hidden` ></body>让横条没有：<body style=`overflow:-Scroll;overflow-x:hidden` ></body>两个都去掉？更简单了<...原创 2019-09-12 09:05:24 · 1474 阅读 · 0 评论 -
移动端页面，点击img的图片，会变成预览模式
在公司H5项目发现中发现一个兼容性问题，就是在部分Android机自带的浏览器中点击img图片会新打开一个标签页预览图片。有四种方式去解决这个问题，当然第一种是最简单的，加一条样式就好了。1.img{ pointer-events: none; }2.在img元素上添加 onclick="return false"<img src="a.png" onclick="retu...原创 2019-06-28 18:16:07 · 7387 阅读 · 0 评论 -
IOS下z-index失效问题
一.zindex和transform translateZ冲突问题1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ2.在ios上，则相反，translateZ的优先级要高于zindex3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐...原创 2019-07-12 17:54:54 · 4061 阅读 · 1 评论 -
用原生js操作css样式方法总结
为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如：var elm = document.getElementById('test'); ...原创 2018-07-17 11:39:45 · 11133 阅读 · 0 评论 -
css实现右侧固定宽度，左侧宽度自适应
反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？要实现这种布局，也算比较简单。我们先给出html结构：12345<div id="wrap"> <div id="sidebar" ...原创 2018-05-08 18:09:58 · 557 阅读 · 0 评论 -
css瀑布流布局浅析
如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布...原创 2018-05-07 12:04:13 · 1513 阅读 · 0 评论 -
解决移动端Retina屏幕1px边框问题方法汇总
造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。关于devicePixe...原创 2018-05-18 15:32:53 · 1550 阅读 · 0 评论 -
CSS打印样式研究与总结（二）
CSS控制网页打印样式： 使用CSS控制打印样式，握刚刚使用时一塌糊涂，根本不知道CSS中的midia的作用是什么，问到别人说导入这个样式，还傻乎乎的不知所措。如果你也有这种现象，那么我告诉你吧，在W3school查到CSS的midia的作用。 midia 定义和用法： media 属性规定被链接文档将显示在什么设备上。 media 属性用于为不同的媒介类型规定不同的样式。 原来用到media来指...转载 2018-05-02 15:51:23 · 802 阅读 · 0 评论 -
CSS打印样式研究与总结（一）
在做一些后台管理系统的时候，经常会遇到需要打印的表格，这就会用到css的打印样式，但是在调用浏览器自带打印功能时有很多坑，而且各个浏览器的打印设置都不一样，一般js打印的方法主要有window.print( )和jquery.jqprint两种，第一种是js原生的打印方法，第二种是一个比较流行的一个jquery打印插件，下面主要来说说打印的样式问题。一般给页面设置打印样式有两种方式，一种是设置样式...翻译 2018-05-02 15:46:03 · 6881 阅读 · 0 评论