前端基础6：背景常用属性和定位以及BFC

背景常用属性

• background-color：背景颜色

  • 属性值有三种书写方式：
    • 1.关键字法（不常用）
    • 2.十六进制法
    • 3.RGB（0~255，0~255，0~255）

• background-image :背景图片

  • 语法：background-image : url（“图片路径”）
  • 特点：铺满内容区，x轴和y轴进行重复平铺

• background-repeat:背景重复 |属性值|描述| |--|--| |repeat|默认，背景在水平和垂直方向平铺| |repeat-x|背景在水平方向平铺| |repeat-y|背景在垂直方向平铺| |no-repeat|不平埔，只显示一张背景|

• background-position： 背景定位

  • 语法：background-position：x y;
  • 数值表示方式：
    • 1.可以为具体数值
    • 2.可以为关键字：top，left，right，bottom
    • 3. 可以设置为百分比
  • 当只设置一个值时，第二个值默认为center

• background-attachment：背景关联

  • 设置背景图像是否固定或者随着页面其余部分滚动 |属性值|描述| |--|--| |scroll|默认，背景属性随着页面其余部分滚动| |fixed|背景图像固定|

• background复合属性

  • 语法：background：color imge position repeat attachment

            background: pink url("img/logo.png") center center no-repeat fixed;
            /*背景颜色 背景图片 位置 背景重复 背景关联*/

-background-size：背景颜色大小 - 属性值可以为： - 具体的数值 当只设置一个值时：表示宽度，高度自适应（保持宽高比例进行缩放） - 百分比（相对容器） - auto 默认值 背景图片的真实大小 - cover 将背景图像等比缩放到完全覆盖容器，背景图像可能超出容器，被裁切 - contain 将图像进行等比缩放，背景图像始终被包含在容器中

网页常用的排版（布局方式）

• 常规流
  • 块级元素独占一行，由上到下排布
  • 行内元素从左到右排布
• 浮动
  • 当对元素进行左浮动后，元素是从左向右排布的。设置又浮动同理。
  • 设置完浮动后需要在最后一个浮动元素的后面清除浮动
    • 利用伪元素的方式清除浮动clear：both
• 定位 poison
  • relative相对定位
    • 不脱离文档流，不会影响后面元素的排布
    • 参照物是它本身
    • 当同时设置top和bottom时听top的
    • 当同时设置right和left时听left的
    • 任何元素都可以设置相对定位属性
• absolute绝对定位
  • 脱离文档流
  • 当父级元素都没有定位特性时，他是以浏览器为参照物的。
  • 可以手动设置参照物，参照物必须是它的父辈。
  • 当同时设置top和bottom时听top的
  • 当同时设置right和left时听left的
• fixed固定定位

  • 脱离文档流

  • 参照物是浏览器可视窗口

  • 任何元素都可以设置固定定位

  • 值可以为left/top/bottom/right的值可以为具体值，也可以为百分数

  • z-index控制定位元素的层级

    • 值越大，层级越高，当不设置z-index时，在后面的层级高
    • fixed - 当出现两个fixed元素时，想改变层级需对两个元素同时进行设置

BFC（块级格式化上下文）

• 可以形成封闭的区域，里面的内容不会影响到外面的元素。

如何触发BFC

默认情况（普通文档流下）叫FC

• HTML根元素是一个BFC
• float值为left或者right时可以触发BFC
• overflow值为hidden时可以触发BFC
• display为inline-block时可以触发BFC
• position值为absolute或者fixed时可以触发BFC

BFC布局规则

• 计算BFC高度时，浮动高度也参与计算