天梦u
天梦u

CSS背景，元素显示模式，盒模型

文章目录

  • 颜色取值
  • 选择器进阶
    • 复合选择器
      • 后代选择器：空格
      • 子代选择器
    • 并集选择器（union selector）
    • 交集选择器（intersection selector）
    • emmet语法
    • hover伪类选择器
  • 背景相关
    • 背景颜色
    • 背景图片
    • 背景平铺
    • 图片位置
    • 背景相关连写
    • img标签与背景图片的区别
  • 元素显示模式
    • 块级元素
    • 行内元素
    • 行内块元素
    • 元素显示模式转换
  • 居中方法总结
  • CSS三大特性
  • 权重叠加计算
  • 盒子模型
    • border 相关属性
    • padding
    • 盒子实际大小计算公式
    • 新浪导航案例
    • CSS3盒模型（自动内减）——怪异盒模型
    • margin
      • 清除内外边距
      • 外边距的折叠现象
      • 行内元素的margin和padding无效情况

颜色取值

属性名

  • 文字颜色：color
  • 背景颜色：background-color

属性值

  • 关键词
    • 预定义的颜色名
      • red、green、yellow
  • rgb表示法
    • 红绿蓝三原色。每项取值范围：0-255
      • rgb(0,0,0)、rgb(255,255,255)
  • rgba表示法
    • 红绿蓝三原色+a表示透明度，取值范围是0-1（0表示完全透明，1表示完全不透明）
      • rgb(255,255,255,0.5) 简写rgb(255,255,255,.5)
  • 十六进制表示法
    • #开头，将数字转换成十六进制表示
      • #000000、#ff0000 简写#000、#f00

选择器进阶

复合选择器

后代选择器：空格

  • 作为：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

  • 选择器语法：选择器1 选择器2 {CSS}

  • 结果：

    • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置演示

  • 注意点：

    • 后代包括：儿子、孙子、重孙子…
    • 后代选择器中，选择器与选择器之间通过空格隔开

具体的说：后代选择器用于选择某个元素的所有后代元素（包括直接子元素和非直接子元素）。后代选择器使用空格（ ）来分隔祖先元素和后代元素。例如：

div p {
  color: red;
}

在这个例子中，所有

元素内部的

元素，无论是直接还是间接子元素，都将应用红色字体。

子代选择器

  • 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元

  • 选择器语法：选择器1 > 选择器2 { css }

  • 结果：

    • 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

  • 注意点：

    • 子代只包括：儿子
    • 子代选择器中，选择器与选择器之前通过 > 隔

具体的说：子代选择器只能选择某个元素的直接子元素。子代选择器使用大于号（>）来分隔父元素和子元素。例如：

div > p {
  color: blue;
}

在这个例子中，只有

元素的直接子元素

才会应用蓝色字体，而

的间接子元素（即

嵌套在其他元素内部的情况）将不会受到影响。

总结一下：

  • 后代选择器（descendant selector）是用空格（ ）分隔的，它选择指定元素的所有后代元素。
  • 子代选择器（child selector）是用大于号（>）分隔的，它仅选择指定元素的直接子元素。

并集选择器（union selector）

  • 作用：选择页面中同时满足多个选择器的标签

  • 选择器语法：选择器1，选择器2 { css }

  • 结果：

    • （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式

  • 注意点：

    1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
    2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面
h1, h2, p {
  color: green;
}

在这个例子中，我们选择了

、

和

元素，并将它们的字体颜色设置为绿色。并集选择器实际上表示“或”的关系，即选择器 A 或选择器 B 或选择器 C，等等。

交集选择器（intersection selector）

  • 作用：选中页面中 同时满足 多个选择器的标
  • 选择器语法：选择器1选择器2 { css }
  • 结果：
    • （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
  • 注意点：
    1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
    2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

具体的说：

交集选择器用于选择同时满足多个条件的元素。交集选择器通过将多个选择器紧密相连而不使用空格或其他符号来实现。例如：

p.highlight {
  color: orange;
}

在这个例子中，我们选择了同时具有

标签和highlight类的元素，并将它们的字体颜色设置为橙色。交集选择器实际上表示“且”的关系，即选择器 A 且选择器 B。

emmet语法

作用：通过简写语法，快速生成代码

  1. 标签名：直接输入标签名，如 div、p、ul 等。
  2. 类选择器：使用.表示类名。例如，.container 会生成
    。
  3. ID 选择器：使用#表示 ID。例如，#header 会生成 。
  4. 交集选择器：将标签名、类名和/或 ID 选择器紧密相连。例如，p.highlight 会生成

    。
  5. 子代选择器：使用>表示父子关系。例如，div>p 会生成：

  1. 内部文本：使用{}包裹文本。例如，p{Hello, world!} 会生成

    Hello, world!

    。

  2. 创建多个标签：使用*表示重复次数。例如，li*3 会生成：

  • 

  • 

  •

    hover伪类选择器

    :hover 伪类选择器是 CSS 中一种常用的伪类选择器，它用于选择鼠标悬停在元素上时的元素样式。当用户将鼠标悬停在元素上时，:hover 选择器会应用指定的样式，当鼠标离开时，样式恢复为原始状态。:hover 伪类选择器常用于为链接、按钮和其他交互元素添加悬停效果。

    以下是一个简单的使用 :hover 伪类选择器的例子：

    a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

    在这个例子中，我们为所有的 元素定义了默认样式（蓝色文本，无下划线）。当用户将鼠标悬停在 元素上时，文本颜色会变为红色，并显示下划线。当鼠标离开时，样式将恢复为原始状态。

    :hover 伪类选择器不仅可以应用于 元素，还可以应用于任何其他 HTML 元素，如

    、