随笔分类 - css
摘要：需要实现单效果 实现两端对齐，首相想到到到是justify，但justify对最后一行无效，通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只有一行文本，但要实现单行文本两端对齐怎么解决？ 方法一： 属性text-align-last，
阅读全文
摘要：方案一：纯色背景的情况下，解决方案就是background-color在您的body代码上设置属性； 方案二：视口入，viewport-fit=cover: 方案三：前提，在用了方案二的时候，最好在用此方案，就完善了，安全区，inset_* safe-area-inset-top safe-area
阅读全文
摘要：参考weui的Panel结构 核心：定位，补充：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。 预览： https://besswang.github.io/Panel/index.html 拓展： 还有一种居中的方案，不过是针对文字的居中。是文字内容，不是所有的标签
阅读全文
摘要：针对图标字体进行抗锯齿渲染。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 使用： （1）Webkit在自己的引擎中支持了这一效果。 -webkit-font-smoothing 它有三个属性值： none 对低像素的文本比较好
阅读全文
摘要：1，rgba不兼容ie8; 第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下： 第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；
阅读全文
摘要：需要固定宽高的垂直居中： 一，定位 1.1 之absolute 写法一：position:absolute; 写法二：margin:auto这个必须要有 1.2定位之fixed; 写法同上。 二，display:table-cell 属性使内容垂直居中 三，行内元素的垂直居中line-height.
阅读全文
摘要：目的： 让GPU分担CPU的工作，从而优化和分配内存，告知浏览器做好动画的准备。 背景： 注意事项： 1，will-change虽然可以加速，但是，一定一定要适度使用； 2，使用伪元素，独立渲染： 不要这样直接写在默认状态中，因为will-change会一直挂着： 解决方案： 可以让父元素hover
阅读全文
摘要：在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的:
阅读全文
摘要：-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.兼容安卓和IOS的写法如下： 取值： auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动
阅读全文
摘要：原因： Safari应该有某种机制用来节约资源，就是如果元素摸起来不像可以点的，就不给他响应事件。 所以，需要在点击的元素上加上{cursor:pointer},就解决了。当然还有别的方法，检点来说就这样解决了。 测试了下，上面的方法没有成功； 后来参考了这里 http://www.cnblogs.
阅读全文
摘要：今天遇到了非常诡异的问题： 我更改了样式注意这里修改的是z-index:12; 然后我刷新页面看效果，在控制台里的样式竟然没有变，当然页面也不会有改变咯 就是这样：，找后台的老大帮忙看了下，样式的文件夹路径仔细查看了下，没有问题，后来， 好先说解决办法， 在页面上右击 查看网页源码 打开源码，如图：
阅读全文
摘要：在引入你自己的less文件的时候 之后再引入： 作用：把自己的less文件在客户端浏览器编译后的结果是css文件格式。 cdn地址： http://www.bootcdn.cn/less.js/
阅读全文
摘要：关键:vh; flex; 首先,必然定义的container是父级盒子; display:flex; flex-direction:column; /*垂直显示*/ justify-content:center; /*盒子在主轴的中心,要理解,{flex-direction:column;}的时候主
阅读全文
摘要：微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0. 微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem:
阅读全文
摘要：一，padding-top与margin-top的默认占位为0； ex： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-box</title> <style> body{margin:0;pa
阅读全文
摘要：1，Syntax: 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式； 当设置为box-sizing:border-box时，将采用怪异模式解析计算； 2，兼容： 3,什么时候用？ 1，设置内边距 1 <!DOCTYPE html> 2 <html lan
阅读全文
摘要：background-clip 用来将背景图片做适当的裁剪以适应实际需要 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。 背景： http://www.cnblog
阅读全文
摘要：鼠标移入，流线走出三角形，移除消失； 一，首先让三条线的宽度为0； 二，旋转； 三，transition:<过渡属性名称> <过渡时间> <过渡模式>，ex： 四，在过渡效果开始前等待 1秒： 完整：
阅读全文
