一半设计一半前端

好久没写教程了，这几年忙着上课备课，学习新的框架，忙着新公司的事情，一点空余的时间都榨不出来，结果新公司还是干倒闭了，万事皆空……！趁着现在没工作，把教程案例整理一下，算是做个总结。也不知道自己前端开发这个方向的职业生涯是否已经结束，毕竟这个就业市场对我们老人太不友好了。如果我真的转行了，这个网站就...

PC端一般都会做很多鼠标经过的样式，比如文字变色，图片变大，显示隐藏等效果。但是到了移动端，鼠标经过效果变成了点击之后出现，还伴随一个半透明的灰色背景。其实，在做页面之前，我们就要思考，这个效果是PC端鼠标悬停时的效果，在移动端没有悬停的时候又应该是什么样子？最好的解决方案就是利用Media Que...

曾经用flexible.js通过js动态计算html的font-size的方式已经不可取了。经过很多项目测试，发现最好的方式还是calc()结合vw、rem是最可取的最新方案。有了vw单位，再配合calc()函数进行计算，无须使用任何JavaScript代码，就可以实现基于设备宽度的移动端布局适配方...

使用flex弹性布局的时候，遇到单行文本使用省略号的时候，常常发现不成功。其实内部的原因还是因为宽度计算的优先级问题。min-width(max-width) > flex-grow(flex-shrink) > flex-basis(值非auto) > width ，如果弹性盒子...

上篇传送门：CSS3:grid网格布局终于来了！上篇下篇来讲作用在grid items上面的属性。一、网格格子占据的区域范围首先要明白有哪几种方法可以指定网格的位置。1、命名区域（Named Areas）通过grid-template-areas属性可以为每一个网格区域命名，从而可以指定某个子项属于...

这篇教程拖了一年多才写，今天总算想把这个坑给填了。grid网格布局是一种典型的二维布局，由行和列构成，其实就是很智能的一种表格，比起flex的一维轴向上的布局，grid对多行多列的布局控制要强大很多。当然，任何布局都有自己的优势和缺点，合适的场景选择合适的布局方式才是明智之举。首先，IE肯定是不支持...

以前看规范的时候，感觉这属性讲的太绕，没有去深究，不过不知其所以然的问题终究有一天还是要面对，毕竟明白自己无知就是学习的最大动力了。百度了一下，看到了一篇靠谱的文章，但是还不够全面，到底谁是原创不太好判定，我就以发布时间最早的为原创帖链接了。[翻译]Flex Basis与Width的区别不过，里面推...

border-image这个属性因为要IE11才支持，所以刚开始使用不太广，不过我认为使用不够广的原因还有一点，就是素材有一定的要求，要考验设计师的想象，虽然功能强大，但是使用场景其实比较限制。这个属性就是设置容器边框的图片，用以代替以前的边框只有纯色。比如这个图片素材，可以利用它生成各种大小的，具...

当用flex布局的时候，大部分的分布都会使用space-between的方式，但是当最后一行的个数和上面行的个数不一样的时候，最后一行的分布就显得尴尬。比如我们想要这样的效果：但是却出现这样的效果：如果每一行列数不确定，宽度不确定，间隔不确定的情况下，最好的方法就是为最后一个元素设置margin-r...

尽管flex布局已经是大势所趋，但是IE11的支持都还不是很友好，在要兼容IE9的PC端，浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell，在一些特殊布局方面提供了很好的帮助，还是需要掌握。翻了很多文章，终于看到一篇介绍详细...