CSS
关注
分享
扫一扫
jojo付啾啾
越努力越不想放弃。
展开
-
全局滚动条样式修改
::-webkit-scrollbar { width: 8px; height: 12px; background-color: #fff;}::-webkit-scrollbar-thumb { display: block; min-height: 12px; min-width: 8px; border-radius: 6px; background-color: rgb(217, 217, 217);}::-webkit.原创 2021-10-28 10:06:08 · 253 阅读 · 3 评论 -
图片宽高自适应，不压缩
img{ max-width: 188px; max-height: 106px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}原创 2021-04-26 15:47:53 · 263 阅读 · 0 评论 -
什么是BFC？
参考：https://blog.csdn.net/sinat_36422236/article/details/88763187原创 2021-04-25 11:41:41 · 140 阅读 · 0 评论 -
CSS3实现0.5px的边框
参考：CSS3实现0.5px的边框原创 2021-01-27 10:44:16 · 228 阅读 · 0 评论 -
h5 判断横竖屏
转自：https://www.cnblogs.com/AnotherLife/p/5764389.html转载 2020-06-29 13:06:32 · 736 阅读 · 0 评论 -
利用transform：scale属性完成移动端适配
//需要给设置scale属性的盒子添加csstransform-origin: 0 0;// 缩放 (function() { var ww = window.innerWidth; var wh = window.innerHeight; let scaleX = ww / 750; if (scaleX < 1) { $('#scaleContainer, .flex-box') .css('transform', 'scale.转载 2020-06-23 12:37:54 · 1438 阅读 · 0 评论 -
sass中将px转化为rem
利用sass加实时监听编译CSS。 可自动将px转换为remSASS函数：(使用时直接调用函数）@function torem($px){//$px为需要转换的字号 @return $px / 100px * 1rem; //100px为根字体大小} .first{ font-size:torem(100px); height:torem(10px); width:torem(200px); }编译后：.first{ font-size:1rem.转载 2020-06-21 21:30:04 · 708 阅读 · 0 评论 -
css实现单行居中，多行居左
转自：https://www.cnblogs.com/zhaofeis/p/5938525.html转载 2020-06-09 16:13:09 · 374 阅读 · 0 评论 -
html + js + css 实现可拖拽音频播放器
效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-06-03 14:15:59 · 1570 阅读 · 0 评论 -
去除inline-block元素间 间距的N种方法
转自：https://www.jianshu.com/p/99a63509bb4d转载 2020-04-17 11:29:54 · 200 阅读 · 0 评论 -
免费在线生成精灵图网址
https://www.toptal.com/developers/css/sprite-generator/用了一次还不错，不过上面给的位置不太对，得除2，宽高也得自己放在画图工具里计算整个宽高然后除以2原创 2020-02-27 10:28:49 · 3596 阅读 · 0 评论 -
修改CSS中transition属性的方向
修改CSS中transition属性的方向转载 2019-12-24 19:58:58 · 2275 阅读 · 0 评论 -
input placeholder属性 样式修改(颜色,大小,位置)
input placeholder属性 样式修改(颜色,大小,位置)转载 2019-02-21 16:52:20 · 397 阅读 · 0 评论 -
vue css >>> /deep/ 穿透
转自：https://blog.csdn.net/Alex81320/article/details/86234369vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符(&...转载 2019-03-01 10:32:03 · 949 阅读 · 0 评论 -
vue项目打包后样式-webkit-box-orient: vertical丢失
vue项目打包后样式-webkit-box-orient: vertical居然神奇的消失了，好像跟optimize-css-assets-webpack-plugin这个插件有关，解决办法：https://github.com/postcss/autoprefixer/issues/7761.css2.scss要加"!"...原创 2019-03-01 14:32:13 · 496 阅读 · 0 评论 -
img的一个样式属性blr
blr:expression(this.onFocus=this.blur())转载 2019-04-02 10:49:14 · 716 阅读 · 0 评论 -
position:fixed 相对父元素定位
转自：https://www.cnblogs.com/mengff/p/9908958.htmlposition:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样：不设置fixed元素的top，bottom，left，right，只设置margin来实现。这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。此外，position:fix...转载 2019-04-15 13:48:17 · 2632 阅读 · 0 评论 -
max(min)-device-width和max(min)-width的区别
转自：http://www.webkaka.com/tutorial/html/2015/082713/转载 2019-05-14 17:07:29 · 234 阅读 · 0 评论 -
如何去掉input默认样式
转自：https://blog.csdn.net/mr_yq/article/details/78238858转载 2019-07-19 10:16:13 · 1011 阅读 · 0 评论 -
table表头固定表体滚动
转自：https://blog.csdn.net/Muscleheng/article/details/86715733表头与表体每列对齐参考：https://www.cnblogs.com/fanbi/p/8082025.html转载 2019-07-29 13:47:15 · 489 阅读 · 0 评论 -
CSS 苹方字体
转自：https://www.jianshu.com/p/bc9f57a645bd转载 2019-07-17 19:10:55 · 1243 阅读 · 0 评论 -
去掉input type=file的默认样式
转自：https://www.w3h5.com/post/88.html转载 2019-07-21 20:41:59 · 1047 阅读 · 0 评论 -
CSS设置超链接样式
转自：https://blog.csdn.net/fighting_0808/article/details/81782348转载 2019-07-22 18:37:56 · 372 阅读 · 0 评论 -
CSS :before、:after伪元素 content属性 中文乱码
问题：CSS :before、:after伪类 content属性 中文乱码解决办法：将中文转为unicode 编码站长工具，例如：、—>\u3001 content: "\3001";注意：去掉字母u转自：https://blog.csdn.net/m0_37285193/article/details/88057956...转载 2019-08-06 14:07:25 · 1474 阅读 · 0 评论 -
display:none和visibility:hidden的区别
display:none和visibility:hidden 目前，我所知道的不同有三点（欢迎补充）： 1.空间占据 2.回流与渲染 3.株连性 display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；第三点估计是不少同行不知道的，就是“株连性”方面的差异。 所谓“株连性”，就是如果祖先元素遭遇某转载 2017-04-12 09:18:42 · 1024 阅读 · 0 评论 -
用css实现自定义虚线边框
转自：https://www.cnblogs.com/libin-1/p/7096926.html 开发产品功能的时候ui往往会给出虚线边框的效果图，于是乎，我们往往第一时间想到的是用css里的border，可是border里一般就提供两种效果，dashed或者dotted，ui这时就不满意了，说虚线太密了。废话不多说，下面直接给解决方案（参考css揭秘）：注意，div不能设置display...转载 2018-12-14 14:17:11 · 4209 阅读 · 0 评论 -
html,body的height设置成100%时，window.scrollY始终为0
原创 2018-12-12 15:52:18 · 2351 阅读 · 0 评论 -
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介转载 2018-12-04 18:15:35 · 1211 阅读 · 0 评论 -
css3实现点圈旋转的loading效果
test.html <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta原创 2018-09-10 18:38:58 · 7224 阅读 · 0 评论 -
很low的带蒙层的弹出效果实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-09-11 18:52:26 · 653 阅读 · 0 评论 -
cssText
今天在项目中看到了在js中通过用cssText来设置样式，又涨姿势了。巧用cssText转载 2018-08-30 16:57:18 · 971 阅读 · 0 评论 -
css背景图片的运用
转自：https://www.w3cplus.com/css/css-background-image-hacks.html这篇文章是99翻译Nicolas Gallagher的CSS background image hacks一文。大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。正如前面所说，仅仅...转载 2018-08-13 20:00:17 · 3961 阅读 · 0 评论 -
原生js实现公告滚动效果
1.html结构<body> <div id="notice" class="notice"> <ul id="noticeList"> <li>我是公告1</li> <li>我是公告2</l原创 2018-08-09 16:09:17 · 2445 阅读 · 1 评论 -
css继承属性
一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、margin-right、mar转载 2017-10-11 12:59:49 · 391 阅读 · 0 评论 -
DIV+CSS实现生气的猫咪老师
先上图。 模型： 用div+css照着画： 总感觉差那么一点感觉。。。下面的图是照着模型用纯DIV+CSS实现的，因为老师的身体和头部像是连在一起，所以就放到了一个div容器body里，然后在里面分为头部和身体部分。 头部包括：耳朵，头发，眼睛，黑线，胡子，嘴巴，脸颊。 下半身包括：项圈、铃铛，手。 最后还有个黄黄的小情绪在左边。整体的结构代码如下：<body> <!-- 整原创 2017-05-04 11:24:06 · 874 阅读 · 0 评论 -
怎么让图片占据整个页面
下面列出三种方法让图片占据整个页面，适应窗口的大小。方法一： 使用img标签，设置其宽高为100%，并设置定位position为absolute。<!-- 样式部分 --> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100%;原创 2017-04-10 21:35:26 · 4683 阅读 · 1 评论 -
实现4列等分布局，每列之间有间距
昨天被问到一个面试题：怎么实现四列等分布局，每列之间有间距，但是第一列和最后一列与窗口之间没有间距？ 当时想的是直接获取宽度减去各个margin值然后除以4，最后去掉两端的间距就好了。但是面试官说要用到box-sizing实现。。。回来后就试了一下。 body结构：<div class="parent"> <p class="one">第一列</p> <p cla原创 2017-03-31 11:11:26 · 4164 阅读 · 0 评论 -
实现div里的img图片水平垂直居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body>方法一： 将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。<style type="text/css"> *{原创 2017-03-31 09:53:09 · 228501 阅读 · 17 评论 -
angular1模拟下拉加载从异步获取数据
test.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>原创 2018-09-10 18:47:00 · 429 阅读 · 0 评论 -
鼠标拖拽缩放面板大小
又是一段不完美的实现，为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug？？？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2018-09-13 14:50:24 · 1435 阅读 · 0 评论