# CSS 定位(position)

# 定位概述

  • 定位 (position) 是一种更加高级的布局手段
  • 通过定位可以将元素摆放到页面的任意位置
  • 使用 position 属性来设置定位
    • 可选值
      • static 默认值,元素是静止的则没有开启定位
      • relative 开启元素的相对定位
      • absolute 开启元素的绝对定位
      • fixed 开启元素的固定定位
      • sticky 开启元素的粘滞定位

# 相对定位 (relative position)

  • 当元素的 position 属性设置值为 relative 则开启相对定位
  • 相对定位的特点:
    1. 元素开启相对定位以后,如果不设置偏移量元素,则不会发生任何变化
    2. 相对定位是参照于元素在文档流中的位置进行定位的
    3. 相对定位会提升元素的层级
    4. 相对定位不会使元素脱离文档流(即不会改变元素性质)
  • 偏移量 (offset)
    • 当元素开启了定位以后,可以通过偏移量来设置元素的位置
    • 可选值:
      • top
        • 定位元素和定位位置上边的距离
        • top 值越大,定位元素越向下移动
      • bottom
        • 定位元素和定位位置下边的距离
        • 定位元素垂直方向的位置由 top 和 bottom 两个属性来控制
          • 通常情况下我们只会使用其一
        • bottom 值越大,定位元素越向上移动
      • left
        • 定位元素和定位位置的左侧距离
        • left 值越大,定位元素越向右移动
      • right
        • 定位元素和定位位置的右侧距离
        • right 值越大,定位元素越向左移动
        • 定位元素水平方向的位置由 left 和 right 两个属性来控制
          • 通常情况下我们只会选择其一

# 绝对定位 (absolute position)

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

# 固定定位

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

# 粘滞定位

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

# 元素的层级

  • 对于开启了定位元素,可以通过 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 可能会出现的版权的问题,或者服务器资源堵塞的问题,导致字体无法使用,因此该方法请谨慎使用

# 图标字体

# 简介

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

    face2

  • 此时我们可以使用图标字体来把图片做成字体,

  • 只需要导入字体即可使用这些小的图片

  • 然后通过 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
  • 方法二:

    • 可以通过伪元素对图标字体进行插入
      • 首先使用 beforeafter 伪元素标签来选中需要的图标字体
      • 然后在 content 中输入对应图标字体的编码
      • 设置字体样式 font-familyfont-weight 即可
  • 方法三:

    • 通过实体来使用图标字体
      • 在实体中加入 &# + 图标字体编码
  • 关于图标字体库 -----iconfont

    • 可以使用阿里的字体库:https://www.iconfont.cn/
      • 不过可能存在版权问题,商用的项目不建议使用
      • 在使用该网站的图标字体时
        • 如果使用彩色的图标字体,就直接使用图片的格式进行下载
        • 如果是黑白的图标字体,则直接添加到项目中打包下载
    • 也可以使用 font awesome :http://www.fontawesome.com.cn/
      • 不过该网站有的需要付费使用,免费的太过拉胯
  • 具体使用的代码展示

    <style>
          i.iconfont {
              font-size: 100px;
          }
          p::before {
              content: '\e686';
              font-family: "iconfont";
              font-size: 150px;
          }
      </style> 
      <body>
      <p>
          住在山里真不错
      </p>
      <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>
      <!-- 使用阿里图标字体库方法一:通过实体使用编码 -->
      <i class="iconfont">&#xe7d0;</i>
      <i class="iconfont">&#xe61d;</i>
      <i class="iconfont">&#xe655;</i>
      <i class="iconfont">&#xe662;</i>
      <i class="iconfont">&#xe61b;</i>
      <!-- 也可以使用类名来使用 -->
      <i class="iconfont icon-biaozhi1"></i>
      <!-- 也可以使用伪元素对图标字体进行插入 -->
      <p>
          传奇永不谢幕
      </p>
      </body>

# 行高(line height)

  • 定义:
    • 行高指文字占用页面的实际高度
  • 属性值: line-height
    • 可以直接设置一个大小(单位为 px 或 em)
    • 也可以设置一个整数(1===100px,即单倍行高,与 word 中的行距相类似)

# 字体距

  • 字体框就是字体存在的格子,可以设置大小和边框的宽度
    • 通过 font-size 设置大小
    <style>
          div{
              font-size: 50px;
              line-height: 200px;
               /* 边框设置 */
              border: 1px red solid;
          }
      </style>

# 字体的简写属性

<style>
      div {
          line-height: 2;
          /* 
              font 可以设置字体相关的所有属性(字体的简写属性)
                  标准语法:
                      font:  字体大小 / 行高  字体族
                      该简写中的行高可以省略不写,但不代表没有设置
                      而是会以默认值使用(并且覆盖上面设置的行高 line-height)
          */
          border: 1px red solid;
          /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
          font: 50px/3 Verdana, Geneva, Tahoma, sans-serif;
      }
  </style>
  <body>
  <div>
      三年前在南京我亻主的地方有一道后门,每晚我打开后门,便看见一个静寂的夜。下面是一片菜
      园,上面是星群密布的蓝天。星光在我们的肉眼里虽然微小,然而它亻吏我们觉得光明无处不在。那
      时候我正在读一些关于天文学的书,也认得一些星星,好像它们是我的朋友,它们常常在和我谈话
  </div>
  </body>

# 字体的水平对齐和垂直对齐

  • Text-align 文本的水平对齐

    • 可选值:
    • left: 左端对齐
    • right:右端对齐
    • center:居中对齐
    • justify:两端对齐
  • vertical-align 文本的垂直对齐

    • 可选值:
      • baseline 默认值 基线对齐
      • top 顶部对齐
      • bottom 底部对齐
      • middle 居中对齐
  • 代码演示:

    <style>
          div{
              border: 1px red solid;
              width: 800px;
              line-height: 5;
              text-align: center;
          }
          span{
              border: 1px red solid;
              font-size: 20px;
              vertical-align: baseline;
              
          }
      </style>
      <body>
      <div>
          三年前在南京我亻主的地方有一道后门,每晚我打开后门,便看见一个静寂的夜。下面是一片菜
          园,上面是星群密布的蓝天。星光在我们的肉眼里虽然微小,然而它亻吏我们觉得光明无处不在。那
          时候我正在读一些关于天文学的书,也认得一些星星,好像它们是我的朋友,它们常常在和我谈话
          
      </div>
      <span>住在山里真不错</span>
      </body>
    • 效果:
      duiqi

# 其他的文本样式

# 文本修饰

  • text-decoration 设置文本修饰
  • 可选值:
    • none 什么都没有
    • underline 下划线
    • line- through 删除线
    • overline 上划线
<style>
      .box{
          font-size: 50px;
          font-family: 微软雅黑;
          text-decoration: underline red;
      }
</style>
<body>
  <div class="box">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem quam soluta maiores sit? 
          Ipsum cum beatae impedit repellat at! Magnam consequuntur maiores dolor obcaecati nemo 
          ab vero qui quidem vel.
  </div>
  
</body>
  • 效果展示:
    文本其他样式

# 处理留白

  • white-space 设置网页如何处理空白
    • 可选值:
      • normal 正常
      • nowrap 不换行
      • pre 保留空白
  • 代码展示:
    <style>
            .box2{
                border: 2px orange solid;
                white-space: pre;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    </style>
    <body>
        <div class="box2">
            三年前在南京我主的地方有一道后门,每晚我打开后门,便看见一个静寂的夜。下面是一片菜
            园,上面是星群密布的蓝天。星光在我们的肉眼里虽然微小,然而它亻吏我们觉得光明无处不在。那
            时候我正在读一些关于天文学的书,也认得一些星星,好像它们是我的朋友,它们常常在和我谈话
        </div>
    </body>
  • 效果:
    留白

# 背景

在 CSS 中,我们可以通过设置属性来对页面的背景进行设置

  • background-color:
    • ** 定义:** 该属性用来设置背景图片的颜色
    • 一些特性:
      • 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
      • 大小问题:
        • 如果背景的图片小于元素,则背景图片会自动在元素中填满
        • 如果背景的图片大于元素,一部分的图片背景将无法显示在该元素中
        • 如果背景的图片等于元素,则会正常显示

  • background-image:

    • ** 定义:** 该属性用来引入背景图片(通过图片的路径实现)
  • background-repeat:

    • ** 定义:** 该属性用于设置背景的重复方式(也可以说是图片的重复)
    • 可选属性值
      • repeat 默认值,背景会同时向 x 轴、y 轴方向重复
      • repeat-x 此时只沿 x 轴方向重复
      • repeat-y 此时只沿 y 轴方向重复
      • no-repeat 背景不会重复

  • background-position:

    • ** 定义:** 该属性用户设置图片的位置
    • 使用方位属性值的设置方式:
      • 使用 topleftrightbottomcenter 表示要设置图片背景的位置
      • ** 设置方位是必须要同时设定两个值,如果只写一个第二个值会默认为 center
    • 使用像素值代表偏移量的设置方式:
      <style>
          .box1{
              width: 512px;
              height: 512px;
              background-color: orchid;
              background-image: url("./img/timg.gif");
              background-position: -52px 25px;
          }
      </style>
  • background-clip:

    • ** 定义:** 设置背景的范围
    • 可选值:
      • border-box 默认值 ,背景会出现在边框的下边
        bj01
      • padding-box 背景不会出现在边框,只出现在内容区和内边距
        bj02
      • content-box 背景只会出现在内容区
        bj03

  • background-origin:(图片需要正常显示则使用该属性)
    • ** 定义:** 背景图片的偏移量计算的原点
    • 可选值:
      • padding-box 默认值,background-position 从内边距处开始计算
      • content-box 背景图片的偏移量从内容区处开始计算

  • background-size:
    • ** 定义:** 设置背景图片的大小
      <style>
        .box{
          background-size:属性值1 属性值2;
        }
      </style>
      • 属性值 1 表示图片的宽度,属性值 2 表示图片的高度
        • 只写一个,另一个则为 auto
      • 其他可选值
        • cover 图片比例不变,将元素铺满
        • contain 图片比例不变,将图片在元素中完整显示

  • background-attachment:
    • 设置背景图片是否跟随元素移动
    • 属性值:
      • scoll 默认值,背景图片会随元素移动
      • fixed 背景会固定在页面