CSS进阶知识：（@规则 ，，BFC，，布局）、body背景、行高、行盒对齐

行盒里面的文字会避开浮动元素，，浏览器会默认加上 span元素包裹（所以文字会避开float元素）

• @规则   at-rule  @规则、@语句、css指令、css语句
  • 1 import   @import “./../xxx.css”  作用  引入另一个CSS
  • 2 charset  @charset “utf-8” ;   作用 告诉浏览器使用 指定编码去读  必须位于第一行

---

 

• 　web字体
•  使用@规则制作新的字体，，
  • 写法

@font-face{
        font-family: "xx字体" ；//字体名称
        src:url("./../xx字体.ttf")            
}    
因为下载字体常常会造成页面闪烁，且字体文件较大，一般不用于显示。常常用来 制作字体图标；推荐 阿里的  icon-font

　　

---

 

• 块级格式化上下文（Block Formatting Content）
• 怎么创建BFC
  • 根元素即HTML元素
  • 浮动 或者 绝对定位 固定定位
  • overflow 取值 不为visible （默认值）的块盒   
    
  • display ：inline-block | tabel |table-cell

  • float的值不为none。
    overflow的值为auto,scroll或hidden。
    display的值为table-cell, table-caption, inline-block中的任何一个。
    position的值不为relative和static。
    

• 创建了BFC特点：　　
  • 他是一块独立的区域，
  • 不同BFC区域，渲染时互不干扰
  • BFC区域隔绝了内部与外部的联系，内部渲染不会影响外部
• BFC渲染规则
  • 创建了BFC的元素计算自动高度时，会要子元素的float元素，
  • 创建了BFC的元素，他的边框盒不会与浮动元素重叠（用来做左边固定宽度，右边自适应宽度）
  • 创建BFC元素，不会与子元素margin合并

　　

---

• 行高：

  • line-height：1px; 固定值  
  • line-height：2em; || line-height：2%;先计算再继承  （计算父元素的line-height值（font-size * 2）。再继承）； 多行文本，字体不一样时，或出现混乱
  • line-height：2; 先继承再计算 （先继承了line-height ：2  再用当前的元素的font-size ）；推荐

 

---

 

• body背景
  • 画布
    • 画布最小宽度为视口的宽度
    • 画布最小高度为视口的高度
    • 解释了，为什么，body元素没有宽高时，背景颜色却可以显示。设置的为画布的颜色

当HTML没有设置背景颜色，body元素的背景颜色将会 覆盖整个画布

当HTML设置了背景颜色，body元素就会和普通div一样，不会再撑满画布；

• 画布背景图　
• 宽度：设置背景图片时，图片百分比　相对于视口的宽度，而不是，画布的宽度
• 高度：背景图高度百分比，相对于HTML元素，即网页高度；
• 横向位置：百分比、预设值相对于视口
• 纵向位置：百分比、预设值相对于网页高度

当HTML元素，设置了background时，一切正常，上述都为直接在body上设置background的结果

 

---

 

• 图片的底部白边
• 原因
  • 图片的父元素是一个块盒，其高度自动，图片底部和父元素之间往往会出现白边
• 解决办法：　　
  • 设置父元素字体大小为0，副作用是，当内部有文字时，会看不见，单独设置span也不能解决
  • 设置图片为块盒