“CSS” 之 背景与元素显示

CSS-- 背景与元素显示模式

前言：学习CSS中的背景元素与显示模式，可以帮助我们
理解网页结构和样式、解决兼容性问题、提高页面性能和用户体验、开发响应式布局，来提高网页设计和开发的质量和效率。

一、背景

1.背景颜色

• 属性名：background-color
• 属性值：
  • 颜色取值：关键字、rgb表示法、ragba表示法、十六进制……
• 注意：
• 背景颜色默认是透明：rgba(0，0，0，0)
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

示例图：

2.背景图片

• 属性名：background-image
• 属性值：background-image：url(“图片的路径”);
• 注意：
  • 背景图片中url中可以省略引号
  • 背景图片默认是在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

示例图：

3.背景平铺

• 属性名：background-repeat
• 属性值：
  • repeat：水平和垂直方向都平铺（默认值）
  • no-repeat：不平铺
  • repeat-x：沿水平方向平铺
  • repeat-y：沿垂直方向平铺

示例图：

4.背景位置

• background-position
• 属性值：background-position：水平方向位置，垂直方向位置；
  • 方位名词：
    • 水平方向
      • left
      • center
      • right
    • 垂直方向
      • top
      • center
      • bottom
  • 数字+px（坐标）
    • 坐标系
      • 原点(0,0)
      • x轴
      • y轴
• 注意：
  • 方位名词取值和坐标取值可以混合使用，第一个取值表示水平方向，第二个取值表示垂直方向

示例图：

5.background连写形式

• 属性名：background
• 形式：
  • 如：background：color image repeat position
• 注意：
  • 如果需要设置单独的样式和连写
    • 要么把单独的样式写在连写的下面
    • 要么把单独的样式写在连写的里面

示例图：

二、元素显示模式

1.块级元素

• 显示特点：
  • 独占一行（一行只能显示一个）
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 可以设置宽高
• 代表标签：
  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav……

2.行内元素

• 显示特点：
  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高
• 代表标签
  • a、span、b、i、s、strong、ins、em、del……
• 注意
  • margin 和 padding 对行内标签的垂直位置不生效
    • 解决方案：使用 line-height 改变标签的垂直位置

3.行内块元素

• 显示特点：
  • 一行可以显示多个
  • 可以设置宽高
• 代表标签
  • input、textarea、button、select……
  • 特殊情况：Img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

• 目的：改变元素默认的显示模式，让元素符合布局要求
• 语法：
  • display：block
    • 作用：转换成块级元素
  • display：inline-block
    • 作用：转换成内块元素
  • display：inline
    • 转换成行内元素

5.拓展

• 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素……
  • 但是p标签中不要嵌套div、p、h等块级元素
• a标签内部可以嵌套任意元素
  • 但是a标签不能嵌套a标签