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

超、凢脫俗 2022-06-13 03:16 216阅读 0赞

**第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: .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;

关于使用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实现

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;