分类： css

安装sass 和 compass 需要使用 gem 命令， gem 是ruby 的包管理工具。安装好ruby后，命令gem就可以使用了。

flex布局特别灵活，特别是在手机端上，完全没有兼容的问题。 今天遇到一个问题，有一个4*2的布局,上面四个元素，下面也是四个，元素之间需要有1px的间距。显示的效果这个样子。

calc 在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、- 、*、/ 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格。calc 大大的增加了css的灵活性。给一些特殊的布局，提供了方便。

text-align-last:justify 用于后一行元素两端对齐，可以把元素平均的分布在父元素中，并且左右没有空白。 不过苹果浏览器(safari)不支持text-align-last, 解决的方法也很简单。原理是使用伪元素 ：after, 添加个后一行，这样 text-align-last就可以不用了。 text-align-last 兼容的代码 .tal:after { conten

table 默认的情况，如果给单元格，添加边框的时候。每个边框都会有自己的边框。这样看上去就出现了，类似的双边框情况。看上去一点也不美观，还是把边框设置成单线的时候，比较美观。table中有个border-collapse属性，就是用来合并边框的。防止出现“双边框的情况。

css原生的就支持图片或者文字两端对齐。两端对齐，在css布局中是很常见的。两端对齐，是子元素水平的，均匀的分布在父元素内 。css中使用两端对齐，使用的是 text-align-last:justify 。 之前没怎么使用过两端对齐，之前一直用浮动或者inline-block加宽度来模拟两端对齐， 这里记录一下如何使用text-align-last:justify实现两端对齐。

朋友的一个网站，有一个背景图片不显示。 看了一下源代码，发现背景图是写在双引号里面的。这个没什么问题，平时也是这么写的。怎么感觉双引号有点多呢。仔细一看，这是个行内样式的方式写的， style的内容也是在双引号之间的，这样就有冲突了。 style=”background:url(“mypic.jpg”)” ,这是个错误的写法。