《CSS揭秘》读书笔记

作者:hwj3747
转载请注明

写在前面

在开始之前，我要夸一下这本书。这本书真的非常不错，里面记载了各种H5，CSS3的编程技巧，让人觉得耳目一新，与一般的书很不一样。但是，这本书并不是一本初学者入门的书，在看这本书之前，你需要有一点前端开发的基础。个人目前还没看完，先记录一下从里面get到的知识点！

代码可维护性

在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。
举例来说，如果在放大一个按钮时需要在一堆规则中进行10 处修改，那就很可能会漏改其中某处，当你在给别人善后时更是如此。

举个例子，我们给一个按钮添加如下效果：

button{
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
}

这段代码在可维护性方面存在一些问题，。如果我们决定改变字号（可能是为了生成一个更大、更重要的按钮），就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少。当某些值相互依赖时，应该把它们的相互关系用代码表达出来。
在这个例子中，行高是字号的1.5 倍,只要设置行高为1.5就行，然后字号改用百分比或em 单位就好多了
更改之后结果如下：

button{
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}

按照这种方法，我们就可以在一处控制按钮的所有尺寸样式了。
现在，还有一个问题，假设我们要创建一个红色的取消按钮，或者一个绿色的确定按钮，该怎么做呢？眼下，我们可能需要覆盖四条声明（bordercolor、background、box-shadow 和text-shadow），而且还有另一大难题：要根据按钮的亮面和暗面相对于主色调#58a 变亮和变暗的程度来分别推导出其他颜色各自的亮色和暗色版本。
解决方法就是，把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了：

button{
	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);
	font-size: 125%;
	line-height: 1.5;
}

现在我们只要覆盖background-color 属性，就可以得到不同颜色版本的按钮了:

button.cancel {
background-color: #c00;
}
button.ok {
background-color: #6b0;
}

半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：

<div class="border"><div>
hahahhahahahaah
</div></div>

.border {
background: black;
padding: .8em;
}
.border div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
}

结果可能会令你摸不着头脑。我们的边框去哪儿了啊？而且如果我们连使用半透明颜色都不能实现半透明边框，那我们还有什么办法？！
尽管看起来并不像那么回事，但我们的边框其实是存在的。默认情况下，背景会延伸到边框所在的区域下层。也就是说白色背景延伸到边框区域，覆盖了边框，我们把子div的背景改成其他颜色，比如blue，我们就能看到一个浅蓝色的边框了，这是蓝色背景与半透明边框叠加后的效果。但是很多时候我们并不希望背景延伸到边框区域，这个时候我们可以通过background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

.border div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
}

多重边框

• box-shadow 方案
  我们大多数人可能已经用过（或滥用过）box-shadow 来生成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框.

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

这并没有什么了不起的，因为你完全可以用border 属性来生成完全一样的边框效果。不过box-shadow 的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道5px 的外框，那就需要指定扩张半径的值为15px（10px+5px）。并且，投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到box-sizing 属性的影响。不过，你还是可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间。

• outline 方案
  在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

灵活的背景定位

很多时候，我们想针对容器某个角对背景图片做偏移定位，如右下角。

• background-position 的扩展语法方案
  CSS3中background-position 属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。

div{
width:600px;
height:600px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
}

• background-origin 方案
  在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器的内边距一致。
  每个元素身上都存在三个矩形框（参见图2-14）：border box（边框的外沿框）、padding box（内边距的外沿框）和content box（内容区的外沿框）。默认情况下，background-position 是以padding box 为准的，这样边框才不会遮住背景图片。
  在CSS3中我们得到了一个新的属性background-origin，可以用它来改变这种行为。在默认情况下，它的值是（闭着眼睛也猜得到）padding-box。如果把它的值改成content-box（参见下面的代码），我们在background-position 属性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景
  图片距离边角的偏移量就跟内边距保持一致了）：

div{
width:600px;
height:600px;
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
}

条纹背景

假设我们有一条基本的垂直线性渐变，颜色从#fb3 过渡到#58a

background: linear-gradient(#fb3 20%, #58a 80%);

现在容器顶部的20% 区域被填充为#fb3 实色，而底部20% 区域被填充为#58a 实色。真正的渐变只出现在容器60% 的高度区域。
如果我们把两个色标重合在一起，已经没有任何渐变效果了，只有两块实色，各占据了background-image 一半的面积。本质上，我们已经创建了两条巨大的水平条纹。

background: linear-gradient(#fb3 50%, #58a 50%);

还可以通过background-size 来调整其尺寸,

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

我们把这两条条纹的高度都缩小到了15px。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹.
如果要创建垂直条纹，只需要指定渐变的方向即可：

background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);
background-size: 30px 100%;

斜向条纹：

background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

或者

background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);

repeating-linear-gradient():色标是无限循环重复的，直到填满整个背景。

未完待续。。。