随笔分类 - Css
2020.2.22
摘要：你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值
阅读全文
摘要：原文：https://segmentfault.com/p/1210000018125552/read#top 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画
阅读全文
摘要：原文：https://blog.csdn.net/im_dogg/article/details/84369286 在说具体内容之前，我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是
阅读全文
posted @ 2020-10-26 09:34
对·味
摘要：ios使用transform的时候圆角变方框，border-radius失效问题 问题： 1. 使用ios的手机浏览器（safari/chrome）都会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。似乎是因为ios手机会在transform的时候border-radius失效。 解决方法：
阅读全文
摘要：1. 写一个reset.css 用于清除浏览器标签默认样式并定义全局样式，这样就不会因为浏览器默认样式出现问题，因为不同浏览器的默认样式还是不一样的 2. 巧用 display: contents 说明：设置了该属性值的元素本身将不会产生任何盒子，但是它的从保留其子代元素的正常展示。 1. 最近写微
阅读全文
摘要：1. 水平垂直居中 方案一：兼容性好 方案二：不影响其他元素，兼容性差点 方案三：只设置父容器，但兼容性差
阅读全文
摘要：1. 父子容器不固定垂直居中方案 方案一：要兼容ie6,7要换表结构 方案二：不影响其他元素，兼容性问题，不支持低版本 方案三：兼容性问题，不支持低版本，但只要设置父容器 方案四：自找，利用padding上下扩展空间进行中间内容垂直居中 <style> .center { padding: 70px
阅读全文
摘要：1. 父子容器不固定水平居中方案 方案一：兼容性好能兼容ie6,7 方案二：要兼容ie6,7需要换表结构table,不支持属性table 方案三：Ie6,7,8不兼容 方案四：ie6,7,8不支持
阅读全文
摘要：一. Css吃豆人动画 1. 上半圆：两个div，内部一个圆div，外部设置宽高截取半圆 外部div动画：animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite(动画无限播放) 动画样式：@keyframes：设置50%转45度，100%转0度 transfor
阅读全文
摘要：Css做到横竖屏适配：定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orientation: landscape){ Css[横向定义样式] } }
阅读全文
浙公网安备 33010602011771号