随笔分类 - css
简单实现一个流程图（箭头流程图）
摘要：前言 在项目中有一个需求，做一个流程图，本来想着ctrl+c/v来着方便些，网上查了一下，少之又少，就干脆自己写了一下，供大家参考。示例图如下。 本次开发用的是vue+scss形式，不过基本上都是css3+js而已，简单易懂，同样也好拓展。 图例 思路 父元素设置flex布局，子元素都是自适应，可随
offset系列,client系列,scroll系列回顾
摘要：一 scroll系列属性 ——滚动 1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度 ele.scrollHeight 有两种情况， 当内容超出盒子范围后，返回的是内容的高度，包括padding，从顶部内侧到内容的最外部分。 当内容不超出盒子范围时，返回的是盒子的高
将svg文件化成字体图标的步骤
摘要：一 前提摘要 有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目，是很简单的，但当中遇到了一个小问题，就是tabs中图标选中和被选中的颜色问题，如果是新开发的，目前掌握的有两种办法，比如准备两个类型一样颜色不一样的图片，选中时图片隐藏和显示。另一种就是字体图标，在iconfont找到相应的
两种方式实现横向滚动条
摘要：前言： 在项目开发中，遇到了一个需求，实现一行上的导航栏过多使其产生横向滚动条。一开始做项目，给的时间太短又着急，觉得网上有现成的，去搜发现没有，只好自己去写，一开始用的是平常css+js实现功能，之后学习了flex布局，所以又想到了用flex实现横向滚动条。两种方法，记录下来，供以后借鉴。 正文：
浅谈新的布局方式-flex
摘要：引言： 网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。我在网上看到有很多写flex布局的博文，自己就写着复习一下这个flex布局。 一 基本概
box-sizing -- 盒模型
摘要：项目开发中，在浏览同事的代码，发现他经常用一个属性--box-sizing，很好奇是什么，于是乎，上网查阅资料学了起来。 首先我们先复习一下盒模型的组成：一个div通常由 content(内容)+margin+padding+border组成。 浏览器有两种盒模型：w3c说的标准模型和ie下的传统模
calc() ---一个会计算的css属性
摘要：最近这个月一直在赶项目开发，遇到的问题和学到的前端知识没有更新到博客园，现在闲了下来，就整理一下前端知识。 在项目开发中，在样式这方面花费的时间较多，因为针对于数字的变化特别多，本人不爱记数字，在看设计图时总是反复计算之间的数值，觉得很麻烦，偶然谷歌一下，发现了css3的一个属性--calc() c
px em rem的详解与区别
摘要：在前端项目开发中，px，em，以及rem都是页面布局常用的单位，虽然它们是长度单位，但是所含的意义不一样。通过复习和查阅，总结了以下知识。 px像素（Pixel） 定义：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册） 特点： 1：px代表的是像素，用它设置字体大小时，
