摘要：它的出现还真的蛮令人惊喜的，很适用于百分比宽度。之前我们有box-sizng，而今又多了一个它，并且，calc的实用性更高。我们可以在border、margin、pading、font-size和width等属性上做一些加减乘除，简单拿width举例：.wrap {background-color:... 阅读全文

摘要：面试题，刚在github上看到的，说说这里面的知识点吧~~padding-bottom的值，其百分比是根据元素自身的width来算的。padding，在标准盒模型中，width+padding+border=内盒到这里，其实已经做到了宽高自适应且固定比例，题目算是解答完成了。不过，我们可以扩展下这个... 阅读全文

摘要：rem是指根元素的字体大小，默认情况下html的字体大小为：16px=1rem。而em是相对单位，是基于它的祖先元素计算的。如果我们不指定html和body的字体大小，要得到12px的rem需要这样计算：12/16=0.75rem下面这张图em和px的转换关系是基于父元素是16px的情况下，所以re... 阅读全文

摘要：outline的属性与border大体相似。outline有outline-color,outline-style,outline-style,outline-width,还有一个用于设置偏移位置的属性：outline-offset，当offset为负值时，表示像内偏移多少像素。outline-co... 阅读全文

摘要：CSS盒模型有两种，1是W3C标准的盒模型（chrome firefox ie6+等） 2是IE传统的盒模型（IE 5.5-）盒模型又分外盒模型与内盒模型：（这里只以宽度计算规则为例，高度类似略）W3C标准的内盒宽度=内容宽度+padding+borderW3C标准的外盒宽度=内容宽度+paddin... 阅读全文

摘要：css3为white-space新增了2个非常高冷的值：pre-line与pre-wrap。现在我们来看一下它们与pre之间的区别呢？pre:会保留空格，但我想它与pre-line/pre-wrap最大的不同点就是不会自动换行，单行走到底，直到遇到一个换行符才会换行。（所以被嫌弃了么→ →）pre-... 阅读全文

摘要：css3新增了一些背景相关的属性，其中background-origin与background-clip是比较让人困惑的：background-origin:用于指定绘制背景图片的起点。默认值：padding-box。background-clip:用于指定背景图片的显示范围。默认值：border-... 阅读全文

摘要：box-shadow算是css3中比较常用的属性，通常的用法我们会给它传4个参数，就像下面的这个例子：水平偏移和垂直偏移为0，模糊半径为10px，阴影颜色为正红色。.box{ width: 80px; height: 80px; box-shadow: 0 0 10px #f00;}当然我们也... 阅读全文

摘要：对于border-radius这个属性，我们知道它可以用来设置边框圆角，利用它我们可以画出很多形状这就需要了解到border-radius的各式写法：border-radius的写法：1、只设置一个值,这是最常见的写法border-radius:4px;2、设置两个值，第一个值用来设置左上角和右下角... 阅读全文

摘要：-webkit-filter: grayscale(1);/*灰度*/-webkit-filter: sepia(1);/*褐色*/-webkit-filter: saturate(1);/*饱和度*/-webkit-filter: hue-rotate(6deg);/*色相旋转*/-webkit-... 阅读全文

摘要：效果如图~ 鼠标悬停在左侧和右侧这6个链接时，会显示一个带提示文字的层。中间的两个链接无提示层。浏览器前缀只写了webkit的，低版本IE未做js兼容，只是简单的排列。(好吧，一方面没什么确定的思路，不过我想应该是要在鼠标处于悬停时获取鼠标相对于菱形盒子的x,y坐标，求x/y的值来判断有没有超出盒子... 阅读全文