随笔分类 - css
摘要：window.onunload = function() {} setFontSize() window.onresize = function() { setFontSize() } function setFontSize() { let designSize = 1920; // 设计图尺寸
阅读全文
摘要：// 多行省略号样式 .type { display: -webkit-box; overflow: hidden; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 137px; }
阅读全文
摘要：在css 文件中声名 @font-face{ font-family: 'HeiTi'; // --自定义名字就好 src: url("../../fonts/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf"); // --下载的字体文件路径 } 在HTML中引用 <p
阅读全文
摘要：场景：项目中使用的UI样式库中包含一套icon 字体图标库，自定义一套字体图标库，在应用的时候，出现冲突，导致一方字体图标库无法显示或者显示不正常， 原因：字体命名冲突，样式命名冲突，导致字体图标显示不出来。 解决方案：修改其中一个文件的命名： 由于两个地方的iconfont.css文件中的字体命名
阅读全文
摘要：<div class="nav">内容</div> .nav{ width: 100%; height: 3.55rem; &::before{ content: ""; background: url('../../../assets/img/service.png') no-repeat cen
阅读全文
摘要：ios中，用 swiper 实现轮播图 swiper圆角，图片滑动的时候会先变成直角然后变成圆角（vant） 解决方法： 在swiper的父盒子上加overflow:hidden 和 transform: translateY(0); <div class="my-swipe-box"> <van-
阅读全文
摘要：最近遇到这样一个问题，在HTML5手机页面中，直接给<img>标签设置宽高，即便图片路径正常，在IOS真机下也是无法显示的，而在安卓以及浏览器的模拟真机上都是正常显示的，这是为什么呢？ <img src="xxxx.png" /> img{ width: 100px; height: 100px;
阅读全文
摘要：CSS 篇 0.5px细线 移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。 那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像
阅读全文
摘要：安卓支持，ios不支持：box-shadow: 0px 0px 2px inset rgba(0,0,0,0.08); 安卓，ios都支持：box-shadow: inset 0px 0px 2px rgba(0,0,0,0.08);
阅读全文
摘要：border 边框是我们美化网页、增强样式最常用的手段之一。例如： 但有些时候，我们的需求是给一个容器加上多重边框，最容易想到的是给它多加一层标签： 不过有些时候，我们可能无法修改结构，或者修改结构的成本很高，此时就需要我们在纯 CSS 层面解决这个问题。 outline 这时候可以通过 outli
阅读全文
摘要：html部分： abel for属性规定与表单元素绑定radio单选框， 相同的name名字可以达到互斥的作用 CSS部分： css样式会应用在紧随着 "勾选的input元素" 后面（同级）的 " label元素的：after "上。也就是说，input框如果被用户勾选了，其后面的label元素会有
阅读全文
摘要：nth-of-type：按照类型来选择，碰到一个同类型就加1 如下，为第五个.win设置样式 首先，先找到同类型（div）的第五个元素，再看class是否为win 如下，为第三个.win设置样式。 首先，先找到同类型（div）的第三个元素，再看class是否为win 【注意】不同类型会被当作多类，只
阅读全文
摘要：用@keyframes（动画），实现页面加载时的div动画（不要用js控制，因为当页面加载的时候，js还不一定可以使用） 可以在https://daneden.github.io/animate.css/参考所需要的动画效果
阅读全文
摘要：【注意】最重要的是：要搞清楚在开始，结束或者中间某个点，应该是怎么样的效果，而不是考虑从一个点到一个点怎么过渡的，只要把每个点的应该是什么效果弄好就可以了。不用管过渡。 eg： 实现效果是div从无到有，且旋转180度显示
阅读全文
摘要：<!--能怎么玩：hack元素后面是inline或者inline-block都可以；是图片是什么元素都可以；几个都可以；hack元素可以用before来完成（对着父元素加before）;--> <!--使用条件：父元素要有高度（不是说要设固定高度，只不过没高度哪来的居中一说）；需要居中的元素要设ve
阅读全文
