48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

1. 什么是字号与行高 其中半行距 = (lineHeight – fontSize) / 2。 对于笔者用的ProximaNova这个字体，设置font-size为30px，实际上高度为42px。为什么文字的高度不等于字号的高度？这得从字体设计说起。为此装了一个FontFor…

更加灵活。 很显然，这比纯色的背景好看太多了。 由此可见，渐变并没有那么简单。 通过这个例子，是不是使用渐变的思路更加开阔了。不过这里还需要注意一点： 当你声明多个渐变时，最先声明的，离用户越近。（这里就需要我们考虑遮盖的问题，一般采用transparent）； 对于径向渐变的…

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。 怎样才能达到这个效果，使我们的网站脱颖而出呢？其实…

有这样一个问题。 别急，下面我们就开始逐一分析各种方法在web自适应布局下的使用姿势，最后做个总结。 本文的所有例子使用了同一种三栏布局。源代码点我 1. 浮动布局 float:left|right 最常用的布局方式之一，设置了float的元素脱离了文档流。需要注意在使用过浮动…

by.陈 蔓青 2017-9-25 身为前端，除了与风格迥异的代码打交道，还有一个很常见的就是跟设计师对接，从他们提供的 psd 里面扣出需要用到的小图标等等。下面就讲讲切图的各种姿势 首先来一个很傻瓜的也很常用的一个方法，对于少量图标适用： 1. 将你想要扣出来的图标…

SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称，是一种用来描述二维矢量图形的XML标记语言。SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描…

什么是响应式？响应式的页面在不同的屏幕有不同的布局，换句话说，使用相同的html在不同的分辨率有不同的排版。如下图所示： 响应式布局是为了解决适配的问题，传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了。因为它是用的同样html，所以它的JS…