CSS深入浅出 青训营打卡day4 | 豆包MarsCode AI刷题

图图学前端
90 阅读5分钟

CSS深入浅出 青训营打卡day5

CSS是什么

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页外观的标记语言。通过CSS，我们可以设置文本样式、布局、颜色、背景等，使网页更加美观和易用。

CSS语法

CSS 规则由两部分组成：选择器和声明块。

选择器 {
    属性: 值;
}

常见的选择器

选择器用于指定要应用样式的HTML元素。常见的选择器类型包括：

  • 元素选择器：选择特定类型的HTML元素。

    p {
    color: blue;
}

  • 类选择器：选择具有特定类名的元素。

    .highlight {
    background-color: yellow;
}

  • ID选择器：选择具有特定ID的元素。

    #header {
    font-size: 24px;
}

  • 属性选择器：选择具有特定属性的元素。

    input[type="text"] {
    border: 1px solid black;
}

  • 组合选择器：可以组合多种选择器来选择更具体的元素。

    div p {
    color: green;
}

3. 伪类选择器

伪类选择器用于选择处于特定状态的元素。

  • :hover：鼠标悬停时的状态。

    css
浅色版本
a:hover {
    color: red;
}

  • :active：元素被激活时的状态（通常指点击时）。

    css
浅色版本
a:active {
    color: orange;
}

  • :focus：元素获得焦点时的状态（通常指输入框被选中时）。

    css
浅色版本
input:focus {
    outline: 2px solid blue;
}

  • :first-child：选择作为其父元素的第一个子元素的元素。

    css
浅色版本
li:first-child {
    font-weight: bold;
}

  • :last-child：选择作为其父元素的最后一个子元素的元素。

    css
浅色版本
li:last-child {
    color: gray;
}

  • :nth-child(n) ：选择作为其父元素的第n个子元素的元素。

    css
浅色版本
li:nth-child(2) {
    color: purple;
}

4. 伪元素选择器

伪元素选择器用于选择元素的特定部分。

  • ::before：在元素内容前插入内容。

    p::before {
    content: "注意：";
    color: red;
}

  • ::after：在元素内容后插入内容。

    p::after {
    content: "结束";
    color: blue;
}

  • ::first-letter：选择元素的第一个字母。

    p::first-letter {
    font-size: 2em;
    color: green;
}

  • ::first-line：选择元素的第一行。

    p::first-line {
    font-weight: bold;
}

布局

盒子模型

每个HTML元素都可以看作一个矩形盒子，包括内容区、内边距、边框和外边距。

  • 内容区：实际内容占据的空间。
  • 内边距（padding）：内容与边框之间的距离。
  • 边框（border）：围绕内容和内边距的线条。
  • 外边距（margin）：元素与其他元素之间的距离。

image.png

image.png

flex box 和 grid 布局

Flexbox（弹性布局）

1. 基本概念

Flexbox 是一种一维布局模式，主要用于单行或多行的布局。它允许你轻松地对齐和分配空间给子元素，使得布局更加灵活和响应式。

2. 主要属性

  • 容器属性：

    • display: flex;：将容器设置为弹性容器。

    • flex-direction：定义主轴的方向（默认值为 row）。

      • row：从左到右（默认值）
      • row-reverse：从右到左
      • column：从上到下
      • column-reverse：从下到上

    • justify-content：定义主轴上的对齐方式。

      • flex-start：默认值，项目位于容器的开始位置
      • flex-end：项目位于容器的结束位置
      • center：项目位于容器的中心
      • space-between：项目之间等间距分布
      • space-around：项目之间及与容器边缘等间距分布

    • align-items：定义交叉轴上的对齐方式。

      • stretch：默认值，项目拉伸以填满容器
      • flex-start：项目位于容器的开始位置
      • flex-end：项目位于容器的结束位置
      • center：项目位于容器的中心
      • baseline：项目基线对齐

    • align-content：定义多根轴线的对齐方式（仅在多行时有效）。

      • stretch：默认值，轴线拉伸以填满容器
      • flex-start：轴线位于容器的开始位置
      • flex-end：轴线位于容器的结束位置
      • center：轴线位于容器的中心
      • space-between：轴线之间等间距分布
      • space-around：轴线之间及与容器边缘等间距分布

  • 项目属性：

    • flex-grow：定义项目的放大比例（默认值为 0）。
    • flex-shrink：定义项目的缩小比例（默认值为 1）。
    • flex-basis：定义项目在主轴上的初始大小（默认值为 auto）。
    • flex：flex-grow、flex-shrink 和 flex-basis 的简写形式。
    • align-self：定义单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置。

Grid（网格布局）

1. 基本概念

Grid 是一种二维布局模式，适用于复杂的布局设计。它允许你定义行和列，并精确控制子元素的位置。

2. 主要属性

  • 容器属性：

    • display: grid;：将容器设置为网格容器。
    • grid-template-columns：定义列的宽度。
    • grid-template-rows：定义行的高度。
    • grid-template-areas：定义网格区域的名称，方便布局。
    • grid-gap 或 gap：定义行和列之间的间距。
    • justify-items：定义所有项目的水平对齐方式。
    • align-items：定义所有项目的垂直对齐方式。
    • justify-content：定义整个网格在容器中的水平对齐方式。
    • align-content：定义整个网格在容器中的垂直对齐方式。

  • 项目属性：

    • grid-column：定义项目在列中的起始和结束位置。
    • grid-row：定义项目在行中的起始和结束位置。
    • grid-area：定义项目在网格中的区域，可以使用 grid-template-areas 中定义的名称。

image.png

image.png

position

position 属性用于指定元素的定位方式。常见的定位类型有：

  • static：默认值，元素按照正常文档流排列，不受 top、bottom、left 和 right 属性的影响。
  • relative：相对定位，元素相对于其正常位置进行偏移。
  • absolute：绝对定位，元素相对于最近的非 static 定位的祖先元素进行偏移。
  • fixed：固定定位，元素相对于浏览器窗口进行偏移，不随滚动条滚动。
  • sticky：粘性定位，结合了相对定位和固定定位的特点，当滚动到指定位置时变为固定定位

image.png

写在最后 学习css的建议

image.png

avatar
文章
阅读
粉丝