CSS很難學嗎？這幾個屬性掌握了，秒變CSS大神！

作者：程序員最幽默 2023-04-10 15:01:38

CSS 是前端開發中不可或缺的一部分，用于控制網頁的樣式和布局。

雖然 CSS 看起來很簡單，但實際上它有很多屬性和特性，需要花費一定的時間和精力去學習和掌握。

本文將介紹一些常用的 CSS 屬性，包括 `border`、`display`、`padding`、`margin`、`rem`、`em` 和 `box-sizing`。這些屬性涵蓋了 CSS 中的基本概念和常見用法，掌握它們可以讓你在 CSS 中游刃有余，成為一名 CSS 大神。

Box-sizing

CSS `box-sizing` 屬性用于設置 HTML 元素的盒模型。
盒模型是指元素的寬度和高度是由內容、內邊距、邊框和外邊距組成的。
CSS 中有兩種盒模型：內容盒模型和邊框盒模型。

- 內容盒模型（`box-sizing: content-box`）：元素的寬度和高度只包括內容，
不包括內邊距、邊框和外邊距。這是默認的盒模型。

- 邊框盒模型（`box-sizing: border-box`）：元素的寬度和高度包括內容、
內邊距和邊框，不包括外邊距。

使用 `border-box` 盒模型可以更方便地設置元素的寬度和高度，
因為不需要考慮內邊距和邊框的影響。
例如，如果要創建一個寬度為 200px、內邊距為 10px、邊框為 1px 的盒子，
使用 `content-box` 盒模型需要將寬度設置為 212px（200px + 2 × 10px + 2 × 1px），
而使用 `border-box` 盒模型只需要將寬度設置為 200px。

以下代碼展示了 `box-sizing` 屬性的用法：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: content-box; /* 默認值 */
}

div.box {
  box-sizing: border-box;
}

Fonts (rem, em)

`rem` 和 `em` 都是 CSS 中用于設置字體大小的單位，但它們的計算方式不同。

`rem` 單位是相對于根元素（即 `<html>` 元素）的字體大小來計算的。
例如，如果根元素的字體大小為 16px，那么 `1rem` 就等于 16px，`2rem` 就等于 32px，
以此類推。
使用 `rem` 單位可以方便地實現響應式設計，
因為根元素的字體大小可以根據屏幕尺寸或設備類型進行調整。

`em` 單位是相對于父元素的字體大小來計算的。例如，如果父元素的字體大小為 16px，
那么 `1em` 就等于 16px，`2em` 就等于 32px，以此類推。使用 `em` 單位
可以方便地實現相對大小的字體和布局，因為它們可以根據父元素的字體大小進行縮放。

以下代碼展示了 `rem` 和 `em` 單位的用法：

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 等于 32px */
}

p {
  font-size: 1.2rem; /* 等于 19.2px */
  line-height: 1.5em; /* 等于 28.8px */
}

.container {
  font-size: 1.5em; /* 等于父元素字體大小的 1.5 倍 */
}

.box {
  font-size: 0.8em; /* 等于父元素字體大小的 0.8 倍 */
  padding: 1em; /* 等于父元素字體大小的 1 倍 */
}

Padding & Margin

CSS `padding` 和 `margin` 屬性用于設置 HTML 元素的內邊距和外邊距：

- `padding-top`、`padding-right`、`padding-bottom`、`padding-left`: 
分別設置上、右、下、左四個方向的內邊距。

- `padding`: 設置上、右、下、左四個方向的內邊距，可以使用一個、兩個或四個值來設置。

- `margin-top`、`margin-right`、`margin-bottom`、`margin-left`: 
分別設置上、右、下、左四個方向的外邊距。

- `margin`: 設置上、右、下、左四個方向的外邊距，可以使用一個、兩個或四個值來設置。
- `padding: auto`: 自動計算內邊距，使元素居中。
- `margin: auto`: 自動計算外邊距，使元素居中。

- `box-sizing: border-box`: 
設置盒模型為邊框盒模型，即元素的寬度和高度包括內邊距和邊框，不包括外邊距。

- `box-sizing: content-box`: 
設置盒模型為內容盒模型，即元素的寬度和高度只包括內容，不包括內邊距、邊框和外邊距。

以下展示了 `padding` 和 `margin` 屬性的多種用法：

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

span {
  padding: 10px 20px;
}

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

a {
  margin: 10px 20px;
}

.center {
  padding: auto;
  margin: auto;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
}

.content {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
}

Display

CSS 的 display 屬性用于設置元素的顯示方式：

- `block`：將元素顯示為塊級元素，即在頁面中顯示為一塊矩形區域，可以設置寬度、高度、內邊距和外邊距等屬性。

- `inline`：將元素顯示為行內元素，即在頁面中顯示為一行，不可以設置寬度、高度、內邊距和外邊距等屬性。

- `inline-block`：將元素顯示為行內塊級元素，即在頁面中顯示為一行，但可以設置寬度、高度、內邊距和外邊距等屬性。

- `none`：將元素隱藏，不占用頁面空間。

- `flex`：將元素顯示為彈性盒子，可以使用彈性盒子布局來排列子元素。

- `grid`：將元素顯示為網格容器，可以使用網格布局來排列子元素。

- `table`：將元素顯示為表格，可以使用表格布局來排列子元素。

- `list-item`：將元素顯示為列表項，通常用于 ul 和 ol 元素的子元素。

- `inherit`：繼承父元素的 display 屬性值。

Position

CSS 的 position 屬性用于設置元素的定位方式：

- `static`：默認值，元素按照正常文檔流排列，不進行定位。
- `relative`：相對定位，元素相對于其正常位置進行定位，可以使用 top、right、bottom、left 屬性來設置偏移量。
- `absolute`：絕對定位，元素相對于其最近的已定位祖先元素進行定位，如果沒有已定位的祖先元素，則相對于 body 元素進行定位，可以使用 top、right、bottom、left 屬性來設置偏移量。
- `fixed`：固定定位，元素相對于瀏覽器窗口進行定位，不隨頁面滾動而滾動，可以使用 top、right、bottom、left 屬性來設置偏移量。
- `sticky`：粘性定位，元素在滾動到特定位置時變為固定定位，可以使用 top、right、bottom、left 屬性來設置偏移量。

Width & Height

CSS 的 width 和 height 屬性用于設置元素的寬度和高度：

- `auto`：默認值，元素的寬度或高度根據內容自適應。
- `<length>`：使用具體的長度值來設置元素的寬度或高度，如 `width: 200px;`。
- `<percentage>`：使用相對于父元素的百分比來設置元素的寬度或高度，如 `width: 50%;`。
- `inherit`：繼承父元素的寬度或高度屬性值。

除了這些基本用法，還可以使用其他一些屬性來進一步控制元素的寬度和高度，例如：

- `max-width` 和 `max-height`：設置元素的最大寬度和最大高度，超過這個值時會自動縮小。
- `min-width` 和 `min-height`：設置元素的最小寬度和最小高度，小于這個值時會自動擴展。
- `box-sizing`：設置元素的盒模型，可以選擇 `content-box`（默認值，寬度和高度只包括內容，不包括內邊距和邊框）或 `border-box`（寬度和高度包括內容、內邊距和邊框）。
- `padding` 和 `margin`：設置元素的內邊距和外邊距，會影響元素的實際寬度和高度。

max- & min-

CSS 的 `max-width`、`min-width`、`max-height` 和 `min-height` 
屬性用于設置元素的最大寬度、最小寬度、最大高度和最小高度：

- `max-width`：設置元素的最大寬度，超過這個寬度時會自動縮小。
可以使用具體的長度值或百分比來設置，
例如： `max-width: 500px;` 或 `max-width: 80%;`。

- `min-width`：設置元素的最小寬度，小于這個寬度時會自動擴展。
可以使用具體的長度值或百分比來設置，
例如： `min-width: 200px;` 或 `min-width: 50%;`。

- `max-height`：設置元素的最大高度，超過這個高度時會自動縮小。
可以使用具體的長度值或百分比來設置，
例如： `max-height: 300px;` 或 `max-height: 60%;`。

- `min-height`：設置元素的最小高度，小于這個高度時會自動擴展。
可以使用具體的長度值或百分比來設置，
例如: `min-height: 100px;` 或 `min-height: 20%;`。

Border

CSS `border` 屬性用于設置 HTML 元素的邊框樣式、寬度和顏色：

- `border-style`: 設置邊框樣式，如 `solid`、`dotted`、`dashed`、`double`、`groove`、`ridge`、`inset`、`outset` 或 `none`。
- `border-width`: 設置邊框寬度，如 `thin`、`medium`、`thick` 或具體的像素值。
- `border-color`: 設置邊框顏色，如顏色名稱、十六進制值或 RGB 值。
- `border-top`、`border-right`、`border-bottom`、`border-left`: 分別設置上、右、下、左四個方向的邊框樣式、寬度和顏色。
- `border-radius`: 設置邊框圓角，如 `10px` 或 `50%`。
- `border-image`: 設置邊框圖片，如 `url(border.png) 30 30 round`。

Z-index

`z-index` 屬性用于控制元素的堆疊順序，即控制元素在層疊上下文中的顯示順序。具體用法如下：

1. 設置元素的 `z-index` 值，值越大，元素越靠近頂部，即顯示在其他元素的上方。

.element {
  z-index: 10;
}

2. 創建新的層疊上下文，通過設置 `position` 屬性為 `relative`、`absolute` 或 `fixed` 來創建新的層疊上下文。

.element {
  position: relative;
  z-index: 10;
}

3. 層疊上下文的嵌套，當一個元素的子元素設置了 `z-index` 值時，子元素會在父元素的上方顯示。

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: relative;
  z-index: 2;
}

注意：`z-index` 屬性只對設置了 `position` 屬性的元素有效。

Overflow

`overflow` 屬性用于控制元素內容溢出時的處理方式。具體用法如下：

1. `overflow: visible;`（默認值）：內容不會被修剪，會呈現在元素框之外。

2. `overflow: hidden;`：內容會被修剪，并且其余內容是不可見的。

3. `overflow: scroll;`：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

4. `overflow: auto;`：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

注意：`overflow` 屬性只對設置了固定高度或寬度的元素有效。

CSS 偽類

CSS 偽類用于向某些選擇器添加特殊的效果：

1. `:hover`：鼠標懸停在元素上時的效果。

a:hover {
  color: red;
}

2. `:active`：元素被激活時的效果，通常是鼠標點擊時。

button:active {
  background-color: blue;
}

3. `:focus`：元素獲得焦點時的效果，通常是通過 Tab 鍵或鼠標點擊輸入框等元素時。

input:focus {
  border: 2px solid blue;
}

4. `:first-child`：選擇元素的第一個子元素。

li:first-child {
  font-weight: bold;
}

5. `:last-child`：選擇元素的最后一個子元素。

li:last-child {
  margin-bottom: 0;
}

6. `:nth-child(n)`：選擇元素的第 n 個子元素。

li:nth-child(2) {
  color: red;
}

7. `:nth-of-type(n)`：選擇元素的第 n 個指定類型的子元素。

p:nth-of-type(2) {
  font-size: 20px;
}

8. `:not(selector)`：選擇不匹配指定選擇器的元素。

:not(.special) {
  color: blue;
}

CSS 偽元素

CSS 偽元素用于向某些選擇器添加特殊的效果，
它們可以創建一些不在文檔樹中的元素，并為其添加樣式：

1. `::before`：在元素的內容前面插入一個元素。

p::before {
  content: "前綴：";
  font-weight: bold;
}

2. `::after`：在元素的內容后面插入一個元素。

p::after {
  content: "后綴。";
  font-style: italic;
}

3. `::first-letter`：選擇元素的第一個字母。

p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

4. `::first-line`：選擇元素的第一行。

p::first-line {
  font-size: 18px;
  font-weight: bold;
}

5. `::selection`：選擇元素中被用戶選中的部分。

::selection {
  background-color: yellow;
  color: black;
}

Flexbox

Flexbox 是一種用于布局的 CSS3 屬性，它可以使元素在容器中按照一定的規則排列：

1. `display: flex;`：將容器設置為 Flexbox 布局。

.container {
  display: flex;
}

2. `flex-direction: row/column;`：設置主軸的方向，即元素的排列方向。

.container {
  flex-direction: row; /* 默認值 */
}

.container {
  flex-direction: column;
}

3. `justify-content: flex-start/center/flex-end/space-between/space-around;`：設置主軸上的對齊方式。

.container {
  justify-content: flex-start; /* 默認值 */
}

.container {
  justify-content: center;
}

.container {
  justify-content: flex-end;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-around;
}

4. `align-items: stretch/flex-start/center/flex-end/baseline;`：設置交叉軸上的對齊方式。

.container {
  align-items: stretch; /* 默認值 */
}

.container {
  align-items: flex-start;
}

.container {
  align-items: center;
}

.container {
  align-items: flex-end;
}

.container {
  align-items: baseline;
}

5. `flex-wrap: nowrap/wrap/wrap-reverse;`：設置元素是否換行。

.container {
  flex-wrap: nowrap; /* 默認值 */
}

.container {
  flex-wrap: wrap;
}

.container {
  flex-wrap: wrap-reverse;
}

6. `flex-grow: number;`：設置元素的放大比例。

.item {
  flex-grow: 1;
}

7. `flex-shrink: number;`：設置元素的縮小比例。

.item {
  flex-shrink: 1;
}

8. `flex-basis: length/initial/auto;`：設置元素在主軸上的初始大小。

.item {
  flex-basis: 100px;
}

Grid

CSS Grid 是一種用于布局的 CSS3 屬性，它可以將元素劃分為行和列，從而創建復雜的布局：

1. `display: grid;`：將容器設置為 Grid 布局。

.container {
  display: grid;
}

2. `grid-template-columns: value;`：設置列的大小和數量。

.container {
  grid-template-columns: 100px 100px 100px; /* 三列，每列寬度為 100px */
}

3. `grid-template-rows: value;`：設置行的大小和數量。

.container {
  grid-template-rows: 100px 100px 100px; /* 三行，每行高度為 100px */
}

4. `grid-template-areas: value;`：設置區域的名稱。

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

5. `grid-column-start/end: value;`：設置元素的列起始和結束位置。

.item {
  grid-column-start: 1;
  grid-column-end: 3; /* 元素跨越兩列 */
}

6. `grid-row-start/end: value;`：設置元素的行起始和結束位置。

.item {
  grid-row-start: 1;
  grid-row-end: 3; /* 元素跨越兩行 */
}

7. `grid-area: value;`：設置元素的區域名稱。

.item {
  grid-area: content;
}

8. `grid-gap: value;`：設置行和列之間的間距。

.container {
  grid-gap: 10px; /* 行和列之間的間距為 10px */
}

Transitions

CSS Transitions 屬性用于在元素從一種樣式逐漸變為另一種樣式時添加動畫效果：

1. `transition-property: value;`：設置要過渡的 CSS 屬性。

.box {
  transition-property: background-color;
}

2. `transition-duration: value;`：設置過渡的持續時間。

.box {
  transition-duration: 1s;
}

3. `transition-timing-function: value;`：設置過渡的時間函數。

.box {
  transition-timing-function: ease-in-out;
}

4. `transition-delay: value;`：設置過渡的延遲時間。

.box {
  transition-delay: 0.5s;
}

Animation

CSS Animation 屬性用于創建動畫效果，它可以讓元素從一種樣式逐漸變為另一種樣式：

1. `animation-name: value;`：設置動畫的名稱。

.box {
  animation-name: example;
}

2. `animation-duration: value;`：設置動畫的持續時間。

.box {
  animation-duration: 2s;
}

3. `animation-timing-function: value;`：設置動畫的時間函數。

.box {
  animation-timing-function: ease-in-out;
}

4. `animation-delay: value;`：設置動畫的延遲時間。

.box {
  animation-delay: 0.5s;
}

5. `animation-iteration-count: value;`：設置動畫的播放次數。

.box {
  animation-iteration-count: infinite; /* 無限循環 */
}

6. `animation-direction: value;`：設置動畫的播放方向。

.box {
  animation-direction: alternate; /* 往返播放 */
}

7. `animation-fill-mode: value;`：設置動畫結束后元素的樣式。

.box {
  animation-fill-mode: forwards; /* 保持最后一幀的樣式 */
}

8. `@keyframes`：定義動畫的關鍵幀。

@keyframes example {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Media Queries

CSS Media Queries 屬性用于根據設備的特性（如屏幕寬度、高度、方向等）來應用不同的樣式：

1. `@media screen and (max-width: value) { ... }`：設置屏幕寬度小于某個值時應用的樣式。

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

2. `@media screen and (min-width: value) { ... }`：設置屏幕寬度大于某個值時應用的樣式。

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

3. `@media screen and (orientation: value) { ... }`：設置屏幕方向為橫向或縱向時應用的樣式。

@media screen and (orientation: landscape) {
  body {
    background-color: #f0f0f0;
  }
}

4. `@media screen and (resolution: value) { ... }`：設置屏幕分辨率大于某個值時應用的樣式。

@media screen and (resolution: 300dpi) {
  body {
    font-size: 20px;
  }
}

掌握這些 CSS 屬性只是成為一名 CSS 大神的第一步。在實際開發中，你還需要不斷學習和探索新的 CSS 特性和技巧，以應對不同的需求和挑戰。希望本文能夠為你提供一些幫助和啟示，讓你在 CSS 的世界中越走越遠！

責任編輯：華軒來源：今日頭條

CSS 開發開發