学习css | 青训营

用户8077574007596
104 阅读2分钟

CSS的解释

层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 是开放网络的核心语言之一，由 W3C规范实现跨浏览器的标准化。

选择器的特异度(特异度越高，优先级越高)

  1. 内联样式：在HTML元素的style属性中直接指定的样式，特异度最高。
  2. ID选择器：通过ID选择器选择的元素，特异度较高。
  3. 类选择器、属性选择器和伪类选择器：通过类选择器（例如 .classname）、属性选择器（例如 type="text"）或伪类选择器（例如 :hover）选择的元素，特异度较低。
  4. 元素选择器和伪元素选择器：通过元素选择器（例如 p、div）或伪元素选择器（例如 ::before）选择的元素，特异度最低。

注意：在特异度计算中，每个部分的权重相加，会产生一个特异度值。特异度值越高则优先级越高、

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

显示继承

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}

初始值

  • CSS中，每个属性都有一个初始值
  • background-color的初始值为transparer
  • margin-left 的初始值为0 -可以使用initial关键字显式重置为初始值
  • background-color: initial

CSS求值过程

  • 收集样式规则：浏览器将外部和内部样式规则收集起来，形成样式规则表。
  • 选择匹配元素：浏览器根据CSS选择器匹配HTML元素。
  • 计算特异度：对于匹配多个规则的元素，计算每个规则的特异度，以确定应用哪个样式。
  • 应用样式：将确定的样式规则应用到元素。
  • 继承：支持继承的样式属性会从父元素传递给子元素。
  • 渲染：根据元素的样式计算布局和外观，并在浏览器窗口中渲染显示文档。

布局相关技术

image.png

image.png

width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其它属性确定
  • 百分数相对于容器的content box 宽度

height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box 高度
  • 容器有指定的高度时，百分数才生效

image.png

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

image.png

border

  • 指定容器边框样式、粗细和颜色

image.png

margin

  • 指定元素四个方向的外边距
  • 取值为长度、百分数、auto
  • 百分数相当于容器的宽度
avatar
文章
阅读
粉丝