理解css | 青训营笔记

sckd717
114 阅读12分钟

理解css

  • 学习css的意义

CSS（层叠样式表）是一种用于描述网页样式和布局的语言。它可以控制网页中的字体、颜色、大小、布局、动画等各种视觉效果。学习CSS可以让你更好地掌握网页设计和开发技能，让你的网页更加美观、易读、易用。具体来说，学习CSS的好处包括：

  1. 提高网页的可读性和可访问性：CSS可以让网页的排版更加清晰、易读，同时也可以让网页更易于访问，包括视觉障碍人士。
  2. 简化网页的维护：CSS可以将网页的样式和内容分离，这样可以更方便地修改网页的样式，而不需要改动网页的内容。
  3. 提高网页的性能：CSS可以减少网页的加载时间，因为它可以将网页的样式和布局信息缓存到用户的浏览器中，从而提高网页的加载速度。
  4. 实现丰富的交互效果：CSS可以实现各种动画效果、悬停效果、响应式设计等，从而提高网页的用户体验。
  • css简要发展史

image.png

1. 基础知识

CSS是一种层叠样式表语言，用于描述网页的样式和布局。

1.1 层叠及优先级
image.png image.png

image.png

1.2 选择器及优先级

CSS选择器有：

  1. 标签选择器：通过标签名称选取元素，如div、p等。例如：p {color: red;}，表示选择所有的p元素，并将它们的文字颜色设置为红色。
  2. 类选择器：通过类名选取元素，如.class。例如：.highlight {background-color: yellow;}，表示选择所有拥有highlight类名的元素，并将它们的背景颜色设置为黄色。
  3. ID选择器：通过元素的ID属性选取元素，如#id。例如：#logo {width: 100px;}，表示选择ID为logo的元素，并将它的宽度设置为100像素。
  4. 属性选择器：通过元素的属性选取元素，如[attribute=value]。例如：input[type="text"] {border: 1px solid gray;}，表示选择所有type属性为text的input元素，并将它们的边框设置为1像素灰色实线。
  5. 伪类选择器：用于选择元素的特定状态，如:hover、:active等。例如：a:hover {text-decoration: underline;}，表示选择所有鼠标悬停在链接上的a元素，并将它们的下划线样式设置为实线。
  6. 后代选择器：通过元素的后代关系选取元素，如div p。例如：div p {font-size: 16px;}，表示选择所有在div元素内的p元素，并将它们的字体大小设置为16像素。
  7. 相邻兄弟选择器：选择紧接在另一个元素后面的元素，如div + p。例如：h2 + p {font-style: italic;}，表示选择紧接在h2元素后面的p元素，并将它们的字体样式设置为斜体。
  8. 通用选择器：选取所有元素，如*。例如：* {margin: 0; padding: 0;}，表示选择所有元素，并将它们的外边距和内边距都设置为0。
image.png image.png
1.3 继承

image.png

1.4 单位及值

image.png

1.5 盒子模型

image.png

CSS盒子模型是CSS布局的基础，它定义了每个HTML元素所占用的空间（包括内容、内边距、边框和外边距）。CSS盒子模型包括以下四个部分：

  1. 内容区域（Content）：包含元素的实际内容，如文本、图像等。
  2. 内边距区域（Padding）：位于内容区域和边框之间，用于控制内容与边框之间的距离。
  3. 边框区域（Border）：围绕内容区域和内边距区域，用于控制元素的边框样式、宽度和颜色。
  4. 外边距区域（Margin）：位于边框区域和相邻元素之间，用于控制元素与相邻元素之间的距离。

例如，下面的代码定义了一个具有10像素的内边距、5像素的边框和15像素的外边距的div元素：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}

在这个例子中，div元素的总宽度为240像素（200px的宽度 + 10px的左内边距 + 10px的右内边距 + 5px的左边框 + 5px的右边框 + 15px的左外边距 + 15px的右外边距），总高度为130像素（100px的高度 + 10px的上内边距 + 10px的下内边距 + 5px的上边框 + 5px的下边框 + 15px的上外边距 + 15px的下外边距）。

通过理解CSS盒子模型，我们可以更好地控制元素的布局和样式，从而实现更好的页面设计。

image.png

2. 布局和定位

2.1 常规布局
image.png image.png
2.2 内联级格式上下文

内联级格式上下文（Inline-level Formatting Context）是CSS中的一种布局模式，它是用于控制内联元素（如文本、图片、链接等）的排列和布局的一种机制。在内联级格式上下文中，元素按照其在文档流中出现的顺序，从左到右依次排列，直到一行排满，然后自动换行继续排列。

内联级格式上下文中的元素具有以下特点：

  1. 元素在水平方向上依次排列，直到一行排满，然后自动换行。
  2. 元素的高度由其内容决定，无法通过设置高度来改变。
  3. 元素的宽度由其内容和内边距决定，无法通过设置宽度来改变。
  4. 内联元素可以设置外边距和内边距，但是不会影响到其他元素的位置。
  5. 内联元素之间的空白符（如空格、换行符）会被解析为一个空格，并且会影响到元素之间的间距。
  6. 内联元素可以设置行高，用于控制行间距和文本对齐。
2.3 弹性盒子布局
image.png
2.4 定位

CSS中的定位（Positioning）指的是通过设置元素的位置属性来控制元素在文档流中的位置。CSS中有以下四种定位方式：

  1. 静态定位（Static Positioning）：元素的默认定位方式，即元素按照其在HTML文档中出现的顺序在文档流中排列。静态定位的元素无法通过设置位置属性来改变其位置。
  2. 相对定位（Relative Positioning）：通过设置position: relative来实现。相对定位的元素相对于其在文档流中的原始位置进行定位，可以通过设置top、bottom、left、right属性来改变其位置。相对定位的元素仍然占据其在文档流中的位置，但是它的位置会对后续元素产生影响。
  3. 绝对定位（Absolute Positioning）：通过设置position: absolute来实现。绝对定位的元素相对于其最近的具有定位属性（即position属性值不为static）的父元素进行定位，如果没有找到这样的父元素，则相对于文档的根元素进行定位。绝对定位的元素不再占据原来在文档流中的位置，而是脱离文档流，不会对其他元素的位置产生影响。
  4. 固定定位（Fixed Positioning）：通过设置position: fixed来实现。固定定位的元素相对于浏览器窗口进行定位，不随页面滚动而移动。固定定位的元素也是脱离文档流，不会对其他元素的位置产生影响。

image.png

3. 层叠上下文

层叠上下文（Stacking Context）是CSS中一个重要的概念，用于描述元素在Z轴方向上的堆叠顺序。当多个元素重叠时，层叠上下文可以决定哪个元素在上面，哪个元素在下面。在CSS中，每个元素都可以形成一个层叠上下文。

层叠上下文的产生有以下几种情况：

  1. 根元素（HTML元素）。
  2. 设置了position属性值为absolute或fixed的元素。
  3. 设置了display属性值为flex或grid的元素。
  4. 设置了opacity属性值不为1的元素。
  5. 设置了transform属性值不为none的元素。
  6. 设置了mix-blend-mode属性值不为normal的元素。
  7. 设置了filter属性值不为none的元素。
  8. 具有z-index属性的元素（但是需要注意，只有处于同一个层叠上下文中的元素才会相互影响）。

层叠上下文中的元素会按照其z-index值的大小进行堆叠，z-index值越大的元素会在上面。如果两个元素的z-index值相同，那么它们的堆叠顺序将按照它们在HTML文档中出现的顺序进行。

在层叠上下文中，元素的背景、边框和内容都是相对于元素本身进行绘制的，不会影响到其他元素。只有元素的阴影会影响到其他元素。

image.png

image.png

4. 变形、过渡、动画

4.1 transform

在CSS中，transform属性可以用来对元素进行变形。通过transform属性，我们可以实现2D和3D的变形效果。

2D变形：

  1. translate()：移动元素的位置，接受两个参数，表示元素在X和Y轴上的位移。
  2. rotate()：旋转元素，接受一个参数，表示元素旋转的角度。
  3. scale()：缩放元素的大小，接受一个参数，表示元素在X和Y轴上的缩放比例。
  4. skew()：斜切元素，接受两个参数，表示元素在X和Y轴上的斜切角度。
image.png

3D变形：

  1. translate3d()：移动元素的位置，接受三个参数，表示元素在X、Y和Z轴上的位移。
  2. rotate3d()：旋转元素，接受四个参数，表示元素绕任意轴旋转的角度。
  3. scale3d()：缩放元素的大小，接受三个参数，表示元素在X、Y和Z轴上的缩放比例。
  4. perspective()：定义元素的透视效果，接受一个参数，表示元素与视点的距离。

通过这些变形函数，我们可以实现非常丰富的变形效果。例如，可以通过rotate()函数将一个元素旋转90度，实现翻转的效果；可以通过scale()函数将一个元素在X轴上缩小一半，在Y轴上放大一倍，实现扭曲的效果；可以通过translate3d()函数将一个元素在Z轴上移动一定距离，实现3D立体效果。

需要注意的是，变形函数对元素的位置、大小、形状等进行的变形不会影响到文档流中其他元素的位置和大小，只会对元素自身进行变形。同时，变形函数的执行顺序也会影响到最终的变形效果，需要注意函数的调用顺序。

image.png

image.png

4.2 animation 动画

image.png

4.3 性能相关

image.png

5. 响应式设计

在CSS中，响应式设计是指通过CSS媒体查询和其他技术，使得网站能够在不同的设备和屏幕尺寸下呈现出最佳的视觉和用户体验。

以下是一些CSS中响应式设计的原则：

  1. 流式布局：使用百分比和em等相对单位来设置元素的宽度和高度，使得页面可以根据浏览器窗口大小的变化而自动调整布局。
  2. 弹性盒子布局：使用display: flex属性来设置弹性盒子布局，使得页面可以根据不同的设备和屏幕尺寸自动调整布局。
  3. 媒体查询：使用@media规则来设置不同屏幕尺寸下的样式，使得页面可以根据不同设备和屏幕尺寸呈现出最佳的视觉效果。
  4. 图片和媒体资源的响应式处理：使用srcset和sizes属性来设置不同屏幕尺寸下的图片和媒体资源，使得页面可以根据不同设备和屏幕尺寸加载适当大小的图片和媒体资源，提高网站的性能和用户体验。
  5. 字体的响应式处理：使用@font-face规则和相对单位来设置字体大小和行高，使得页面可以根据不同设备和屏幕尺寸呈现出最佳的阅读体验。
  6. 样式的优化：使用CSS预处理器和优化工具等技术来压缩CSS代码，减少文件大小，提高页面的加载速度和性能。

通过响应式设计，可以使得网站在不同设备和屏幕尺寸下呈现出最佳的视觉和用户体验，提高网站的可用性和可访问性，同时也可以提高网站的搜索引擎优化效果。

5.1 媒体查询
image.png image.png
5.2 设备像素
image.png image.png
5.3 css像素
image.png image.png

6. css生态相关

CSS生态是指与CSS相关的各种技术、框架、工具和社区，包括以下几个方面：

  1. CSS预处理器：CSS预处理器是指将CSS进行扩展和增强的工具，包括Sass、Less和Stylus等。它们可以使用变量、函数、嵌套、混合等功能，提高CSS的可维护性和可读性，同时也可以提高开发效率。
  2. CSS框架：CSS框架是指提供了一套CSS样式和组件的库，包括Bootstrap、Materialize和Foundation等。它们可以快速搭建网站和应用，提高开发效率和用户体验。
  3. CSS模块化：CSS模块化是指将CSS样式拆分成多个模块，以便于管理和维护。它们可以使用BEM、OOCSS和SMACSS等方法来实现，提高CSS的可读性和可维护性。
  4. CSS后处理器：CSS后处理器是指在CSS输出后对其进行处理的工具，包括PostCSS和Autoprefixer等。它们可以自动添加浏览器前缀、压缩CSS代码、优化CSS性能等，提高网站的性能和用户体验。
  5. CSS工具：CSS工具是指与CSS相关的各种工具，包括CSSLint、CSScomb和Stylelint等。它们可以帮助开发者检查CSS代码的质量、格式和风格，提高CSS的可维护性和可读性。
  6. CSS社区：CSS社区是指与CSS相关的各种社区和博客，包括CSS-Tricks、Codrops和Smashing Magazine等。它们可以提供各种CSS技术和最佳实践的分享和交流，帮助开发者学习和提高CSS的技能和水平。

image.png

avatar
文章
阅读
粉丝