随笔分类 - CSS
摘要：原因：html、body设置了 height: 100% 的自适应布局后，高度跟随屏幕的可用高度改变而改变导致的。 解决办法： 1、不使用 fixed 定位，使用替代方案（推荐）： a：使用 position:absolute; overflow-y:scroll; b：使用 display:fle
阅读全文
摘要：文本选择颜色 ::selection { background-color: #616161; color: #e0e0e0; } 首字下沉 article p:first-of-type::first-letter { color: #616161; float: left; font-famil
阅读全文
摘要：Can I use display: flex; ie6-9不支持，ie11,10部分支持 placeholder 背景属性值：background-size: cover|contain；ie8及以下不支持 兼容ie7样式注意： 1.rem不支持； 2.CSS3不支持（transition动画位移
阅读全文
摘要：前言：网站会有一些简单的保密需求，不想让用户复制文字，或者轮播图到头了，左右箭头还在点点点，会有蓝色的背景，使用下面的css就可以解决这种问题。 CSS 属性禁止文本复制/选择功能 user-select 控制用户能否选中文本。除了文本框内，它对被载入为 chrome 的内容没有影响。 /* 禁止长
阅读全文
摘要：参考博客：https://blog.csdn.net/qq_38417082/article/details/103749942
阅读全文
摘要：鼠标滑过图片显示放大镜效果 cursor: url(../img/zoom_in.cur), auto;
阅读全文
摘要：{-webkit-tap-highlight-color:rgba(0,0,0,0);} 原因： cursor: default; 点击出现高亮 如果是响应式可以使用媒体查询将样式重置 @media (max-width:768px) { a{ cursor: default; } } /-webk
阅读全文
摘要：a:hover伪类在ios移动端浏览器内无效的解决方法 a:hover伪类在ios移动端浏览器内无效的解决方法a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 代
阅读全文
摘要：利用hover控制动画，一个从反面向正面翻，一个从正面向反面翻。 利用：backface-visibility: hidden;控制反面的元素不显示。 不支持的浏览器直接切换层级换图（部分ie9模拟器不支持） <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：在h5做webview，遇到一些问题，如果有遇到同样的问题的小伙伴，欢迎留言交流 闪屏问题 在ios app点击进入h5页面的时候，会出现闪屏问题 首先ios工程师做了加载前的处理，完美的解决了一种闪屏问题； 但是，iphone7、8还出现了闪白屏问题，经过多个页面对比发现，是布局中body有背景图
阅读全文
摘要：input, textarea { caret-color:#FFA800; } 注：更改光标颜色，在移动端（我是在webview应用中），有n个输入框，有时候首次进入页面输入框聚焦，颜色不变，点几个输入框后，颜色就会显示设置的颜色了，这个bug我暂时没有解决，如果你也遇到同样的问题，欢迎留言交流！
阅读全文
摘要：iphonex 提供的 meta 头 页默认不添加扩展的表现是 viewport fit=contain，需要适配 iPhoneX 必须设置 viewport fit=cover，这是适配的关键步骤 contain 可视化窗口完全包含网页内容 cover 网页内容完全覆盖 auto 默认值和 con
阅读全文
摘要：1. safari input框type["password"] type["text"] 聚焦后右侧出现图标 input::-webkit-credentials-auto-fill-button , // password input::-webkit-contacts-auto-fill-bu
阅读全文
摘要：CSS 选择符有哪些 1.id选择器（ id） 2.类选择器（.class） 3.标签选择器（div，h1，p） 4.相邻选择器（h1 + p） 5.子选择器（ul li） 6.后代选择器（li a） 7.通配符选择器（ ） 8.属性选择器（a[title]） 9.伪类选择器（a:hover，li:
阅读全文
摘要：.btn-shake-hand{ -webkit-animation: fingerHandle 1s ease infinite both; animation: fingerHandle 1s ease infinite both; } .btn-shake-hot{ -webkit-anima
阅读全文
摘要：在开发中，你会遇到各种美轮美奂的UI交互设计图，下面这种UI图，我在开发时就在布局上遇到一个小问题 问题现象：ios 手机滚动到底部，底部的margin bottom不生效，Android手机和模拟器都是正常的，虽然不是什么大bug，但是，有问题就要解决 问题图片展示 正常图片展示 经过对比没有问题
阅读全文
摘要：这个方法使用的是css伪类+js计算实现 上面的效果缺点就是字数到头才显示点点点，不是很美观，如果想限制字数点点点的话可以这么做（注意：截取内容中最好不要带特殊字符截取） 以下是简单截取方法
阅读全文
摘要：本例使用 CSS column 实现瀑布流布局 关键点，column count: 元素内容将被划分的最佳列数 关键点，break inside: 避免在元素内部插入分页符 html div.g container for(var j = 0; j
阅读全文
