一半设计一半前端

上篇传送门：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，在一些特殊布局方面提供了很好的帮助，还是需要掌握。翻了很多文章，终于看到一篇介绍详细...

最近在备CSS基础的课程，以为很简单的事情，结果却在一些基本的概念上翻了车，有时候你以为简单的事情，其实你并不理解它的原理。在百度上翻了一下午，终于找到了一篇好文章，是翻译自国外的，很有意义，所以转载到自己博客上。这是中文的链接：你所不知道的vertical-align这是英文的链接：Vertica...

布局是网页的框架，灵活的布局可以让页面信息得以合理的摆放，强健的布局方案可以适应不同分辨率下页面的显示。1、上中下三栏式2、左右两栏式3、左右加页眉页脚4、左中右三栏式       浮动布局    &...

一、什么是栅格布局一提到响应式布局，很多人都会使用框架，比如熟知的bootstrap，但是框架大而全，相应的代码就冗余，有时候开发一个小应用根本不用上框架，直接自己搭建一个小的栅格系统就可以用了。其实栅格，说直白一点就是把页面划分成很多等分的列。比如，经典的12grid，就是把网页划分成等分的12列...

CSS3提供的函数calc()，是calculate（计算）的缩写，具有计算的能力，允许通过+ - * / 运算符构成一个数学表达式，最终产生一个具体的value值。 calc()是动态计算，任何数值都可以用这个函数计算，比如width，height，font-size...

因为Edge13支持这个属性了，所以打算写出来，毕竟已经看到有项目使用这个CSS3的新属性了。CSS3 filter 属性是用来为一个元素（通常是图片）添加特殊的效果。一、语法结构filter: none | blur() | brightness(...

一、图片响应式设计的老方法。在以前为图片做响应式设计的时候，一般用三种方法。第一种，直接让图片和父容器保持100%：img {     width: 100%;     height: ...

其实在CSS2的规范就提出了@media的规则，就是根据不同的设备使用不同的css样式。遗憾的是很多设备媒介没有得到支持。所以在CSS3中，关于媒体查询的含义发生了改变，不再是查看设备的类型，而是查看设备的功能。媒体查询主要可以查看设备的功能如下：设备视口的宽度和高度设备本身的宽度和高度。横屏竖屏（...

过年最大的好处就是可以和孩子出门疯玩，不到天黑不回家。一晃眼，又坐在教室里，开始上课写文章了。一直写博客，但是今年想尝试一下自媒体，写写教育类的文章，算是新年的一个flag吧。进入正题……上一篇讲了作用在flex container上的6个属性，这篇文章讲解作用在flex items上面的6个属性。...

都9102年了，还使用float布局呢，是时候了解一下被IE11以及谷歌、火狐等浏览器都支持的flex弹性布局了。flexbox布局从最早的2009年开始，历经了各个不同的版本，还有各路浏览器早期的前缀时期，现在在IE11上已经没有问题了，虽然pc端因为IE9的存在还没有彻底普及，但是移动端已经是没...

CSS3中，新增了如下的user interface(用户界面)特性：但是，除了box-sizing，outline-offset，resize的支持度不错之外，其他几个特性浏览器全部不支持。曾经早期的Opera还支持，自从被Chrome收编之后，也都不支持了。所以，这篇文章只谈被浏览器支持的三个特...

复选框，单选框都不好直接用css样式美化，总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话，那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持，这就逼得大家另想办法了。利用label挂钩checkbox的特点来实现。当html代码中，labe...

对于表单控件的样式修改一直是个老大难的问题，如果不做大手术，还是很好兼容IE10和谷歌等现代浏览器的。有两种常规方法。第一种：直接干掉select旁边的小箭头，用图片或者border绘制三角形代替。chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearanc...

兼容性问题一直是让前端工程师脱发的主要罪魁祸首，所以，利用一些神器工具可以挽救你的发际线。先来一个兼容性全包括的代码片段，这是IE9不支持圆角的全系列：.gradient{ background: #d91915; /* Old browsers ...

animation动画除了可以实现补间动画外，还可以完成逐帧动画。在animation的属性中，有个属性animation-timing-function一共具有如下这些值，来自于MDN。/* Keyword values */ animation-timing-fu...