深入了解CSS | 豆包MarsCode AI刷题

宁可单身十年也要拿下offer
63 阅读2分钟
  • 前言：CSS（Cascading Style Sheets，层叠样式表）是Web开发中不可或缺的一部分，它负责美化HTML页面，使内容更加生动和吸引人。随着Web技术的发展，CSS也经历了多次迭代，引入了许多新的特性和最佳实践。本文是总结青训营课程《深入CSS》的部分CSS有关知识点，帮助自己牢记各种样式属性和语法。
  • 深入CSS

    • 基本概念

      • 什么是CSS？CSS是一种用于描述HTML或XML（包括SVG、XHTML等）文档外观的样式表语言。它通过控制文档元素的布局、颜色、字体等属性，实现了内容与表现的分离，提高了Web页面的可维护性和用户体验。

    • CSS的基本构成：

      image.png

    • CSS选择器

      • 基本选择器
        1. 元素选择器
        2. id选择器
        3. 类名选择器
      • 高级选择器
        1. 属性选择器
        2. 伪类选择器
        3. 伪元素选择器
      • 对我个人来说比较习惯使用类名选择器

    • CSS盒模型

      • CSS盒模型是理解元素布局的基础。每个元素都可以视为一个矩形盒子，由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。

        image.png

    • 布局技术

      • Flex布局：Flexbox（弹性盒布局）提供了一种更加灵活的方式来布局元素。它允许子元素在主轴和交叉轴上自动调整大小，以适应容器的大小。

        image.png

      • 浮动布局：早期常用的布局方式，通过 float 属性可以让元素向左或向右移动，直到碰到包含块的边界或其他浮动元素。

        image.png

      • 定位布局：主要分为absolute、relative、fixed三种。

        image.png

    • 引入方式

      • 内部样式：写到 html 页面内部。是将所有的CSS代码抽取出来，单独放到一个 <style>标签中。

        • 代码结构清晰，但是并没有实现结构与样式完全分离。
        • 这种方式方便控制当前整个页面中的元素样式设置。

      • 外部样式：样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用。

        image.png

        • 通常也被称为外部链式或链接式引入，这种方式是开发中常用的方式

      • 行内样式：在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

        image.png

        • style 其实就是标签的属性。
        • 由于书写繁琐，并且没有体现出结构和样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

    • 6

  • 总结：
avatar
文章
阅读
粉丝