随笔分类 - css基础
摘要：普通显示隐藏出现动画效果（如果设置了diaplay:none隐藏，然后用JS显示，动画效果transition是无效的） 一、元素先显示，透明度0，然后下个执行设置透明度1 .element.active{ display:block; animation:fadeIn .2s both; } @k
阅读全文
摘要：使用vue的过程一直在试错跟优化，今天就发现自己使用的一个坑，关于css引入的 以前的写法是在assets/css/下面建一个app.scss文件，用于引入所有assets/css/下的所有样式文件 然后再app.vue中引入： @import '@/assets/css/app.scss'; 一开
阅读全文
摘要：1、css一行文本超出... overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2、多行文本超出显示... display: -webkit-box; -webkit-box-orient: vertical; -webki
阅读全文
摘要：一个月没有看鑫大的空间，今天一看，收益不少，先转一篇他说的图片加载失败占位符处理， 之前的处理： CSS代码： img { width: 128px; height: 96px; object-fit: cover; } img[src$="break.svg"] { object-fit: con
阅读全文
摘要：刚好今天用到这个，就顺便记录一下 .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select
阅读全文
摘要：可以使用svg处理，也可以使用伪元素处理，这里偷学了伪元素的处理方案 html: <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：1、javaScript检测横屏 window.addEventListener("resize", ()=>{ if(window.orientation 180|| window.orientation 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if
阅读全文
摘要：1、变量 $ 使用 可以通过变量来复用属性值，比如颜色、边框大小、图片路径等。可以利用这个特点实现“换肤”功能。 $color-primary: #3ecacb; $color-success: #4fc48d; $color-warning: #f3d93f; $color-danger: #f6
阅读全文
摘要：实现图像半透明的方法挺多，无论是filter滤镜、mask遮罩、opacity透明度设置都可以实现 要用background-image背景图片实现的话，可能第一个就会想到使用::before、::after伪元素实现，例如： .box { position: relative; z-index:
阅读全文
摘要：1、::first-line | 选择首行文本 这个伪元素选择器选择换行之前文本的首行 p:first-line{ color:lightcoral; } 2、::first-letter | 选择首字母 这个伪元素选择器应用于元素中文本的首字母 .innerDiv p:first-letter{
阅读全文
摘要：html { font-size: 16px; } @media screen and (min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */ font-size: calc(100% + 2
阅读全文
摘要：常用的css hack有三种：条件hack、属性hack、选择符hack 1、条件hack 语法： <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> 取值： <keywords> if条件共包含6种选择方式：是否、大于、大于或等于、小于
阅读全文
摘要：在做h5页面的过程中，经常会遇到这种情况，页面滚动到一定位置的时候，那个元素需要固定在顶部，之前都是用js去计算再实现，其实用css来实现更加方便 html: <div> <p>粘性定位</p> </div> css: div{ height:200px; margin-top:50px; } p{
阅读全文
摘要：1、ios的webview中滑动不流畅。（原因：ios5.0以后的版本，滑动定义有两个值auto和touch。默认值为auto） -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrol
阅读全文
摘要：<div> <p>srcset w 自动选择：</p> <img sizes="(min-width: 600px) 600px, 300px" src="https://vmat.gtimg.com/kt/ktweb/pay/imgs/act/cql@1x.png" srcset="https:/
阅读全文
摘要：html: <div class="g-container"> <h2>腾讯视频</h2> <h2>电视语音助手</h2> <p>连接后可用手机语音操控电视机，包括搜视频、搜明星、切频道、查天气。</p> <div class="g-bg-example"></div> <div class="g-
阅读全文
摘要：例子： html： <div class="container"> <div class="battery"></div> </div> css： html, body { width: 100%; height: 100%; display: flex; background: #e4e4e4;
阅读全文
摘要：::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder
阅读全文
摘要：看了网上很多资料，说是-webkit-overflow-scrolling: touch;这个属性引起的问题。可是这个如果没有加的话，ios上面滑动又会卡顿。 所以最后还是用了这个，一开始没有找到好的办法解决这个问题。然后想借鉴淘宝的，可是好像又看不到什么东西。所以就自己的各种尝试。 终于。。。。。
阅读全文
摘要：h5页面在iOS上的问题解决 1、ios移动端 软键盘收起后，页面内容被顶上去，不下滑回原处 代码如下： $(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('c
阅读全文
浙公网安备 33010602011771号