css3

為實現內容與樣式分離；用 CSS 調整頁面的佈局，元素的顏色和尺寸，添加背景圖像和邊框，創建動畫效果等

selector {
    property: value;
}

/*標籤選擇器:這個CSS規則將應用到HTML文檔中所有的h1元素上，使得這些h1元素的文字顏色為藍色，字體大小為24像素*/
h1 {
    color: blue;
    font-size: 24px;
}

/*類選擇器*/
/*<div class="block1"> 變紅色 </div>*/
.block1 {
    color: red;
}

/*id選擇器*/
/*<p id="id1"> 變紅色 </p>*/
#id1 {
    color: red;
}

/*通配符選擇器:清除所有的元素標籤的內外邊距*/
* {
   margin: 0;
   padding: 0;
}

/*屬性選擇器*/
/*css2起*/
[attribute] { property: value; }/*匹配所有有 attribute屬性的元素*/
[attribute="value"] { property: value; }/**/
[attribute^="value"] { property: value; }/*匹配所有 attribute屬性值以 "value" 開頭的元素*/
[attribute|="value"] { property: value; }/*匹配 attribute屬性值為 "value" 或以 "value-" 開頭的元素*/
/*css3*/
[attribute$="value"] { property: value; }/*匹配所有 attribute屬性值以 "value" 結尾的元素*/
[attribute*="value"] { property: value; }/*匹配所有 attribute屬性值中包含 "value" 字符串的元素*/
[attribute~="value"] { property: value; }/*匹配 attribute屬性值包含單詞 "value" 的元素*/

1）selector 指定 CSS 規則應用到哪些元素；selector 包括：標籤選擇器、類選擇器、id 選擇器和通配符選擇器
2）property: value;：一組 CSS 聲明

複合 selector#

並集 selector#

將多個基礎選擇器通過逗號分開

p, b, i, span {/*選擇所有的 <p>、<b>、<i>、<span> 元素，並為它們設置 color: red;*/
    color: red;
}

交集 selector#

div.class {/*既是Div標籤又是class類*/
    color: red;
}

後代selector#

後代選擇器選擇的是某個元素內的所有後代元素，而不管這些後代元素的層級深度

p b {/*選擇的是所有 <p> 元素內的 <b> 元素，無論 <b> 在 <p> 中的嵌套層次有多深*/
    color: red;
}

子selector#

選擇某個元素的直接子元素

ul > li {
    border: 1px solid red;
}

相鄰兄弟selector#

選擇緊接在另一個元素之後的兄弟元素

p + b {/*選擇緊跟在 <p> 元素後的第一個 <b> 元素*/
    color: red;
}

普通兄弟selector#

選擇所有位於某元素後面的兄弟元素

p ~ b {/*選擇所有位於 <p> 元素後面的 <b> 元素，不一定是緊跟在 <p> 後面的，只要它們在同一級別的 DOM 樹中*/
    color: red;
}

偽類 selector#

偽類 selector	說明
	匹配父元素的第一個子元素
	匹配父元素的最後一個子元素
(n)	匹配父元素中的第 n 個子元素；n 是遞增的自然數，也可以寫常數或者 odd，even
(n)	匹配父元素的第 n 個同類型子元素
	匹配父元素中的第一個同類型子元素
	匹配父元素的最後一個同類型子元素
	匹配所有未訪問鏈接
	匹配所有已訪問鏈接
	匹配鼠標懸停其上的元素
	匹配被點擊的鏈接（eg：鼠標按住時的狀態）
	匹配處於選中狀態的元素
	匹配每個被禁用的元素
	匹配任何沒有子元素的元素
	匹配每個已啟用的元素
	匹配獲得焦點的元素
	匹配具有指定取值範圍的元素
	匹配所有具有無效值的元素
(language)	匹配每個 lang 屬性值以 "it" 開頭的元素
(selector)	匹配每個非元素的元素
(n)	匹配父元素的倒數第二個子元素
(n)	匹配父元素的倒數第二個子元素
	匹配父元素中唯一的元素
	匹配父元素中唯一的子元素
	匹配不帶 "required" 屬性的元素
	匹配值在指定範圍之外的元素
	匹配指定了 "readonly" 屬性的元素
	匹配不帶 "readonly" 屬性的元素
	匹配指定了 "required" 屬性的元素
	匹配元素的根元素，在 HTML 中，根元素永遠是 HTML
	匹配當前活動的 #news 元素（單擊包含該錨名稱的 URL）
	匹配所有具有有效值的元素

偽元素 selector#

匹配元素的部分（如首字母、首行文本等）

偽元素	例子描述	css
::after	在元素後插入內容	2
::before	在元素前插入內容	2
::first-letter	匹配塊級元素內容首字符	1
::first-line	匹配塊級元素內容首行	1
::selection	匹配用戶選中的元素
::placeholder	匹配表單控件佔位文本（如）；用於自定義文本樣式

<p>strick</p>
<input type="text" placeholder="請輸入"/>
p::first-letter {
  font-size: 200%;
}
p::first-line {
  font-weight: bold;
}
input::placeholder {
  color: red;
}
p::selection {
  color: red;
}

p::before {
  content: "I "<!--可以是圖片url('./smiley.gif');-->
}
p::after {
  content: " Strick"
}

css 引入#

多個樣式表影響同一元素時，瀏覽器根據衝突樣式的層疊優先級規則決定應用的樣式：!important標記 > 元素內嵌 > 文檔內嵌 > 外部鏈接樣式 > 瀏覽器默認指定樣式；

選擇器優先級：選定範圍越小越優先

元素內嵌#

在元素標籤內部的 style 屬性中設定 CSS 樣式。適合於修改簡單樣式；每個聲明鍵值對用;隔開

<p style="color:red;font-size:50px;">hello world</p>

文檔內嵌#

在中創建

<style type="text/css">
  p {
    color: blue;
    font-size: 40px;
  }
</style>
<p>這是一段文本</p>

外部鏈接樣式#

<link rel="stylesheet" type="text/css" href="style.css">

style.css：

@charset "utf-8";
p {
    color: green;
    font-size: 30px;
}

強行設置最高優先級#

color: green !important;

樣式繼承#

1）如果元素沒有設置父元素相關的樣式，則繼承父元素樣式（只適用於 text-，font-，line - 開頭的及 color 屬性樣式可繼承，不適用於佈局樣式）
2）強制繼承佈局樣式

<p style="color:red;">這是<b>HTML5</b></p> <!--<b>元素繼承了<p>元素的樣式-->

<p>這是<b>HTML5</b></p>
<style type="text/css">
  p {
    border: 1px solid red;<!--border非繼承樣式-->
  }
  b {
    border: inherit;
  }
</style>

Box Model#

網頁佈局流程：
1）設置一個個網頁元素 box 的樣式；擺到合適位置
2）往 box 裝內容

content 與 border 的距離就是內邊距；box 間的距離就是外邊距

元素 box 類型#

塊級元素#

1) 塊級元素獨占一行；
2) 高度，寬度、外邊距以及內邊距都可以控制。
3) 寬度默認是容器（父級寬度）的 100%。
4) 文字類元素內不能放塊級元素；比如

~#

常見塊：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行內元素#

1) 一行可以顯示多個行內元素；
2) 高、寬直接設置是無效的。只能自適應內容的寬度
3) 行內元素只能容納文本或其他行內元素。
4) 鏈接裡面不能再放鏈接；特殊情況鏈接裡面可以放塊級元素，但是給轉換一下塊級模式最安全

常見行內元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行內塊元素#

1) 一行可以顯示多個行內塊元素，但是他們之間會有空白縫隙；
2) 默認寬度是自適應內容的寬度；高度，行高、外邊距以及內邊距都可以控制

常見行內塊元素：

<img />、<input />、<td>

類型轉換#

span { /*轉化成塊元素*/
  display: block;
}

div { /*轉化成行內元素*/
  display: inline;
}

div { /*轉化成行內-塊元素*/
  display: inline-block;
}

div { display: none;/*將元素隱藏且不占位*/
}

設置元素 box 尺寸#

屬性	值	說明	CSS 版本
width	auto、長度值或百分比	設置元素的寬度	1
height	auto、長度值或百分比	設置元素的高度	1
min-width	auto、長度值或百分比	設置元素最小寬度	2
min-height	auto、長度值或百分比	設置元素最小高度	2
max-width	auto、長度值或百分比	設置元素最大寬度	2
max-height	auto、長度值或百分比	設置元素最大高度	2
box-sizing	content-box border-box	默認值，元素的寬度和高度只計算`content`尺寸，不含`padding`和`border` 元素的寬度和高度計算包括內邊距`padding`和邊框`border`	3，在各內核早期作為實驗功能，要帶瀏覽器前綴，後面就不用了
resize	none both horizontal vertical	普通元素默認值，不允許客戶端用戶調整元素大小表單類的 textarea 元素默認值，客戶端用戶可以調節元素的寬度和高度客戶端用戶可以調節元素的寬度客戶端用戶可以調節元素的高度

div {
  background-color: purple;

  width: 200px; height: 200px;
  min-width: 100px;
  min-height: 100px;
  max-width: 300px;
  max-height: 300px;

  resize: both;
  overflow: auto;/*搭配這個出現可拖拽大小的圖形*/

/*  -webkit-box-sizing: border-box;*/  /* Safari 和 Chrome */
/*  -moz-box-sizing: border-box;  */   /* Firefox */
/*  -ms-box-sizing: border-box;   */   /* IE */
  box-sizing: border-box;         /* 標準 */
  padding: 10px; border: 5px solid red;
}

設置內邊距 padding#

設置元素內部邊緣填充空白的大小

屬性	值	說明	CSS 版本
padding-top	長度值或百分比	設置頂部內邊距	1
padding-right	長度值或百分比	設置右邊內邊距	1
padding-bottom	長度值或百分比	設置底部內邊距	1
padding-left	長度值或百分比	設置左邊內邊距	1
padding	1 ~ 4 個長度值或百分比	簡寫屬性	1

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

div {
  padding: 10px 10px 10px 10px;
}

div {
  padding: 10px 20px;/*上下，左右*/
}

div {
  padding: 10px;
}

設置外邊距 margin#

設置元素外部邊緣填充空白的大小

屬性	值	說明
margin-top
margin-right
margin-bottom
margin-left
margin	長度值百分比 auto：外邊距自動占滿瀏覽器寬度	設置頂部內邊距
設置右邊內邊距
設置底部內邊距
設置左邊內邊距
簡寫屬性	1

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

div {
  margin: 10px 10px 10px 10px;
}

div {
  margin: 10px 20px;
}

div {
  margin: 10px;
}

/*box版心居中*/
div {
  margin: 0 auto;
}

/*box水平居中*/
div {
  margin-right: auto;
  margin-left: auto;
}

box 垂直對齊時 margin 重合#

垂直排列的相鄰 box；實際間距是兩個 box 上下 margin 的最大值；而非其他情況的 margin 和

box 內元素垂直對齊時 margin-top 塌陷#

父子標籤中，子標籤添加 margin-top 導致父子標籤一起向下移動；

解決方法：子標籤添加 margin-top 的動機一般是調節子標籤在父元素中的垂直對齊，調節這個垂直對齊更好的方法：
1）取消子級 margin, 父級設置 padding-top
2）父級設置 overflow
3）父級設置 border-top

處理溢出#

屬性	值	說明	CSS 版本
overflow - x	溢出值	設置水平方向的溢出	3
overflow - y	溢出值	設置垂直方向的溢出	3
overflow	取值上同：
auto ：瀏覽器自行處理溢出內容。如果有溢出內容，就顯示滾動條，否則就不顯示滾動條
hidden ：如果有溢出的內容，直接剪掉。
scroll：不管是否溢出，都會出現滾動條。但不同平台和瀏覽器顯示方式不同.
visible ：默認值，不管是否溢出，都顯示內容。	簡寫屬性	2

div {
  overflow: auto;
}

設置元素可見性#

屬性	值
display
visibility	visible：默認值，元素在頁面上可見。 hidden：元素不可見，但占位 collapse：元素不可見，隱藏表格的行與列，如不是表格，則和 hidden 一樣；可能 Chrome 和 Opera 不支持

div { visibility: hidden;
}

而 box 在調試時的可見性，通過設置邊框和背景色實現

設置元素浮動#

屬性	值	說明
float	left right none	浮動元素靠左浮動元素靠右禁用浮動
clear	none left right both	浮動元素可緊貼左右邊界浮動元素不得緊貼左邊界浮動元素不得緊貼右邊界浮動元素不得緊貼左右邊界

#a { /*浮動元素靠左*/
  background: gray;
  float: left;
  clear: none;
}

#c { /*浮動元素靠右*/
  background: navy;
  float: right;
  clear: both;
}

#c { /*禁用浮動*/
  background: navy;
  float: none;
}

設置元素定位屬性#

可理解設置定位屬性後，元素上升到一個 position 層進行 layout

屬性	value	說明
position	static absolute relative fixed	默認值，無定位。絕對定位，脫離文檔流，以窗口文檔左上角 0,0 為起點；使用 top、right、bottom、left 進行相對距離描述相對定位，使用 top、right、bottom、left 進行相對距離描述。相對於自己原來的位置來移動以窗口參考定位，使用 top、right、bottom、left 進行相對距離描述。

header { /*絕對定位：以窗口文檔左上角 0,0 為起點*/
  position: absolute; top: 100px; left: 100px;
}

header { /*以窗口參考定位：會隨著滾動條滾動而滾動，達到相對窗口靜止的效果*/
  position: fixed; top: 100px; left: 100px;
}

/*相對某元素定位：不脫離文檔流層*/
body { /*設置參考點的父元素設置為相對，且不設置坐標*/
  position: relative;
}
header { /*如果父元素設置了參考點，子元素的絕對定位將以它為基準*/
  position: absolute; top: 0px; left: 0px;
}

設置層疊優先級#

屬性	value	說明
z-index	auto 數字	默認層次設置層次，數字越大，層次越高

header {
  z-index: 100;
}

佈局#

文檔標準佈局#

只用 box 類型本身的佈局特性 + 類型轉換；現在一般是網頁整體結構是標準流佈局，一行裡面的多個子塊是特殊佈局

如果父 box 沒有高度，子 box 會撐開父 box

表格佈局#

早期用表格來描述網頁結構，通過設置塊樣式寬度 table { width: 100% } 始終是瀏覽器窗口的 100%。再設置子塊（單元格）寬度為父塊的百分比使頁面自適應使用窗口大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佈局表格</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table border="0">
        <tr>
            <td colspan="2" class="header">Header</td>
        </tr>
        <tr>
            <td class="aside">Aside</td>
            <td class="section">Section</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">Footer</td>
        </tr>
    </table>
</body>
</html>

styles.css：

/* 頁面基本樣式 */
body {
    margin: 0;
}

/* 流體佈局的表格樣式 */
table {
    margin: 0 auto;
    width: 100%;  /* 設置表格寬度為100%，使其適應窗口寬度 */
    border-spacing: 0;
}

/* 表頭樣式 */
.header {
    height: 120px;
    background-color: #2714d1;
    text-align: center;
    font-size: 24px;
}

/* 側邊欄樣式 */
.aside {
    width: 20%; /* 使其寬度為20% */
    height: 500px;
    background-color: #2e53d0;
    padding: 10px;
    box-sizing: border-box;
}

/* 主要內容區樣式 */
.section {
    width: 80%;  /* 使其寬度為80% */
    height: 500px;
    background-color: #4eb776;
    padding: 10px;
    box-sizing: border-box;
}

/* 頁腳樣式 */
.footer {
    height: 120px;
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
}

Float~~~~ 佈局#

1）元素添加浮動屬性後，元素飄在文檔標準佈局的塊上面，可理解為在 float 層上進行的 layout；也意味著如果父 box 沒有高度，子 box 不再會撐開父 box
2）且元素具備了行內塊特性
3）元素是頂對齊的

浮動易於實現圖文環繞：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮動佈局 - 流體佈局</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="clearfix">
  <header>header</header>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
</body>
</html>

styles.css：

/* body 設置寬度為 auto，使得頁面寬度根據視口自動調整 */
body {
    width: 100%;
    margin: 0;
    color: white;
    background-color: #333;
  }

  /* header 設置固定高度 */
  header {
    height: 120px;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 24px;
  }

  /* aside 設置浮動並指定寬度為 20% */
  aside {
    width: 20%;
    height: 500px;
    float: left;
    background-color: #555;
    padding: 10px;
    box-sizing: border-box;
  }

  /* section 設置浮動並指定寬度為 80% */
  section {
    width: 80%;
    height: 500px;
    float: left;
    background-color: #666;
    padding: 10px;
    box-sizing: border-box;
  }

  /* footer 設置底部並清除浮動 */
  footer {
    height: 120px;
    clear: both;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
  }

.clearfix::before,/*要自適應高度的父box都加到clearfix類中*/
.clearfix::after{
  content: "";
  display: table;
}
.clearfix::after{/*在父box內部加個子box,清楚浮動的目的是撐開沒指定高度的父box*/
  clear: both;
}

定位佈局#

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位佈局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .container {
            position: relative;
            height: 100%;
            background-color: #f0f0f0;
        }

        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /* 定位第一個盒子：距離容器左上角 50px */
        .box1 {
            top: 50px;
            left: 50px;
        }

        /* 定位第二個盒子：距離容器右下角 50px */
        .box2 {
            bottom: 50px;
            right: 50px;
        }

        /* 定位第三個盒子：容器中心 */
        .box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

</body>
</html>

Multi-column Layout#

多列佈局的用武之地，如橫向滾動的頁面 (小說)

屬性	val	說明
column-width	auto：默認值，自適應長度值：設置列寬	定義每列列寬度
column-count	auto ：默認值；表示就 1 列數值：設置列數	定義分分列列數
columns		集成 column-width 和 column-count 兩個屬性
column-gap		定義列間距
column-rule column-rule-width column-rule-style column-rule-color		定義列邊線 column-rule-width ：單獨設置邊框寬度 column-rule-style ：單獨設置邊框的樣式 column-rule-color：單獨設置邊框的顏色 column-rule ：簡寫
column-span	none ：默認值；表示不跨列 all ：表示跨列	設置跨列大標題
column-fill

div{
  column-width: 200px;
  column-count: 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

div{
  columns: auto 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

Flex 佈局#

屬性	值	說明
display	flex：將容器盒模型作為塊級彈性伸縮盒顯示 inline-flex：將容器盒模型作為內聯級彈性伸縮盒顯示
flex-direction	row ：從左到右排列 row-reverse ：從右到左排列 column ：從上到下排列 column-reverse：從下到上排列	子元素的排列方方向，就是主軸方向設置
flex-wrap	nowrap ：默認值；都在一行或一列顯示，會自動擠壓 wrap ：伸縮項目無法容納時・自動換行，不擠壓 wrap-reverse：伸縮項目無法容納時・自動換行・方向和 wrap 相反
flex-flow		上兩個簡寫
justify-content	flex-start ：子元素左對齊，元素間沒縫隙 flex-end ：子元素右對齊，元素間沒縫隙 center ：子元素以中心點靠齊，元素間沒縫隙 space-between：均勻對齊，剩余空白寬度作為子元素間距，兩側沒縫隙 space-around：均勻對齊，剩余空白寬度作為子元素間距，兩側有縫隙 space-evenly：均勻對齊，剩余空白寬度作為子元素間距，兩側有縫隙，且邊距一樣大	主軸對齊方式 (默認 x 軸)
align-items	flex-start ：頂部對齊 flex-end ：底部對齊 center：居中對齊 baseline ：伸縮項目以基線為基準・清理額外的空間 stretch：默認，拉伸子元素填充整個垂直父 box 空間，當然前提是子元素沒寫高度	交叉軸對齊方式，只有一行和父 box 有高度時生效
align-content	flex-start ：子元素頂部對齊，元素間沒縫隙 flex-end ：子元素底部對齊，元素間沒縫隙 center ：子元素以中心點靠齊，元素間沒縫隙 space-between：均勻對齊，剩余空白寬度作為子元素間距，兩側沒縫隙 space-around：均勻對齊，剩余空白寬度作為子元素間距，兩側有縫隙 space-evenly：均勻對齊，剩余空白寬度作為子元素間距，兩側有縫隙，且邊距一樣大	多行情況下的交叉軸對齊方式
align-self	flex-start ：頂部對齊 flex-end ：底部對齊 center：居中對齊 baseline ：伸縮項目以基線為基準・清理額外的空間 stretch：默認，拉伸子元素填充整個水平父 box 空間，當然前提是子元素沒寫高度	單獨控制子 box 佈局
flex	整數	子元素在主軸上的寬度比例；實現了在主軸上的控件寬度自適應
order		控制伸縮項目出現的順序

<div class="flex-container">
    <p>第一個段落</p>
    <p>第二個段落</p>
    <p>第三個段落</p>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  /*align-content: ;*/
  align-itmes: center;
}

/*.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-itmes: center;
  /*align-content: ;*/
}*/

/*共占用5份,出現順序231*/
p:nth-child(1) {/*占用容器空間的 1 份*/
    flex: 1;/*主軸寬度比1:3:1*/
    order: 2;
    align-self: center;/*第一個子盒子居中*/
}

p:nth-child(2) {
    flex: 3;
    order: 3;
}

p:nth-child(3) {
    flex: 1;
    order: 1;
}

!https://secure2.wostatic.cn/static/sHJpw9ixqsocGYebDGSnX9/image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人主頁</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>歡迎來到我的個人主頁</h1>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於我</a></li>
                <li><a href="#">我的項目</a></li>
                <li><a href="#">聯繫我</a></li>
            </ul>
        </nav>
        <section class="main-content">
            <article class="bio">
                <h2>個人簡介</h2>
                <p>我是一個Web開發者，熱愛編程和技術創新。</p>
            </article>
            <article class="projects">
                <h2>我的項目</h2>
                <ul>
                    <li>項目1</li>
                    <li>項目2</li>
                    <li>項目3</li>
                </ul>
            </article>
            <article class="contact">
                <h2>聯繫方式</h2>
                <p>郵箱: [email protected]</p>
            </article>
        </section>
        <footer class="footer">
            <p>© 2024 我的個人主頁</p>
        </footer>
    </div>
</body>
</html>

style.css：

/* 設置頁面的基本樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 核心容器，使用 flexbox 排版 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 頁眉 */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 導航欄，水平排列，換行 */
.navigation {
    display: flex;
    flex-flow: row wrap; /* 允許換行 */
    justify-content: center; /* 居中對齊 */
    background-color: #333;
}

.navigation ul {
    list-style: none;
    display: flex;
    padding: 10px;
}

.navigation li {
    margin: 0 15px;
}

.navigation a {
    color: white;
    text-decoration: none;
}

/* 主內容區，使用flexbox佈局 */
.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 子元素之間均勻分布 */
    padding: 20px;
    gap: 20px;
}

/* 個人簡介區 */
.bio {
    flex: 1 1 300px; /* 設置可以伸縮的盒子 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.projects {
    flex: 2 1 400px; /* 設置靈活的比例 */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.contact {
    flex: 1 1 300px; /* 設置可以伸縮的盒子 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

/* 頁腳 */
.footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

/* 調整佈局的順序 */
.projects {
    order: -1; /* 使“我的項目”在“個人簡介”前面 */
}

/* 響應式調整 */
@media (max-width: 768px) {
    .navigation {
        flex-direction: column;
    }
    .main-content {
        flex-direction: column;
    }
}

Grid 佈局#

繼承的樣式屬性#

可以在父元素 box 裡 (div) 指定屬性；子元素會繼承，就不需要寫個子元素選擇器指定了；且大多數元素都是有缺省樣式的，可能需先清除樣式

屬性	value	說明	css
color	顏色值	設置元素前景色	1
opacity	0 ~ 1	設置元素的透明度	3
text-align	設置元素在 box 中的水平對齊方式	start 和 end 屬於 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左對齊・默認 right：靠右對齊 center ：居中對齊 justify ：內容兩端對齊 start ：讓文本處於結束的邊界 end：讓文本處於結束的邊界	1,3

//清除默認樣式
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box 樣式#

屬性	value	說明	css
vertical-align	相對基線的距離長度值 / 百分比	box 垂直對齊
box-shadow	hoffset ：陰影的 X 軸偏移 voffset : 陰影的 Y 偏移 blur :(可選) 模糊半徑；是一個長度值，值越大盒子的邊界越模糊。默認值 0, 邊界清晰 spread :(可選) 擴散半徑；, 是一個長度值，正值代表陰影向盒子各個方向延伸擴大，負值代表陰影沿相反方向縮小 color :(可選) 設置陰影的顏色，如果省略，瀏覽器會自行選擇一個顏色 inset:(可選)：默認外陰影，要內陰影這個值是 inset 多值，空格區分	box 陰影，一般拿來做交互響應樣式，這個難調，建議直接複製抄小米，京東	3
outline-color		外圍輪廓顏色	3
outline-offset		輪廓距離元素邊框邊緣的偏移量	3
outline-style		輪廓樣式，和 border-style 一致	3
ontline-witdh		輪廓寬度	3
outline		簡寫	3
cursor	auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll	box 上的光標樣式，左邊一個個試	1

div span {
  vertical-align: -200px;
  box-shadow: 5px 4px 10px 2px gray;/*陰影*/
  /*box-shadow: 5px 4px 10px 2px gray inset;*/ /*內部陰影*/
  outline: 10px double red;/*給box再加個輪廓*/
  cursor: move;
}

字體樣式#

無標題

body{ font-size: 50px;}/*設置父元素字體大小*/
@font-face { font-family: abc; src: url('BrushScriptStd.otf');} /*服務端提供abc字體文件*/
body{
  font-style:;
  font-weight:;
  font-variant:;
  font-size: smaller;/*設置相對父元素字體大小*/
  font-family:楷體,微軟雅黑,宋體;/*有時為兼容很多瀏覽者系統的字體，可以做幾個後備字體*/
  /*font: italic bold normal smaller 楷體;/*以以上順序給值*/
  color: red;
  opacity: 0.5;
}

文本樣式#

屬性名	說明	值	CSS 版本
text-decoration	文本劃線	none：無劃線 underline：文本下劃線 overline：文本上劃線 line-through：刪除線 blink：讓文本進行閃爍・基本不支持了	1
text-transform	英文文本大小寫	none ：將已被轉換大小寫的值恢復到默認狀態 capitalize ：英文首字母大寫 uppercase ：英文轉為大寫 lowercase ：英文轉為小寫	1
text-shadow	給文本添加陰影	四個值描述，eg：`5px 5px 3px black` 第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）	3
text-align	設置文本對齊方式	start 和 end 屬於 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左對齊・默認 right：靠右對齊 center ：居中對齊 justify ：內容兩端對齊 start ：讓文本處於結束的邊界 end：讓文本處於結束的邊界	1,3
white-space	空白處理方式	normal ：默認值，空白符被壓縮，文本自動換行 nowrap ：空白符被壓縮，文本不換行 pre ：空白符被保留・遇到換行符則換行 pre-line ：空白符被壓縮・文本會在排滿或遇換行符換行 pre-wrap：空白符被保留・文本會在排滿或遇換行符換行	1
letter-spacing	字母間距	normal：設置默認間距長度值：比如:"數字"+"px"	1
word-spacing	單詞間距	normal ：設置默認間距長度值：比如:"數字"+"px"	1
line-height	設置行高（行間距）	normal ：設置默認間距長度值：比如:"數字"+"px" 數值：比如：1,2.3 %：比如：200%	1
word-wrap	讓過長的英文單詞斷開	normal ：單詞不断開 break-word：斷開單詞	3
text-indent	文本首行縮進	normal ：設置默認間距長度值：比如:"數字"+"px"	1
vertical-align	sub : 垂直對齊文本的下標 super: 垂直對齊文本的上標	文本垂直對齊

p {
  text-decoration: underline;
  text-transform: uppercase;
  text-shadow: 5px 5px 3px black;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 4px;
  word-spacing: 14px;
  line-height: 200%;
  word-wrap: break-word;
  text-indent: 2rem;
  vertical-align: super;
}

行高垂直居中#

行高 = box 高度

!https://secure2.wostatic.cn/static/xzYi7gmYsYLSrhRywU1mfQ/image.png

<div>中國人</div>
div {
  height: 40px;
  line-height: 40px;
}

邊框樣式#

邊框樣式 border-style，必需聲明；其他兩個屬性可選，，因為本身有默認值

屬性	值	說明	css
border-style border-top-style border-middle-style border-left-style border-right-style	none dashed dotted double groove inset outset ridge solid	沒有邊框破折線邊框圓點線邊框雙線邊框槽線邊框使元素內容具有內嵌效果的邊框使元素內容具有外凸效果的邊框脊線邊框實線邊框
border-width border-top-width border-middle-width border-left-width border-right-width	長度值 / 百分數 thin medium thick	設置邊框的寬度，可選，因為本身有默認值
border-color border-top-color border-middle-color border-left-color border-right-color	顏色值	設置邊框的顏色，可選，因為本身有默認值
border-radius border-top-left-radius border-top-right-radius border-middle-left-radius border-middle-right-radius	長度值或百分比	設置四條邊角的圓角半徑，用於製作圓角控件；`border-radius=50%`製造純圓形控件左上邊角右上邊角左下邊角右下邊角	3
border-image-source		引入背景圖片地址	3
border-image-slice		切割引入背景圖片	3
border-image-width		邊框圖片寬度，可設置上右下左 4 值，上下 / 左右 2 值	3
border-image-outset		邊框背景向外擴張	3
border-image-repeat	stretch : 拉伸填充。默認值 repeat：平鋪填充・當圖片碰到邊界時，如果超過見刺被截斷 round ：平鋪填充・根據邊框尺寸動態調整圖片大小，直至鋪滿邊框 space：平鋪填充・根據邊框尺寸動態調整圖片間距，直至鋪滿邊框	邊框背景圖片的排列方式	3
border-image		上面五個屬性的簡寫方式	3

div { /*單獨設置某邊加前綴即可*/
  border-width: 2px;
  border-style: solid;
  border-color: red;

  border-radius: 10px 20px 30px 40px;

  border-image-source: url(border.png);
  border-image-slice: 27;/*剛好4個圖像*/
  /*border-image-slice: 0 fill;*/
  border-image-width: 81px;
  border-image-outset: 20px;
  border-image-repeat: round;
}

div {
  border: 2px solid red;
  border-radius: 10px;
  /*border-top:*/
  /*border-middle:*/
  /*border-left:*/
  /*border-right:*/
  border-image: url(border.png) 27/27px round;
}

背景樣式#

屬性	值	說明	CSS 版本
background-color	顏色 transparent	設置背景顏色為指定色默認值，設置背景顏色為透明色	1
background-image	none url	批量設置了塊背景，而其中一個不需要背景，可單獨設置 none 取消背景通過 URL 設置背景圖片	1/3
background-repeat	repeat-x repeat-y repeat no-repeat	水平方向平鋪圖像垂直方向平鋪圖像水平和垂直方向同時平鋪圖像讓背景圖片只顯示一個，不平鋪	1/3
background-attachment	scroll fixed	默認值，背景固定在元素上，不會隨著內容一起滾動背景固定在視窗上，內容滾動時背景不動，可用於水印效果	1/3
background-position	長度值 / 百分比 top left right bottom center	使用長度值偏移圖片的位置將背景圖片定位到元素頂部	3
background-size	長度值 / 百分比 auto cover contain	CSS 長度值，比如 px、em 默認值，圖像以本尺寸顯示等比例縮放圖像，使圖像至少覆蓋容器，但有可能超出容器等比例縮放圖像，使其寬度、高度中較大者與容器橫向或縱向重合	3
background-origin	border-box padding-box content-box	在元素盒子內部繪製背景在內邊距盒子內部繪製背景在內容盒子內部繪製背景	3
background-clip	border-box padding-box content-box	在元素盒子內部裁剪背景在內邊距盒子內部裁剪背景在內容黑子內部裁剪背景	3
background		背景圖片簡寫方式	1

div {
  background-color: silver;
  background-image: url(loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left;/*20px 20px;*/
  background-size: auto;
  background-origin: content-box;
  background-clip: padding-box;
}

div {
  width: 400px;
  height: 300px;
  border: 10px dashed red;
  padding: 50px;
  background: silver url(img.png) no-repeat scroll left top/100% border-box content-box
}

表格樣式#

屬性值說明版本

border - collapse separate : 默認值，單元格邊框獨立 collapse : 單元格相鄰邊框被合併 2

border - spacing 長度值相鄰單元格邊框間距；border-collapse: separate時有效。邊框獨立是設置間距前提 2

caption - side top：默認值，標題在上方 bottom：標題在下方表格標題的位置 2

empty - cells show ：默認值，顯示邊框 hide ：不顯示邊框空單元格是否顯示邊框 2

table - layout auto ：默認值，內容過長時・拉伸整個單元格 fixed：內容過長時不拉伸整個單元格指定表格的佈局樣式 2

vertical-align

baseline : 內容對象與基線對齊 top : middle : bottom:

中的

單元格，可用 html 文本標籤的 text-align 屬性實現水平對齊；而垂直對齊可用 CSS 樣式屬性 vertical-align 實現

table {
  border-collapse: separate;
  border-spacing: 10px;
  caption-side: top;
  empty-cells: hide;
  table-layout: fixed;
  vertical-align: bottom;
}

列表樣式#

屬性	值	說明	CSS 版本
list - style - type	none : 沒有標記 disc : 實心圓 circle : 空心圓 square : 實心方塊 decimal : 阿拉伯數字 lower-roman : 小寫羅馬數字 upper-roman : 大寫羅馬數字 lower-alpha : 小寫英文字母 upper-roman: 大寫英文字母	列表項前綴樣式	1/2
list - style - position	outside ：默認值，標記位於內容框外部 inside ：標記位於內容框內部	排列的相對位置	1
list - style - image	none : 不使用圖像 url: 通過 url 使用圖像	圖像作為列表前綴	1
list - style	簡寫屬性	列表的簡寫形式	1

ul {
  list-style-type: square;
  list-style-position: inside;
  /*list-style-image: url(bullet.png);*/
}

ul {
  list-style: lower-alpha inside url(bullet.png);
}

變形效果#

可用於製作元素交互動畫，比如鼠標放上去，元素有個變形反饋

2 維變換#

屬性值	value	說明
transform	translate (x,y)：平移，其中 y 可以省略，表示垂直方向沒有位移 translateX (x)：元素水平方向平移 x translateY (y)：元素垂直方向移平移 y rotate (angle)：順時針旋轉 angle 角度 scale (x,y)：元素水平方向縮放比 x ，垂直方向縮放比 y ， y 省略時表示 y 和 x 有相同縮放比 scaleX (x)：元素水平方向縮放比為 x scaleY (y)：元素垂直方向縮放比為 y skew (angleX angleY)：元素沿 x 軸方向傾斜 angleX 度，沿 y 軸方向傾 angleY 度， angleY 可省略，表示 y 軸方向不傾斜 skewX (angleX)：元素沿 x 軸方向傾斜 angleX 度 skewY (angleY)：元素沿 y 軸方向傾斜 angleY 度 matrix (a,b,c,d,e,f)：2D 變換簡寫	x y 值可以是長度單位或百分比； angle 單位通常是 deg ，1 deg = 1 度 x y 取值是數字，默認值是 1; 大於 1，放大；小於 1，縮小

div{
  transform: translate(20px,30px);/*設置元素水平和垂直方向的偏移*/
}

div{
  transform:rotate(45deg);/*設置元素順時針旋轉45度*/
}

div{
  transform: scale(2,1);/*設置元素水平方向縮放比為2，垂直方向縮放比為1*/
}

div{
  transform: skewX(30deg);/*設置元素沿著x軸傾斜*/
}

div{
  transform: matrix(a,b,c,d,e,f);
}

3 維變換#

屬性	屬性值	說明
transform	translate3d (x,y,z)：3D 方式平移元素，設置 x、y 和 z 軸 translateZ (z)：設置 3D 方式平移元素的 z 軸 scale3d (x,y,z)：3D 方式縮放一個元素 scaleZ (z)：設置 3D 方式縮放元素的 z 軸 rotate3d (x,y,z,a)：3D 旋轉，a 表示角度，xyz 是 0 或 1 之間的數值 rotateX (a)：分別設置 3D 方式的旋轉元素的 x、y 和 z 軸 rotateY (a)： rotateZ (a)： perspective (長度值)：設置一個透視投影矩陣 matrix3d (多個值)：定義一個矩陣	在元素中設置透視的值 perspective (長度值)，但它還是和在父元素設置有一定不同。因為父元素整個作為透視，而元素自己作為透視，導致不同
transform-style	flat : 默認值；表示所有子元素在 2D 平面呈現 preserve-3d: 表示子元素在 3D 空間中呈現
perspective	none ：默認值；表示無限的角度來看 3D 物體・但看上去是平的長度值：接受一個長度單位大於 0 的值，其單位不能為百分比。值越大・角度出現的越遠，就好比你人離遠一點看物體。值越小・正相反。	設置查看者的位置，並將可視內容映射到一個 2D 平面上；不太懂透視
perspective-origin	百分數值：指定元素 x 軸或 y 軸的起點長度值：指定距離 left：指定 x 軸的位置 center right top：指定 y 軸的位置 center bottom	參考點

<div id="fathe">
    <img id="son" src="img.png" alt="" />
</div>

#father {
  transform-style: preserve-3d; /*設置到3d變換元素的父元素*/
  perspective: 1000px;/*設置查看者的距離位置，一般設置在元素的父元素上;再配合後面的功能屬性和變形配置，才能看到效果*/
}

#son {
  transform: translate3d(300px,100px,240px);
  transform: scale3d(1,1,1.5) rotateX(45deg);
  transform: rotate3d(1,0,0,45deg);
  /*transform: perspective(1000px) rotateY(45deg);*/
  perspective-origin: top right;/*設置為右上角*/
}

過渡效果#

過渡樣式屬性	樣式類型
background-color	color (顏色)
background-image	only gradients (漸變)
background-position	percentage, length (百分比，長度值)
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

屬性	val	說明
transition-property	none：不支持過渡樣式屬性設置 all：默認值；元素可設置所有過渡樣式屬性指定可設置的過渡樣式屬性	指定過渡或動態模擬的 CSS 屬性
transition-duration		指定完成過渡所需的時間
transition-timing-function	ease ：默認值，元素樣式從初始由快到慢過渡到終止態。等同貝塞爾曲線 (0.25,0.1,0.25, 1.0) linear : 元素樣式從初始態恆速過渡到終止態。等同貝塞爾曲線 (0.0,0.0,1.0,1.0) ease-in ：元素樣式從初始態加速過渡到終止態。等同於貝塞爾曲線 (0.42,0,1.0,1.0) ease-out ：元素樣式從初始態減速過渡到終止態。等同於貝塞爾曲線 (0,0,0.58,1.0) ease-in-out ：樣式從初始態過渡到終止態時，先加速，再減速。等同貝塞爾曲線 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定義貝塞爾 steps (n,type)：跳躍式過渡；n 表示跳躍幾次。type 為 start 或 end (可選)。表示開始 / 結束時跳躍	指定過渡函數；決定效果變化的速度
transition-delay		觸發事件後，在設置的延遲時間後再執行過渡延遲效果。如果有多個樣式效果，可設置多個延遲時間，以空格隔開
transition		簡寫

div {/*原始樣式*/
  width: 200px; height: 200px; border: 1px solid green;
}

div:hover{/*CSS 動作:hover、:focus、:active、:checked 等*/
  background-color: black; color: white; margin-left: 50px;

  transition-property: background-color, color, margin-left;/*背景和顏色作為過渡樣式*/
  /*transition-property: all*/
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 0s, 1s, 0s;
}

/*div:hover{
  transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
}*/

/*div:hover{
  transition: all 1s ease 0s;
}*/

動畫效果#

屬性	val	說明
animation-name	none 動畫名稱	指定動畫名，動畫名對應一個 @keyframes 规则。CSS 加載時執行 animation-name 指定的動畫
animation-duration		動畫播放所需時間；s 或 ms 為單位
animation-timing-function	ease ：默認值，元素樣式從初始由快到慢過渡到終止態。等同貝塞爾曲線 (0.25,0.1,0.25, 1.0) linear : 元素樣式從初始態恆速過渡到終止態。等同貝塞爾曲線 (0.0,0.0,1.0,1.0) ease-in ：元素樣式從初始態加速過渡到終止態。等同於貝塞爾曲線 (0.42,0,1.0,1.0) ease-out ：元素樣式從初始態減速過渡到終止態。等同於貝塞爾曲線 (0,0,0.58,1.0) ease-in-out ：樣式從初始態過渡到終止態時，先加速，再減速。等同貝塞爾曲線 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定義貝塞爾	動畫播放函數
animation-delay		事件觸發後開始播放的延遲時間
animation-iteration-count	次數：默認值為 1 infinite ：表示無限次循環	動畫循環播放次數
animation-direction	normal : 默認值，每次播放向前 alternate : 一次向前，一次向後，一次向前・一次向後這樣交替	動畫播放方向
animation-play-state		控制動畫的播放狀態
animation-fill-mode	none ：默認值；表示按預期進行和結束 forwards ：動畫結束後繼續應用最後尖鍵幀位置，即不返回 backforwards：動畫結束後迅速應