接续前端H5+CSS3

绝对定位(absolute position)

• 当元素的position属性的值设置为absolute时，则开启了元素的绝对定位
• 绝对定位的特点
  1. 开启绝对定位后，如果不设置偏移量，元素不会发生任何变化
  2. 开启绝对定位后，元素会从文档流中脱离
  3. 绝对定位会改变元素的性质，行内变成块，块的宽度被内容撑开
  4. 绝对定位会使元素提升一个层级
  5. 绝对定位元素是相当于其包含块进行定位的
• 包含块(containing block)
  • 正常情况下：
    • 包含块就是高于当前元素最近的祖先块元素
  • 绝对定位的包含块：
    • 包含块就是离它最近的开启了定位的祖先元素
      • 如果所有祖先元素都没有开启定位则根元素就是它的包含块（根元素—html，也称初始包含块）

固定定位

• 当元素的position属性设置为fixed时，则开启了元素的固定定位
• 固定定位也是一种特殊的绝对定位，因此固定定位的大部分特点和绝对定位一样
  • 唯一不同的是固定定位永远参照于浏览器的视口进行定位

粘滞定位

• 当元素的position属性设置为sticky是，则开启了元素的粘滞定位
• 粘滞定位与相对定位类似</font>

元素的层级

• 对于开启了定位元素，可以通过position属性来指定元素的层级

  • Z-index需要一个整数作为参数，值越大元素层级越高
  • 元素的层级越高越优先显示

• 如果元素的层级一样，则优先显示靠下的元素

• 祖先的元素的层级再高也不会盖住后代元素

字体

• 字体样式

  • color 用来设置字体颜色
  • font-size 字体的大小
    • em 相当于当前元素的一个font-size
    • rem 相当于根元素的一个font-size
  • font-family字体格式
    • 可选值：
      • serif 衬线字体
      • sans-serif 非衬线字体
      • monospace 等宽字体
    • 定义：font-family可以同时指定多个字体，多个字体键使用,隔开
    • 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

      <style>
        p{
            color: red;
            font-size: medium;
            font-family: 'Courier New', Courier, monospace;
        }
      </style>
      

• 当客户的电脑上没有指定的字体时，我们选择的字体无法在客户机上使用，此时可以通过@font-face让客户在服务器上把字体下载下来

  • 关于@font-face的使用
    • 代码示例

      <style>
                  @font-face {
            /* 自定义字体名称 */
            font-family: 'my-font-face';
            /* 资源的网站 */
            src: url('my-font-face');
        }
      </style>
      

    • 注意：使用```@font-face```可能会出现的版权的问题，或者服务器资源堵塞的问题，导致字体无法使用，因此该方法请谨慎使用

图标字体

简介

• 我们在制作网页的时候，可能会用到大量的图片，他们可能很小，例如：
  

• 此时我们可以使用图标字体来把图片做成字体，
• 只需要导入字体即可使用这些小的图片
• 然后通过font-face来对字体进行引用
  • 推荐一个字体网站：http://www.fontawesome.com.cn/
  • 使用该网站下载的字体文件需要进行解压，然后把文件移入项目中
  • 注意：该文件必须和css文件放在同一个文件夹中，否则会出现路径问题，无法引入
• 最后在引入all.css

  <link rel="stylesheet" href="./fa/css/all.css">
  

  • 此时引用成功

    使用图标字体

  • 方法一：
• 直接通过类名使用图标字体

  <i class="fa fa-car"></i>
  <i class="fa fa-car" style="font-size:48px;"></i>
  <i class="fa fa-car" style="font-size:60px;color:red;"></i>
  

• 详细的font awesome教程尽在https://www.runoob.com/font-awesome/fontawesome-tutorial.html