![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
mrzhangdulin
这个作者很懒,什么都没留下…
展开
-
flex 上下固定中间滚动布局
flex上下固定中间滚动布局传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG。上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而...原创 2020-04-21 10:38:28 · 540 阅读 · 1 评论 -
字体图标 制作流程
字体图标的制作方式如今移动端页面越来越频繁,图标字体的应用也越来越广泛。废话少说,根据自己的实践,今天和大家一起分享两种将图标转换为字体的方法。欢迎大家拍砖!方法一:SVG+icomoon(目前喜欢并推荐使用)通常我们会收到一个页面的PSD文件,里面包含一些可以制作成字体的图标。制作之前请确认您已安装以下软件:1、 Adobe Photoshop;2、 Adobe Illustrator;一、...原创 2018-03-21 13:08:37 · 6456 阅读 · 0 评论 -
学习Less-看这篇就够了
前言CSS的短板作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起, 在 Web 发展的这几年, 为了让 C...转载 2018-09-19 17:31:49 · 111 阅读 · 0 评论 -
三角形 clip-path :before
<div id="clipped2"> 做工</div>#clipped2 { position: relative; display: inline-block; align-items: center; justify-content: center; min-width: 80px; box-size: content-box; ...转载 2018-11-20 13:13:54 · 184 阅读 · 0 评论 -
css css3 的div垂直居中的方法,百分比div垂直居中
我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?固定高宽div垂直居中 position: absolute; left: 50%; top: 50%;width:200px;height:100px;margin-le...转载 2019-08-08 10:23:25 · 316 阅读 · 0 评论 -
flex布局兼容性写法
1.容器写法display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ di...原创 2019-08-08 16:52:23 · 1004 阅读 · 0 评论 -
使用 PostCSS 进行 CSS 处理
在 Web 应用开发中,CSS 代码的编写是重要的一部分。CSS 规范从最初的 CSS1 到现在的 CSS3,再到 CSS 规范的下一步版本,规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他 Web 领域的规范相似的处境是,CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在 CSS 规范的实现方面的进度也存在很大差异。另外,CSS 规范本身的发展速度与社...原创 2019-09-04 11:55:29 · 3256 阅读 · 1 评论