記錄、分享IT相關知識和見聞!
想要了解更多軟體相關知識的朋友!
記得右上角添加【關注】,支持一下!
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 的世界中越走越遠!
⛱ 以上就是今天為大家帶來的分享!
⛱ 如果文章對你有益;
⛱ 請記得【評論、收藏、轉發、點讚】!
⛱ 創作不易,且讀且珍惜,喜歡我的文章;
⛱ 喜歡我的文章,記得添加【關注】哦!
⛱ 再次感謝您的閱讀。
❀ 長按【點讚】會有驚喜哦!❀
~End~