前端学习day06-CSS盒子模型-CSS设置背景

知识点

一.盒子模型

1.1. margin

• margin的设置问题

  • top/right/bottom/left

• margin和padding的选择

• margin的传递和折叠

  • 父子的传递
  • 兄弟的折叠

• margin进行水平居中

  • 0 auto

1.2. outline

• 外轮廓

a input{
    outline:none
}

1.3. box-shadow

• box-shadow:offset-x offset-y blur-radius spread-radius color

1.4. text-shadow

• text-shadow:offset-x offset-y blur color;

1.5. box-sizing

• center-box
• border-box(常用)

1.6. 注意事项

• with/heght/margiin-top/margin-bottom 对于行内非替换元素是无效的
• padding-top/bottom,border-top/bottom 对于行内非替换元素是无效的

1.7. 水平居中

• 行内级元素

  • text-align:center

• 块级元素:有宽度

  • margin:0 auto

二.案例练习

2.1. 京东小按钮

2.2. 小米商品

2.3. B站视频展示

三.背景设置

3.1. background-image

• background-image用于设置元素的背景图片

  • 会盖在(不是覆盖)background-color的上面

• 如果设置了多张图片;设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

• 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

3.2. background-repeat

• background-repeat用于设置背景图片是否要平铺
• 值:
  • repeat：平铺
  • no-repeat：不平铺
  • repeat-x：只在水平方向平铺
  • repeat-y：只在垂直平方向平铺

3.3. background-size

• background-size用于设置背景图片的大小
• 值:
  • auto：默认值, 以背景图本身大小显示
  • cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
  • contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
  • ：百分比，相对于背景区（background positioning area）
  • length：具体的大小，比如100px

3.4. background-position

• background-position用于设置背景图片在水平、垂直方向上的具体位置
• 值:
  • 可以设置具体的数值 比如 20px 30px;
  • 水平方向还可以设值：left、center、right
  • 垂直方向还可以设值：top、center、bottom
  • 如果只设置了1个方向，另一个方向默认是center

3.5. background-attachement

• background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
• 值:
  • scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
  • local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
  • fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

3.6. backgrund

3.7. background-image和img的区别和选择

• img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
• background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息