2018-12-29学习记录---第一章引言

一、浏览器前缀

最常见的前缀分别是 Firefox 的 -moz-、IE 的 -ms-、Opera

的 -o- 以及 Safari 和 Chrome 的 -webkit-。

二、CSS编码技巧

（1）尽量减少代码重复

（2）存在依赖，用代码表达出来他们的相互关系。

font-size：125%;

line-height:1.5;

注解：行号是字体的1.5倍。变成可缩放的，依赖字号进行缩放。

（3）其实只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了：

padding: .3em .8em;

border: 1px solid rgba(0,0,0,.1);

background: #58a linear-gradient(hsla(0,0%,100%,.2),

transparent);

border-radius: .2em;

box-shadow: 0 .05em .25em rgba(0,0,0,.5);

color: white;

text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

（4）技巧：

a.代码易维护VS代码量少；

b.特殊的颜色关键字：currentColor

示例：水平线与文本的颜色保持一致。

hr {

height: .5em;

background: currentColor;

}

c.inherit

inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。

示例1：要把超链接的颜色设定为与页面中其他文本相同，还是要用inherit：

a { color: inherit; }

示例2：inherit 关键字对于背景色同样非常有用

在创建提示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式。

.callout { position: relative; }

.callout::before {

content: "";

position: absolute;

top: -.4em; left: 1em;

padding: .35em;

background: inherit;

border: inherit;

border-right: 0;

border-bottom:0；

transform：rorate(45deg);

}