理解CSS-1 | 青训营笔记

100 阅读3分钟

CSS知识总结

CSS(Cascade Style Sheets)是一种用于描述网页样式的语言。它可以控制网页中的文本、图片、布局等方面的表现效果。以下是CSS的基本知识。

1. 基础知识

级联规则

在CSS中,会定义多个样式来确保用户代理能够为每个要显示的元素选择正确的样式。如果多个样式都应用于一个元素,那么样式将根据其重要性和特定性进行级联。这意味着,通过定义不同的样式表,可以先定义基础样式,然后根据需要进行扩展,使得样式更灵活和易于维护。

选择器

选择器用于指定那些元素会被应用到某个规则。CSS选择器有很多种类型。例如:

  • 标签选择器:根据HTML标签名(如p、div、ul等)来选择元素。
  • 类选择器:根据class属性值(例如.class)来选择元素。
  • ID选择器:根据id属性值(例如#id)来选择元素。

还有其他选择器如属性选择器、伪类选择器和伪元素选择器。

继承

当一个元素没有指定某些属性时,会从父元素继承该属性。这使得样式从一个元素向下传输,从而减少了样式表的大小,简化了文档的维护和开发。

值和单位

CSS中有很多不同类型的值和单位。例如,长度值可以使用像素(px)、百分比(%)或em等单位。颜色值可以使用十六进制、RGB、RGBA等格式。

盒子模型

CSS中的每个元素都是一个盒子,该盒子由内容区域、内边距、边框、外边距四个部分组成。盒子模型被用于确定元素的宽度和高度。

2. 布局和定位

定位

CSS包括不同的定位属性。这些属性控制元素在页面中的位置。例如,相对定位会相对于元素的原始位置进行移动,而绝对定位则会根据其祖先元素进行定位。

弹性布局

弹性布局是一种基于Flexbox模型的布局方式。它使得元素可以通过沿主轴(main axis)和侧轴(cross axis)按比例进行缩放,使得元素的大小和位置更具灵活性。

网格布局

CSS网格布局是一种二维布局系统,可以在页面上创建网格来定位和排列内容。通过指定行和列,可以让元素跨越多个单元格,实现复杂的布局。

3. 层叠上下文 (The Stacking Context)

层叠上下文是一种概念,指定了元素如何在Z轴上组成一个堆栈。这可以影响元素的显示顺序和交互行为。例如,使用z-index属性可以控制元素在屏幕上的垂直位置。

对于开发人员来说,理解层叠上下文及其实现方式对于解决元素位置的问题非常重要。一些常见的实现层叠上下文的方式包括:

  • Position属性:定位元素会创建一个层叠上下文
  • z-index属性:较高的z-index值意味着元素更接近用户代理的用户界面
  • Opacity属性:透明元素不会创建层叠上下文
  • Transform属性:具有三维转换效果的元素将创建一个新的层叠上下文