《css揭秘》学习笔记（一）

第0章 关于本书
1、检测属性

function testproperty(property){  var root = document.documentElement;  if(property in root.style){    root.classList.add(property.toLowerCase());    return true;  }  root.class classList.add('no' + property.toLowerCase());  return false;}

2、检测值

function testValue(id, value, property){  var dummy = document.createElement('p');  dummy.style[property] = value;  if(dummy.style[property]){    root.ClassList.add(id);    return true;  }  root.ClassList.add('no' + id);  return false;}

第一章 引言
CSS编码技巧
尽量减少代码重复
在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。

举例说明

padding:6px 12px;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;

以上的代码有什么问题呢？

如果需要改变字号，那么同时需要调整行高。【当某些值相互依赖时，应该把它们的相互关系用代码表达出来】
如果将父级的字号加大，则不得不修改每一处使用绝对值作为字体尺寸的样式。
需要确定哪些效果是应该跟着变大变小，哪些效果是保持不变的
产生主色调的亮色和暗色变体，其实可以使用将半透明的黑色或白色叠加在主色调上。

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

//作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短，重复率更低。

经过修改后的代码如下：

padding: .3em .8em;border: 1px solid rgba(0,0,0,.1);background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);border-radius: .2embox-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;

关于使用rem还是em还是百分比，需要根据具体情况来决定。
【插播笔试题】
Q：line-height:1.5 与line-height:150%的差别？

line-height:1.5 是根据自身元素的font-size进行计算。
line-height:150% 是根据父元素继承而来的font-size进行计算。
Q：rem,em,px的差别

rem css3新增单位。rem为元素设定字体大小时，相对的只是HTML根元素。【IE8以下不支持】
em 相对于父元素的字体大小。
px 像素px是相对于显示器屏幕分辨率而言的
继续回到css编码技巧。

有时候，代码易维护和代码量少不可兼得。

例如，为元素添加一个10px宽的边框，但左侧不加边框
border-width: 10px 10px 10px 0;
但若以后需要改动边框的宽度，需要同时改3个地方。那么以下这种方式可能更好。

border-width: 10px;border-left: 0;currentColor【IE9+支持】

例如，我们想让所有的水平分割线元素自动与文本颜色保持一致，只需要这样写。
hr { background: currentColor;}
border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor。currentColor本身就是很多颜色属性的初始值，例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下，currentColor有一些bug，例如伪元素hover时候，background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客，currentColor-CSS3超级好用CSS关键字。
继承 inherit

例如，在创建提示框时，可能希望小箭头能自动继承背景和边框的样式。就可以这样做。 .

callout:before {   //其他代码   background: inherit;   border: inherit;}

相信你的眼睛，而不是数字
视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致，需要减少顶部和底部的内边距。
关于响应式网页设计
作者提出了一些建议，可能可以避免不必要的媒体查询
使用百分比长度来取代固定长度，如果做不到，尝试使用与视口相关的单位(vw,vh,vmin,vmax)，它们的值解析为视口宽度与高度的百分比。
当需要在较大分辨率得到固定宽度时，使用max-width
不要忘记为替换元素（例如img,object,video,iframe等）设置一个max-width，值为100%
假设背景图片需要完整的铺满一个容器，可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】
当图片或其他元素以行列式进行布局，让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。
在使用多列文本时，指定column-width而不是column-count，这样可以在较小的屏幕上自动显示为单列布局。【尽量实现弹性可伸缩的布局，并在媒体查询的各个断点区间内制定相应尺寸】
合理使用缩写
如果要明确地去覆盖某个具体展开式属性并保留其他相关样式，则需要用展开式属性。

第二章背景与边框
1、半透明边框
opacity
RGBA/HSLA
解决方案：

background-clip：padding-box/*默认值是border-box（背景会被元素的边框的外沿框裁切掉）,内边距的外延把背景裁切掉*/

2、多重边框
box-shadow:利用，实现多边框，只能设置实线

background:yellowgreen;box-shadow: 0 0 0 10px #655,            0 0 0 15px deeppink,            0 2px 5px 15px rbga(0,0,0,.6);

outline：两层边框，边框不一定会贴合border-radius产生的圆角

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

3、灵活的背景定位
css2.1只能定位图片在容器左上角的位置。
css3background-position指定背景图片距离任意角的偏移量，只要在偏移量前指定关键字

background:url(code-priate.svg) no-repeat #58a;background-position:right 20px bottom 10px;background:url(code-priate.svg)no-repeat bottom right #58a;/*回退方案*/background-position:right 20px bottom 10px;

偏移量与容器内边距一致时，设置

padding:10px;background:url(code-priate.svg)no-repeat #58a            bottom right ;background-origin:content-box;/*默认是以padding-box为准,在这里改成content-box*/calc()方案background:url(code-priate.svg) no-repeat;background-position:calc(100% - 20px) calc(100% - 10px);

4、边框内圆角
难题：容器内侧有圆角，边框或者描边的四个角在外部仍然保持直角。
通常两个元素可以实现，内外两个div
只用一个元素

background:tan; /*一个元素实现外边框直角，内边框圆角，描边不会跟着容器走*/border-radius:.8rem;padding:1rem;box-shadow:0 0 0 .6rem #655;outline:.6rem solid #655

5、条纹背景
水平条纹

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

不等宽度的条纹

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

易于dry的代码，根据css3规范：如果某个色标的位置值比整个列表中在它之前的色标的位置都要小，则该色标的位置值会被设置为他前面所有色标位置值的最大值。只需修改前面的值：

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

即后面的0会被修改为30%
三种颜色的水平条纹

background:linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size:100% 45px;

垂直条纹
开头加一个参数，默认是to bottom，而且需要把background-size的两个值颠倒。

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;

这样创建出来的条纹要细一些，因为勾股定理，如果想要15px,需要将background-size设置为43；
更好的斜向条纹

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

以下可以得到和上面斜条纹一样的形状，不需要考虑勾股定理了

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

灵活的同色系条纹

background : #58a;background-image: repeating-linear-gradient(30deg,                  hsla(0,0%,100%,.1),                  hsla(0,0%,100%,.1), 15px;                  transparent 0, transparent 30px);

6、复杂的背景图案
网格

background:white;background-image:linear-gradient(90deg,                  rgba(200,0,0,.5) 50% transparent 0),                 linear-gradient(                  rgba(200,0,0,.5) 50% transparent 0),background-size: 30px 30px;

希望网格中格子大小可以调整，但是网格线条的粗细同时保持固定，使用长度而不是百分比作为色标：

background:58a;background-image:linear-gradient(white 1px, transparent 0),                 linear-gradient(90deg, white 1px, transparent 0),background-size: 30px 30px;

两幅不同颜色，不同线宽打的网格图案叠加---蓝图网格。

background:58a;background-image:linear-gradient(white 2px, transparent 0),                 linear-gradient(90deg, white 2px, transparent 0),                 linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),                 linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0),background-size: 75px 75px 75px 75px,                 15px 15px 15px 15px;

波点
不适用的波点

background:#655;background-image:radial-gradient(tan 30%, transparent 0);background-szie:30px 30px;

真正的波点：

background:#655;background-image:radial-gradient(tan 30%, transparent 0)                  radial-gradient(tan 30%, transparent 0);background-szie:30px 30px;background-position:0 0 15px 15px;

棋盘

background:#eee;background-image:radial-gradient(45deg, #bbb 25%, transparent 0),                  radial-gradient(45deg, transparent 75%, #bbb 0),                  radial-gradient(45deg, #bbb 25%, transparent 0),                  radial-gradient(45deg, transparent 75%, #bbb 0);background-position:0 0 15px 15px,                    15px 15px,30px 30px;background-szie:30px 30px;

使用svg实现

<svg xmlns="http://www.w3.org/2000/svg"  width="100" height="100" fill-opacity=".25">  <rect x="50" width="50" height="50"/>  <rect y="50" width="50" height="50"/></svg>

css代码处理为多行：在行末打上反斜杠（“\”） 换行。
7、伪随机背景

background:hsl(20%, 40%, 90%);background-image:      linear-gradient(90deg, #fb3 11px, transparent 0),      linear-gradient(90deg, #ab4 23px, transparent 0),      linear-gradient(90deg, #655 41px, transparent 0),background-szie:41px 100%, 61px 100%, 83px 100%;

8、连续的图像边框

padding: 1rem;border: 1rem solid transparent;background: liner-gradient(white, white),            url(store-art.jpg);background-size: cover;background-clip: padding-box, border-box;background-origin: border-box;

简写为

padding: 1rem;border: 1rem solid transparent;background: liner-gradient(white, white) padding-box,            url(store-art.jpg) border-box 0 /cover;

老式信封

padding: 1rem;border: 1rem solid transparent;background: liner-gradient(white, white) padding-box,            repeating-linear-gradient(45deg, red 0, red 12.5%,            transparent 0 , transparent 25%,            #58a 0, #58a 37.5%,            transparent 0, transparent 50%)            0 / 5rem 5rem;