css3：相对定位详解 | 零基础学HTML（二十二）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

• css3新增背景属性
  • 背景缩放background-size可以设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛
  • 多背景
    • css3中规定，一个盒子上，可以添加多个背景图片。background-image的属性值书写时，以逗号分隔多背景的URL路径地址
• 定位position

  • 属性值：relative（相对定位） absolute（绝对定位） fixed（固定定位）

  • 偏移量属性：属性名：水平方向：left、right；垂直方向：top、bottom。属性值：px为单位的数值

  • relative（相对定位）

    • 参考元素：标签加载的原始位置；必须搭配偏移量属性才会发生位置移动

    • 性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置；元素显示效果上，原位留坑，形影分离

    • 注意事项：① 偏移量属性的值区分正负：正数表示偏移方向与属性名方向相反；负数表示偏移方向与属性名方向相同 ② 同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了left和right属性，只会加载left属性，垂直方向同理只会加载top属性

      ③ 由于相对定位的参考元素是自身，left的正值等价于right的负值，top的正值等价于bottom的负值

    • 实际应用：由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况；相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调