MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS基础概念的深入理解：从语法到引入方式的全面解析

2022-06-046.0k 阅读

CSS基础概念的深入理解：从语法到引入方式的全面解析

CSS语法基础

  1. 选择器
    • 类型选择器：这是最基本的选择器类型，它根据元素的标签名来选择元素。例如，若想选择页面中所有的 <p> 元素，可以这样写：
p {
    color: red;
}

- **类选择器**：类选择器允许我们通过给元素添加 `class` 属性，然后使用 `.` 加上类名来选择这些元素。这在给一组元素应用相同样式时非常有用。比如，有多个需要应用相同样式的元素，我们可以给它们都添加 `class="highlight"`，然后使用以下 CSS 样式：

.highlight {
    background - color: yellow;
}

- **ID选择器**：ID选择器使用 `#` 加上元素的 `id` 属性值来选择特定的元素。一个页面中 `id` 值必须是唯一的，因此ID选择器通常用于选择单个特定元素。例如：

#unique - element {
    font - size: 20px;
}

- **属性选择器**：属性选择器允许根据元素的属性来选择元素。比如，我们想选择所有带有 `title` 属性的 `<a>` 元素，可以这样写：

a[title] {
    text - decoration: underline;
}

如果想选择 title 属性值为 “example” 的 <a> 元素，则是：

a[title="example"] {
    color: blue;
}
  1. 声明块 声明块包含一个或多个声明，每个声明由一个属性和一个值组成，中间用冒号 : 分隔，声明之间用分号 ; 隔开。例如：
body {
    background - color: lightblue;
    font - family: Arial, sans - serif;
}

这里，background - color 和 font - family 就是属性，lightblue 和 Arial, sans - serif 就是对应的值。

  1. 注释 CSS 中的注释用于对代码进行解释说明，不会影响页面的显示效果。注释分为单行注释和多行注释。
    • 单行注释：使用 /* 开始，*/ 结束。例如：
/* 这是一个单行注释，设置段落文本颜色为绿色 */
p {
    color: green;
}

- **多行注释**：同样以 `/*` 开始，`*/` 结束，可以跨越多行。比如：

/*
这是一个多行注释，
用于对一组样式进行详细说明。
设置页面主体背景色为灰色，
字体为宋体。
*/
body {
    background - color: gray;
    font - family: "宋体";
}

盒模型

  1. 内容区域（Content） 内容区域是元素中实际内容所在的区域，比如 <div> 中的文本、图像等。内容区域的大小由 width 和 height 属性控制（对于块级元素）。例如：
div {
    width: 200px;
    height: 100px;
}

这里设置了 <div> 元素内容区域的宽度为 200 像素，高度为 100 像素。

  1. 内边距（Padding） 内边距是内容区域与边框之间的空白区域。通过 padding 属性可以设置四个方向的内边距，也可以分别使用 padding - top、padding - right、padding - bottom 和 padding - left 来设置单个方向的内边距。例如：
div {
    padding: 10px; /* 四个方向内边距均为10px */
    padding - top: 20px; /* 顶部内边距为20px */
}
  1. 边框（Border） 边框位于内边距之外，可以通过 border 属性来设置边框的样式、宽度和颜色。也可以分别使用 border - style（样式）、border - width（宽度）和 border - color（颜色）来单独设置。例如：
div {
    border: 1px solid black; /* 1像素宽，实线，黑色边框 */
    border - style: dashed; /* 虚线边框 */
    border - width: 2px; /* 边框宽度为2px */
    border - color: red; /* 边框颜色为红色 */
}
  1. 外边距（Margin） 外边距是边框之外的空白区域，用于控制元素与其他元素之间的间距。和内边距类似，margin 属性可以设置四个方向的外边距，也有对应的单个方向设置属性，如 margin - top、margin - right、margin - bottom 和 margin - left。例如：
div {
    margin: 15px; /* 四个方向外边距均为15px */
    margin - bottom: 25px; /* 底部外边距为25px */
}
  1. 盒模型计算 盒模型的总宽度计算公式为：总宽度 = width + padding - left + padding - right + border - left - width + border - right - width + margin - left + margin - right。高度的计算同理。例如：
div {
    width: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 5px;
}

这个 <div> 元素的总宽度为：100 + 10 + 10 + 1 + 1 + 5 + 5 = 132px。

CSS定位

  1. 静态定位（Static） 静态定位是元素的默认定位方式，元素按照文档流的顺序依次排列。此时 top、right、bottom 和 left 属性对元素定位不起作用。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background - color: lightblue;
            position: static;
            top: 50px; /* 此设置无效 */
        }
    </style>
</head>

<body>
    <div>静态定位的div</div>
</body>

</html>
  1. 相对定位（Relative） 相对定位是相对于元素自身在文档流中的位置进行定位。通过 top、right、bottom 和 left 属性可以改变元素的位置，元素原本在文档流中的空间仍然保留。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background - color: lightgreen;
            position: relative;
            top: 20px;
            left: 30px;
        }
    </style>
</head>

<body>
    <div>相对定位的div</div>
</body>

</html>

这里的 <div> 元素相对于其原本在文档流中的位置向下移动了 20 像素，向右移动了 30 像素。

  1. 绝对定位（Absolute） 绝对定位是相对于离它最近的已定位祖先元素（即非静态定位的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是 <html> 元素）。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            position: relative;
        }

        div {
            width: 100px;
            height: 100px;
            background - color: orange;
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div>绝对定位的div</div>
</body>

</html>

在这个例子中，由于 <body> 设置了 position: relative，所以 <div> 相对于 <body> 进行定位，距离顶部 50 像素，距离左侧 100 像素。

  1. 固定定位（Fixed） 固定定位是相对于浏览器窗口进行定位，元素的位置不会随着页面滚动而改变。常用于创建固定在页面特定位置的导航栏、广告等。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        nav {
            width: 100%;
            background - color: #333;
            color: white;
            text - align: center;
            position: fixed;
            top: 0;
        }

        p {
            margin - top: 50px;
        }
    </style>
</head>

<body>
    <nav>固定导航栏</nav>
    <p>这里是一些文本内容，滚动页面时导航栏会固定在顶部。</p>
    <p>这里是一些文本内容，滚动页面时导航栏会固定在顶部。</p>
    <p>这里是一些文本内容，滚动页面时导航栏会固定在顶部。</p>
</body>

</html>

上述代码中，导航栏 nav 元素固定在页面顶部，不会随页面滚动而移动。

CSS布局

  1. 流式布局（Flow Layout） 流式布局是最基本的网页布局方式，元素按照文档流从左到右、从上到下依次排列。块级元素会独占一行，行内元素则会在一行内依次排列，直到该行排满。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            background - color: lightblue;
        }

        span {
            background - color: lightgreen;
        }
    </style>
</head>

<body>
    <div>这是一个块级元素div</div>
    <span>这是一个行内元素span</span>
    <span>这是另一个行内元素span</span>
</body>

</html>
  1. 浮动布局（Float Layout） 浮动布局通过 float 属性来实现，使元素脱离文档流并向左或向右浮动。常用于实现多列布局等。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .left {
            float: left;
            width: 30%;
            background - color: lightblue;
        }

        .right {
            float: right;
            width: 60%;
            background - color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="left">左侧浮动区域</div>
    <div class="right">右侧浮动区域</div>
</body>

</html>

在这个例子中，.left 类的元素向左浮动，.right 类的元素向右浮动，实现了简单的两列布局。但使用浮动布局时需要注意清除浮动，以避免父元素高度塌陷问题。可以使用以下几种方式清除浮动： - 使用空元素清除浮动：在浮动元素之后添加一个空的 <div> 元素，并设置其 clear: both。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .left {
            float: left;
            width: 30%;
            background - color: lightblue;
        }

        .right {
            float: right;
            width: 60%;
            background - color: lightgreen;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="left">左侧浮动区域</div>
    <div class="right">右侧浮动区域</div>
    <div class="clear"></div>
</body>

</html>

- **使用伪元素清除浮动**：利用 `:after` 伪元素，在父元素内部创建一个虚拟的块级元素，并设置 `clear: both`。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .parent {
            overflow: auto;
        }

        .parent:after {
            content: "";
            display: block;
            clear: both;
        }

        .left {
            float: left;
            width: 30%;
            background - color: lightblue;
        }

        .right {
            float: right;
            width: 60%;
            background - color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">左侧浮动区域</div>
        <div class="right">右侧浮动区域</div>
    </div>
</body>

</html>
  1. Flex布局（Flexbox Layout） Flex布局是一种现代的布局模式，通过 display: flex 将元素设置为弹性容器，其内部的子元素成为弹性项目。弹性容器可以轻松控制子元素的排列方向、对齐方式等。
    • 弹性容器属性：
      • flex - direction：设置弹性项目的排列方向，可选值有 row（从左到右，默认值）、row - reverse（从右到左）、column（从上到下）和 column - reverse（从下到上）。例如：
.container {
    display: flex;
    flex - direction: column;
}

    - **justify - content**：设置弹性项目在主轴上的对齐方式，可选值有 `flex - start`（左对齐或上对齐，默认值）、`flex - end`（右对齐或下对齐）、`center`（居中对齐）、`space - between`（两端对齐，项目之间间隔相等）和 `space - around`（项目两侧间隔相等，项目之间间隔是两侧间隔的两倍）。例如：

.container {
    display: flex;
    justify - content: center;
}

    - **align - items**：设置弹性项目在交叉轴上的对齐方式，可选值有 `flex - start`、`flex - end`、`center`、`baseline`（基线对齐）和 `stretch`（拉伸，默认值，当项目未设置高度或高度为 `auto` 时有效）。例如：

.container {
    display: flex;
    align - items: center;
}

- **弹性项目属性**：
    - **flex - grow**：定义弹性项目的放大比例，默认值为 0，即如果有剩余空间，也不放大。例如：

.item {
    flex - grow: 1;
}

    - **flex - shrink**：定义弹性项目的缩小比例，默认值为 1，即如果空间不足，该项目将缩小。例如：

.item {
    flex - shrink: 0;
}

    - **flex - basis**：定义在分配多余空间之前，弹性项目占据的主轴空间，默认值为 `auto`，即项目本身的大小。例如：

.item {
    flex - basis: 200px;
}

    - **flex**：是 `flex - grow`、`flex - shrink` 和 `flex - basis` 的简写。例如：

.item {
    flex: 1 0 200px;
}
  1. Grid布局（Grid Layout） Grid布局是一种二维的布局系统，通过将容器划分为行和列来创建网格，然后将项目放置在这些网格单元格中。
    • 网格容器属性：
      • display: grid：将元素设置为网格容器。
      • grid - template - columns：定义网格的列轨道，例如：
.container {
    display: grid;
    grid - template - columns: 1fr 2fr 1fr;
}

这里使用 fr 单位表示分数，上述代码创建了三列，第一列和第三列宽度相同，第二列宽度是它们的两倍。 - grid - template - rows：定义网格的行轨道，例如：

.container {
    display: grid;
    grid - template - rows: 100px 200px;
}

这定义了两行，第一行高度为 100 像素，第二行高度为 200 像素。 - grid - gap：设置网格行与行、列与列之间的间距，例如：

.container {
    display: grid;
    grid - gap: 10px;
}

- **网格项目属性**：
    - **grid - column - start**、**grid - column - end**、**grid - row - start**、**grid - row - end**：用于指定项目在网格中的位置。例如：

.item {
    grid - column - start: 2;
    grid - column - end: 4;
    grid - row - start: 1;
    grid - row - end: 3;
}

这将项目放置在从第二列开始，到第四列结束，从第一行开始，到第三行结束的网格区域内。 - grid - area：是上述四个属性的简写形式，同时也可以用于定义命名区域。例如：

.container {
    display: grid;
    grid - template - areas: "header header" "sidebar content" "footer footer";
}

.header {
    grid - area: header;
}

.sidebar {
    grid - area: sidebar;
}

.content {
    grid - area: content;
}

.footer {
    grid - area: footer;
}

CSS引入方式

  1. 内联样式（Inline Style） 内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。例如：
<p style="color: red; font - size: 16px;">这是一个带有内联样式的段落。</p>

内联样式的优点是简单直接，对单个元素应用样式非常方便。但缺点也很明显，它使 HTML 代码变得冗长，并且不利于样式的复用和维护，因为如果要修改样式，需要逐个修改每个元素的 style 属性。

  1. 内部样式表（Internal Style Sheet） 内部样式表是将 CSS 代码写在 HTML 文档的 <style> 标签内，通常放在 <head> 标签中。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            background - color: lightgray;
        }

        h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一段文本。</p>
</body>

</html>

内部样式表适用于单个 HTML 页面的样式设置，它将样式和结构部分分离，相较于内联样式更易于维护。但如果有多个页面需要相同的样式，仍然需要在每个页面重复编写相同的 CSS 代码。

  1. 外部样式表（External Style Sheet） 外部样式表是将 CSS 代码写在一个独立的 .css 文件中，然后通过 <link> 标签在 HTML 文档中引入。例如，创建一个 styles.css 文件，内容如下：
body {
    font - family: Arial, sans - serif;
}

p {
    color: green;
}

在 HTML 文档中引入这个外部样式表：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <p>这是一段应用了外部样式表的文本。</p>
</body>

</html>

外部样式表最大的优点是可以在多个 HTML 页面中复用，便于维护和更新。当修改 styles.css 文件时，所有引用该样式表的页面都会自动更新样式。这是在大型项目中推荐使用的样式引入方式。

  1. @import 引入方式 @import 规则可以在一个 CSS 文件中引入另一个 CSS 文件。例如，在 main.css 文件中可以这样引入 styles.css：
@import url('styles.css');

body {
    background - color: lightblue;
}

虽然 @import 提供了一种在 CSS 文件中引入其他样式的方式，但它存在一些缺点。@import 是在页面加载完成后才会加载引入的样式表，这可能会导致页面闪烁。而且，使用 @import 不利于浏览器并行加载资源，影响页面性能。因此，在现代开发中，更推荐使用 <link> 标签引入外部样式表。

  1. JavaScript动态引入 通过 JavaScript 也可以动态地引入 CSS 样式。例如：
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <button onclick="loadStyle()">加载样式</button>
    <script>
        function loadStyle() {
            var link = document.createElement('link');
            link.rel ='stylesheet';
            link.href ='styles.css';
            document.head.appendChild(link);
        }
    </script>
</body>

</html>

这种方式可以根据用户的操作或其他逻辑动态地加载样式表，但同样需要注意性能问题，并且在加载顺序等方面需要仔细处理。

通过对 CSS 语法、盒模型、定位、布局以及引入方式的深入理解，前端开发者能够更加灵活高效地创建出美观、响应式的网页界面。在实际项目中，应根据具体需求和场景选择合适的布局方式和引入样式的方法，以实现最佳的用户体验和性能优化。