关于CSS进阶

1. @规则： at-ruler（@规则、@语句、CSS语句、CSS指令）
   import：
   导入另外一个CSS文件的方法：在HTML文件引入的CSS文件中使用@import “CSS文件的路径”的指令。
   charset：
   告知浏览器该CSS文件所使用的字符编码集为utf-8：@charset “utf-8”

2. Web字体与图标：
   用户电脑上若没有安装相应字体，强制让用户下载该字体，使用@font-face指令制作一个新的字体

3. 块级格式化上下文：
   
   作用：规定了在该区域中，常规流块盒的布局。
   特点：
   
   
   
   
   可以通过创建BFC的方式解决盒子“高度坍塌”的问题
   

4. 布局：
   多栏布局：两栏布局、三栏布局
   等高布局：

• 伪等高
• 使用CSS3的弹性盒
• JS控制
  元素书写顺序
  后台页面布局

5. 行高： 顶线向上延申的空间，底线向下延申的空间，两个空间相等，该空间叫做line gap（空隙），默认情况下由字体设计者设计。
   行高的取值(line-height)：
   百分比
   px，像素值单位
   无单位的数字：当前字体大小的倍数，先继承再计算像素值。
   em单位：当前字体大小的倍数，先计算像素值再继承。
   （默认值为normal）
   top到bottom的距离叫做virtual-area（虚拟区）。
   虚拟区不一定大于内容区！
6. body背景：
   画布（canvas）：一块区域。
   特点：最小宽度为视口宽度，最小高度为视口高度。
   如果html元素有背景，html元素背景覆盖画布；反之若html元素无背景，body元素背景覆盖画布。
7. 关于画布的背景图：

• 背景图宽度的百分比是相对于视口的；
• 背景图高度的百分比是相对于html元素（网页）高度的；
• 背景图横向位置的百分比、预设值是相对于视口的；
• 背景图的纵向位置的百分比、预设值是相对于html元素（网页）高度的。

8. 行盒的垂直对齐：
   多个行盒垂直方向上的对齐：
   解决方法：使用预设值或者数值给没有对齐的元素设置vertical-align：middle。
   图片的底部白边：图片的父元素为一个块盒，且高度为自动，图片底部和父元素底边之间往往会出现空白。
   解决方法：
   方法一：设置父元素的字体大小为0；
   方法二：将图片设置为块盒。

9. 浮动的细节规则：
   

10. 参考线深入理解字体：
    决定参考线：font-size、line-height、font-family、vertical-align。（块盒无参考线！）
    文字来源：通过一些文字制作软件进行制作，例如fontforge。（制作文字时会有几根参考线，同一文字类型，参考线一致，不同的文字类型，参考线不同。）（文字一定在行盒里面；如果一个元素的子元素出现行盒，该元素内部也会产生参考线）
    文字大小：设置文字的相对大小。
    文字的相对大小：常用尺寸：1000、1024、2048。
    文字顶线到底线的距离：是文字的实际大小（内容区：content-area）。（行盒的背景覆盖内容区）
    vertical-align的取值：

• baseline：表示该元素的基线与父元素的基线对齐；
• super：表示该元素的基线与父元素的上基线对齐；
• sub：表示该元素的基线与父元素的下基线对齐；
• text-top：表示该元素虚拟区的顶边top与父元素的text-top对齐；
• text-bottom：表示该元素虚拟区的底边bottom与父元素的text-bottom对齐；
• top：表示该元素虚拟区的顶边top与line-box的顶边top对齐；
• bottom：表示该元素虚拟区的底边bottom与line-box的底边bottom对齐;
• middle：表示该元素的中线（内容区的一半）与父元素X字母高度一半的位置对齐；
• 数值：表示相对于基线的偏移量，向上为正数，向下为负数；
• 百分比：表示相对于基线的偏移量，和相对于自身虚拟区的高度。
  行框（line-box）： 行盒组合起来，可以形成多行，每一行的区域即被称为行框，行框的顶边即为该行的最高顶边，行框的底边即为该行的最低底边。（一个元素的实际占用高度即高度自动时，高度的计算通过line-box计算；line-box是承在内容的必要条件）
  不存在行框的情况：
• 某元素内部没有任何行盒；
• 某元素字体大小为0。

11. 可替换元素的基线：

• 图片：图片的基线位于图片的下外边距。
• 表单元素：基线位置在内容底边。

12. 行块盒的基线：
    行块盒最后一行有行框，用最后一行的基线作为整个行块盒的基线。
    行块盒内部没有行盒，则使用下外边距作为基线。
13. 堆叠上下文（stack context）： 由某个元素创建的一块区域，规定了该区域中的内容在Z轴上排列的先后顺序。
    堆叠级别（stack level）：z-index
    创建堆叠上下文的元素：

• html元素（根元素）；
• 设置了z-index数值（非auto）的定位元素。
  同一个堆叠上下文中元素在Z轴上的排列：
  每个堆叠上下文独立于其它其它堆叠上下文，相互之间不能穿插即每个元素内部的排列都是单独的，与外面一层的排列无关。
  从后至前的排列顺序：
• 堆叠上下文的元素的背景和边框；
• 堆叠级别为负值的堆叠上下文；
• 常规流非定位的块盒；
• 非定位的浮动盒子；
• 常规流非定位的行盒；
• 任何z-index是auto的定位子元素，以及z-index为0的堆叠上下文；
• 堆叠级别为正值的堆叠上下文
  若出现两个元素均符合上述某种情况时，则后者覆盖前者。

14. svg（scalable vector graphics）： 可缩放的矢量图，使用xml语言进行定义。
    特点：该图片使用代码书写而成；缩放不会失真；内容轻量。
    使用方式：可以嵌入浏览器，也可以单独成为一个文件。
    
    A半径一 半径二 顺时针旋转角度 小弧(0)或大弧(1) 顺时针(0)或逆时针(1)
15. 数据链接： 将目标文件的数据直接书写至路径位置。（data url）

• 语法：data：MIME，数据（文件内容）。
• 优点：减少了浏览器中的请求即减少了请求过程中浪费的时间；有利于动态生成数据。
• 缺点：增加了页面资源的体积，导致了传输内容的增加，从而增加了单个资源的传输时间;增加原资源的体积为原来体积的4/3；不利于浏览器的缓存（浏览器通常会缓存图片文件、css文件、js文件）。
• 应用场景：
  请求单个图片体积较小，并且若该图片由于各种原因不适合制作雪碧图，，可以使用数据链接；
  图片由其他代码动态生成，并且图片较小，，可以使用数据链接。
• base64：一种编码方式。

16. 浏览器兼容性：
    问题产生的原因：市场竞争、标准版本的变化。
    
    浏览器在处理样式或颜色时，如果遇到无法识别的代码，会直接略过。
    
    css hack：
    

caniuse：查找CSS兼容性caniuse.com

17. 关于盒子在其包含块中居中的总结：
    水平居中：

• 行盒（行块盒）：直接设置行盒（行块盒）其父元素的属性，text-align：center。
• 常规流块盒：定宽，设置margin：0 auto。
• 绝对定位元素：设置left：0，right：0；margin：任意值 auto。
  垂直居中：
• 单行文本：设置文本所在元素的行高，为整个区域高度。
• 行块盒或块盒内多行文本：设置盒子上下内边距相同以达到居中效果。
• 绝对定位元素：设置top：0；bottom：0；margin：auto 0。

18. 样式补充：
    
    
    
    
    对于text-align：justify，可以再代码块后面再加上一个::after{content：“ ”；display：inline-block；width：100%}，使其最后一行也能实现分散对齐。
    
    utf-8: