《CSS揭秘》心得

第一章

1. 第一章主要介绍的是编码技巧，设计一个网站，涉及多方面的知识，不管是团队合作完成或是个人完成，为了更高效率地完成网站开发，以我个人的观点，前端开发需要遵循以下三个原则：

1. 代码的可复用性
2. 代码的可维护性
3. 代码的可读性（这个可读是简单易懂加减少重复的意思）
4. 代码的可二次开发性

当以上原则冲突时，应按照实际情况来进行斟酌选择。

 

1.  

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

border-width：10px；

border-left:0px；

（2）例如：例如，我们想让所有的水平分割线元素自动与文本颜色保持一致，只需要这样写。

hr { background: currentColor;}

border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor。currentColor本身就是很多颜色属性的初始值，例如border-color、outline-color、text-shadow和box-shadow的颜色。

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

callout:before {

   //其他代码

   background: inherit

   border: inherit

}

 

3、在第一章文章详细地说明了几个例子，下面我列举一下对我影响比较深刻的几个内容：

（1）“总的来说，我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体

查询的各个断点区间内指定相应的尺寸”

（2）假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，

background-size: cover 这个属性都可以做到。但是，我们也要时

刻牢记——带宽并不是无限的，因此在移动网页中通过 CSS 把一张

大图缩小显示往往是不太明智的。

实际应用：

Q：line-height:1.5 与line-height:150%的差别？

A：line-height:1.5 是根据自身元素的font-size进行计算。

line-height:150% 是根据父元素继承而来的font-size进行计算。

Q：rem,em,px的差别

A:rem是css3新增单位。rem为元素设定字体大小时，相对的只是HTML根元素。【IE8以下不支持】

em 相对于父元素的字体大小。

px 像素px是相对于显示器屏幕分辨率而言的

 

第二章背景与边框

1、半透明边框

解决方案：

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);