SHAO Zelian

人而无信，不知其可也 | 学不可以已

CSS Styles

Shao Zelian, 30 Aug 2025

 Ref.: W3Schools CSS Tutorial

根据设备调整CSS - MQ (Media Queries)

Media Queries是一种常用的CSS技术，用来检测正常访问网页的设备特征，比如设备宽度/高度（Width/Height）、视区方向（Orientation of ViewPort）以及分辨率（Resolution）等。通过获得设备的特征，开发人员可以调整css style已确保网页内容以合适地方式在这些设备（比如各种电脑、Tablet和手机等）上呈现。

 Ref.: W3schools - CSS Media Queries

语法：

<style>
@media not|only mediatype and (media feature) and (media feature) {
  CSS-Code;
}
</style>

示例：

<style>
/* for iPhone 14 Pro Max*/
@media only screen and (max-width: 430px) {
    .container {
        width: 98%;
    }
}

/* for devices with wider screen > 430px */
@media only screen and (min-width: 431px) {
    .container {
        width: 90%;
    }
}
</style>

元素垂直居中

<style>
.container {
    display: flex;
    align-items: center; /* 垂直居中 */
}
</style>

<div class="container">
    <img src="/assets/images/bmw.png" alt="bmw" />
    <span>BMW Group</span>
<div>

<div>始终在底部

<style>
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
</style>

<div class="footer">
    this is footer.
</div>

根据子元素选择

以下示例表示选择具有 “class=’language-mermaid’” 的子元素的<pre>元素。

pre:has(code.language-mermaid) {
    background-color: white !important;
}

/*以下prev元素会被选择*/
<pre>
    <code class='language-mermaid'>
    ...
    <code>
</pre>

悬浮<div>

以下代码会让<div>悬浮在父容器的右上角。

<style>
    .floating-div {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 300px;
        position: sticky;
        z-index: 1020;
        float: right;
        padding: 10px;
        font-size: 12px;
    }

</style>


<div class="floating-div">
    here's the content of the window.
</div>

带圆圈的数字

<style>
.circle {
    background: #e3e3e3;
    border-radius: 50%;
    color: #6e6e6e;
    display: inline-block;
    font-weight: bold;
    line-height: 40px;
    margin-right: 5px;
    text-align: center;
    width: 40px;
}
</style>

<span class="circle">1</span>

1 2 3 … 10

居中方案（上下左右居中）

<style>
    .perfect-center {
        display: grid;
        place-items: center;
    }
</style>
<div class="perfect-center">Center</div>

说明：

Grid 布局的place-items属性将align-items和justify-items合二为一，一步实现双向完美居中，且浏览器兼容性高。

它适用于：

示例：

Center Text


页眉、页脚、三栏结构

<style>
    .holy-grail {
        display: grid;
        grid-template:
            "header header header" auto
            "nav    main   aside" 1fr
            "footer footer footer" auto
            / auto 1fr auto;
        min-height: 100vh;
    }
    .holy-grail > header { grid-area: header; }
    .holy-grail > nav { grid-area: nav; }
    .holy-grail > main { grid-area: main; }
    .holy-grail > aside { grid-area: aside; }
    .holy-grail > footer { grid-area: footer; }
</style>

演示

响应式卡片网格

<style>
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: 1.5rem;
    }
</style>

<div class="card-grid">
  <div class="card">
    <img src="card-image-1.jpg" alt="Card Image 1">
    <h3>Card Title 1</h3>
    <p>Card content goes here...</p>
  </div>
  <div class="card">
    <img src="card-image-2.jpg" alt="Card Image 2">
    <h3>Card Title 2</h3>
    <p>Card content goes here...</p>
  </div>
  <div class="card">
    <img src="card-image-3.jpg" alt="Card Image 3">
    <h3>Card Title 3</h3>
    <p>Card content goes here...</p>
  </div>
  <div class="card">
    <img src="card-image-4.jpg" alt="Card Image 4">
    <h3>Card Title 4</h3>
    <p>Card content goes here...</p>
  </div>
</div>

说明

示例：

Card Image 1

Card Title 1

Card content goes here...

Card Image 2

Card Title 2

Card content goes here...

Card Image 3

Card Title 3

Card content goes here...

Card Image 4

Card Title 4

Card content goes here...