原手寫筆記
-------------------------------------------------------------------------------------------------------
css選擇器的種類有很多種。這里只介紹幾種常用的選擇器。
1. 標簽選擇器標簽選擇器是最基本的選擇器，它可以選擇所有的標簽。例如：p {color: red;}這個選擇器可以選擇所有的p標簽。標簽選擇器的優先級為1。標簽選擇器的優先級為1。<p></p>
2. 類選擇器類選擇器是通過class屬性來選擇元素的。例如：.red {color: red;}這個選擇器可以選擇所有的class屬性為red的元素。類選擇器的優先級為10。類選擇器的優先級為10。可以這樣來調用<div class = "red"><p>hello world!</p></div>
3. id選擇器id選擇器是通過id屬性來選擇元素的。例如：#red {color: red;}這個選擇器可以選擇所有的id屬性為red的元素。id選擇器的優先級為100。id選擇器的優先級為100。id選擇器只能被調用一次。可以這樣來調用<div id = "red"><p>hello world!</p></div>
4. 通配符選擇器通配符選擇器是通過*來選擇元素的。例如：* {color: red;}這個選擇器可以選擇所有的元素。通配符選擇器的優先級為0。通配符選擇器的優先級為0。通配符選擇器只能被調用一次。可以這樣來調用<div><p>hello world!</p></div>
5. 后代選擇器后代選擇器是通過空格來選擇元素的。例如：div p {color: red;}這個選擇器可以選擇所有的p標簽,但是前提是p標簽是div標簽的后代。后代選擇器的優先級為10。后代選擇器的優先級為10。可以這樣來調用<div><p>hello world!</p></div><p>hello world!</p>
6. 子選擇器子選擇器是通過>來選擇元素的。例如：div > p {color: red;}這個選擇器可以選擇所有的p標簽,但是前提是p標簽是div標簽的子元素。子選擇器的優先級為10。子選擇器的優先級為10。可以這樣來調用<div><p>hello world!</p></div><p>hello world!</p>
7. 相鄰選擇器相鄰選擇器是通過+來選擇元素的。例如：div + p {color: red;}這個選擇器可以選擇所有的p標簽,但是前提是p標簽是div標簽的相鄰元素。相鄰選擇器的優先級為10。相鄰選擇器的優先級為10。可以這樣來調用<div><p>hello world!</p></div><p>hello world!</p>
8. 屬性選擇器屬性選擇器是通過[]來選擇元素的。例如：[href] {color: red;}這個選擇器可以選擇所有的href屬性的元素。屬性選擇器的優先級為10。屬性選擇器的優先級為10。可以這樣來調用<div href = "https://blog.csdn.net/W2799401288?type=blog"></div>
9. 偽類選擇器偽類選擇器是通過:來選擇元素的。例如：a:hover {color: red;}這個選擇器可以選擇所有的a標簽,但是前提是鼠標懸停在a標簽上。偽類選擇器的優先級為10。偽類選擇器的優先級為10。可以這樣來調用<a href = "URL_ADDRESS <a href = "https://blog.csdn.net/W2799401288?type=blog">hello world!</a><a href = "URL_ADDRESS">hello world!</a>
10. 偽元素選擇器偽元素選擇器是通過::來選擇元素的。例如：p::first-letter {color: red;}這個選擇器可以選擇所有的p標簽的第一個字母。偽元素選擇器的優先級為10。偽元素選擇器的優先級為10。可以這樣來調用<p>hello world!</p><p>hello world!</p>
11. 選擇器的優先級選擇器的優先級是指選擇器的權重。選擇器的優先級是由選擇器的種類和數量來決定的。
12. 選擇器的組合選擇器的組合是指選擇器的種類和數量的組合。例如：div p {color: red;}這個選擇器可以選擇所有的p標簽,但是前提是p標簽是div標簽的后代。選擇器的組合的優先級是由選擇器的種類和數量來決定的。可以這樣來調用<div><p>hello world!</p></div>
13. 選擇器的繼承選擇器的繼承是指選擇器的種類和數量的繼承。例如：div p {color: red;}這個選擇器可以選擇所有的p標簽,但是前提是p標簽是div標簽的后代。選擇器的繼承的優先級是由選擇器的種類和數量來決定的。可以這樣來調用<div><p>hello world!</p></div>-------------------------------------------------------------------------------------------------------背景圖片的設置 以<div></div>為容器為例
background-image: url("圖片路徑");//設置背景圖片的路徑
background-repeat: no-repeat;//設置背景圖片的重復方式,默認是repeat,即重復
background-position: right top;//設置背景圖片的位置,默認是left top,即左上角
background-attachment: fixed;//設置背景圖片的滾動方式,默認是scroll,即滾動
background-color: #4682B4;//設置背景圖片的顏色,默認是transparent,即透明
background: #4682B4 url("圖片路徑") no-repeat right top;//設置背景圖片的顏色,重復方式,位置,滾動方式
background-size: 100% 100%;//設置背景圖片的大小,默認是auto,即自動
background-size: cover;//設置背景圖片的大小,即覆蓋整個元素
background-size: contain;//設置背景圖片的大小,即包含整個元素
background-size: 100px 100px;//設置背景圖片的大小,即指定寬度和高度
background-size: 100% auto;//設置背景圖片的大小,即指定寬度和高度,高度為auto,即自動
background-size: auto 100%;//設置背景圖片的大小,即指定寬度和高度,寬度為auto,即自動div {width: 1000px;height: 1000px;background-image: url("../image/douyin.png");background-repeat: no-repeat;background-size: 100%;//設置背景圖片的大小,即覆蓋整個父元素backgroune-size的參數也可以是cover,在不改變原圖片比例的情況下，即盡可能覆蓋整個父元素。background-position center;//設置背景圖片的位置,即居中，可以決定圖片渲染的位置。定位圖片左上角渲染的位置。position 的參數也可以是top,bottom,left,right,即相對于父元素的位置。包括下方方位left top left cebterleft bottomright topright centerright bottomcenter topcenter centercenter bottom或者是百分比，即相對于父元素的位置。例如：background-position: 50% 50%;//設置背景圖片的位置,即居中background-position: 50% 0%;//設置背景圖片的位置,即頂部
-------------------------------------------------------------------------------------------------------
}
關于文本屬性
-------------------------------------------------------------------------------------------------------
文本的垂直對齊方式
vertical-align: baseline;//設置文本的垂直對齊方式,即基線
vertical-align: sub;//設置文本的垂直對齊方式,即下標
vertical-align: super;//設置文本的垂直對齊方式,即上標
vertical-align: text-top;//設置文本的垂直對齊方式,即文本頂部
vertical-align: text-bottom;//設置文本的垂直對齊方式,即文本底部
vertical-align: middle;//設置文本的垂直對齊方式,即中間
vertical-align: top;//設置文本的垂直對齊方式,即頂部
vertical-align: bottom;//設置文本的垂直對齊方式,即底部
vertical-align: initial;//設置文本的垂直對齊方式,即初始值
vertical-align: inherit;//設置文本的垂直對齊方式,即繼承
-------------------------------------------------------------------------------------------------------
文本對齊方式
text-align: center;//設置文本的對齊方式,即居中
text-align: left;//設置文本的對齊方式,即左對齊
text-align: right;//設置文本的對齊方式,即右對齊
text-align: justify;//設置文本的對齊方式,即兩端對齊
-------------------------------------------------------------------------------------------------------
文本首行縮進
text-indent: 2em;//設置文本的縮進,即2個字符的縮進
text-indent: 20px;//設置文本的縮進,即20像素的縮進
text-indent: 20%;//設置文本的縮進,即20%的縮進
-------------------------------------------------------------------------------------------------------
文本劃線
text-decoration: underline;//設置文本的下劃線,即下劃線
text-decoration: overline;//設置文本的上劃線,即上劃線
text-decoration: line-through;//設置文本的刪除線,即刪除線
text-decoration: none;//無
-------------------------------------------------------------------------------------------------------
文本大小寫
text-transform: uppercase;//設置文本的大寫,即大寫
text-transform: lowercase;//設置文本的小寫,即小寫
text-transform: capitalize;//設置文本的首字母大寫,即首字母大寫
text-transform: none;//無
-------------------------------------------------------------------------------------------------------
文本行高
line-height: 1.5;//設置行高,即1.5倍
line-height: 1.5em;//設置行高,即1.5倍
line-height: 1.5px;//設置行高,即1.5像素
line-height: 1.5%;//設置行高,即1.5%
-------------------------------------------------------------------------------------------------------
關于字體屬性
font-family: Arial, Helvetica, sans-serif;//設置字體,即Arial,Helvetica,sans-serif
font-size: 16px;//設置字體大小,即16像素
font-size: 16em;//設置字體大小,即16倍
font-size: 16%;//設置字體大小,即16%
font-weight: bold;//設置字體粗細,即加粗
font-weight: normal;//設置字體粗細,即正常
font-weight: 100;//設置字體粗細,即100
-------------------------------------------------------------------------------------------------------
邊框樣式
border: 1px solid black;//設置邊框,即1像素實線黑色
border: 1px dotted black;//設置邊框,即1像素點線黑色
border: 1px dashed black;//設置邊框,即1像素虛線黑色
border: 1px double black;//設置邊框,即1像素雙實線黑色
border: 1px groove black;//設置邊框,即1像素溝槽黑色
border: 1px ridge black;//設置邊框,即1像素脊線黑色
border: 1px inset black;//設置邊框,即1像素內凹黑色
border: 1px outset black;//設置邊框,即1像素外凸黑色
border: 1px none black;//設置邊框,即無邊框
border: 1px hidden black;//設置邊框,即隱藏邊框
-------------------------------------------------------------------------------------------------------
將雙邊框折疊成一條邊框
border-collape : collapse;//設置邊框折疊,即折疊
border-collape : separate;//設置邊框折疊,即不折疊
border-collape : initial;//設置邊框折疊,即初始值
border-collape : inherit;//設置邊框折疊,即繼承
-------------------------------------------------------------------------------------------------------
邊框顏色
border-color: red;//設置邊框顏色,即紅色
border-color: #FF0000;//設置邊框顏色,即紅色
border-color: rgb(255, 0, 0);//設置邊框顏色,即紅色
border-color: rgba(255, 0, 0, 0.5);//設置邊框顏色,即紅色
也可以針對某個方向
border-top-color: red;//設置上邊邊框顏色,即紅色
border-right-color: red;//設置右邊邊框顏色,即紅色
border-bottom-color: red;//設置下邊邊框顏色,即紅色
border-left-color: red;//設置左邊邊框顏色,即紅色
或者省略寫法
border-color: red red red red;//設置上邊,右邊,下邊,左邊邊框顏色,即紅色
border-color: red red red;//設置上邊,右邊,下邊邊框顏色,即紅色
border-color: red red;//設置上邊,下邊邊框顏色,即紅色
border-color: red;//設置上邊,右邊,下邊,左邊邊框顏色,即紅色
-------------------------------------------------------------------------------------------------------
邊框寬度
border-width: 1px;//設置邊框寬度,即1像素
border-width: 1em;//設置邊框寬度,即1倍
border-width: 1%;//設置邊框寬度,即1%
也可以針對某個方向
border-top-width: 1px;//設置上邊邊框寬度,即1像素
border-right-width: 1px;//設置右邊邊框寬度,即1像素
border-bottom-width: 1px;//設置下邊邊框寬度,即1像素
border-left-width: 1px;//設置左邊邊框寬度,即1像素
或者省略寫法
border-width: 1px 1px 1px 1px;//設置上邊,右邊,下邊,左邊邊框寬度,即1像素
border-width: 1px 1px 1px;//設置上邊,右邊,下邊邊框寬度,即1像素
border-width: 1px 1px;//設置上邊,下邊邊框寬度,即1像素
-------------------------------------------------------------------------------------------------------
邊框內邊距
padding: 10px;//設置內邊距,即10像素
padding: 10em;//設置內邊距,即10倍
padding: 10%;//設置內邊距,即10%
也可以針對某個方向
padding-top: 10px;//設置上邊距,即10像素
padding-right: 10px;//設置右邊距,即10像素
padding-bottom: 10px;//設置下邊距,即10像素
padding-left: 10px;//設置左邊距,即10像素
或者省略寫法
padding: 10px 10px 10px 10px;//設置上邊距,右邊距,下邊距,左邊距,即10像素
padding: 10px 10px 10px;//設置上邊距,右邊距,下邊距,即10像素
padding: 10px 10px;//設置上邊距,下邊距,即10像素
padding: 10px;//設置上邊距,右邊距,下邊距,左邊距,即10像素
-------------------------------------------------------------------------------------------------------
邊框外邊距
margin: 10px;//設置外邊距,即10像素
margin: 10em;//設置外邊距,即10倍
margin: 10%;//設置外邊距,即10%
也可以針對某個方向
margin-top: 10px;//設置上邊距,即10像素
margin-right: 10px;//設置右邊距,即10像素
margin-bottom: 10px;//設置下邊距,即10像素
margin-left: 10px;//設置左邊距,即10像素
或者省略寫法
margin: 10px 10px 10px 10px;//設置上邊距,右邊距,下邊距,左邊距,即10像素
margin: 10px 10px 10px;//設置上邊距,右邊距,下邊距,即10像素
margin: 10px 10px;//設置上邊距,下邊距,即10像素
margin: 10px;//設置上邊距,右邊距,下邊距,左邊距,即10像素
-------------------------------------------------------------------------------------------------------
邊框圓角
border-radius: 10px;//設置圓角,即10像素
border-radius: 10em;//設置圓角,即10倍
border-radius: 10%;//設置圓角,即10%
也可以針對某個方向
border-top-left-radius: 10px;//設置左上圓角,即10像素
border-top-right-radius: 10px;//設置右上圓角,即10像素
border-bottom-left-radius: 10px;//設置左下圓角,即10像素
border-bottom-right-radius: 10px;//設置右下圓角,即10像素
或者省略寫法
border-radius: 10px 10px 10px 10px;//設置左上圓角,右上圓角,右下圓角,左下圓角,即10像素
border-radius: 10px 10px 10px;//設置左上圓角,右上圓角,右下圓角,即10像素
border-radius: 10px 10px;//設置左上圓角,右下圓角,即10像素
border-radius: 10px;//設置左上圓角,右上圓角,左下圓角,右下圓角,即10像素
-------------------------------------------------------------------------------------------------------
邊框陰影
box-shadow: 10px 10px 5px #888888;//設置陰影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 inset;//設置陰影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 outset;//設置陰影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px;//設置陰影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px 10px;//設置陰影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px 10px 10px;//設置陰影,即10像素10像素5像素888888
-------------------------------------------------------------------------------------------------------
CSS盒子模型
CSS盒子模型是指元素的內容、內邊距、邊框和外邊距所組成的盒子。
CSS盒子模型的內容是指元素的文本或圖像。
CSS盒子模型的內邊距是指元素的內容與邊框之間的空間。
CSS盒子模型的邊框是指元素的內邊距與外邊距之間的空間。
CSS盒子模型的外邊距是指元素與其他元素之間的空間。
CSS盒子模型的寬度是指元素的內容、內邊距和邊框的寬度之和。
CSS盒子模型的高度是指元素的內容、內邊距和邊框的高度之和。
CSS盒子模型的寬度和高度可以通過width和height屬性來設置。
-------------------------------------------------------------------------------------------------------
CSS3彈性盒子內容
CSS3彈性盒子由display屬性和flex屬性組成。
display屬性用于指定元素的顯示方式。
flex屬性用于指定元素的彈性布局方式。
彈性容器內包含了一個或多個彈性子元素。
彈性盒子只改變彈性布局，不改變渲染方式。
給盒子display:flex;后，盒子就變成了彈性盒子。
-------------------------------------------------------------------------------------------------------
CSS3彈性盒子的屬性
flex-direction屬性用于指定彈性子元素的排列方向。
排列方向有四種：
row:從左到右排列
row-reverse:從右到左排列
column:從上到下排列
column-reverse:從下到上排列 這兩個垂直方向的排列方向是最常用的
-------------------------------------------------------------------------------------------------------
flex-wrap屬性用于指定彈性子元素的換行方式。
換行方式有兩種：
nowrap:不換行
wrap:換行
-------------------------------------------------------------------------------------------------------
justify-content屬性用于指定彈性子元素在主軸上的對齊方式。
對齊方式有五種：
flex-start:從主軸起點開始
flex-end:從主軸終點開始
center:居中
space-between:兩端對齊
space-around:每個子元素兩側的間隔相等
-------------------------------------------------------------------------------------------------------
指定justify-content和align-items的center之后實現上下左右都居中。
-------------------------------------------------------------------------------------------------------
align-items屬性用于指定彈性子元素在交叉軸上的對齊方式。
對齊方式有五種：
flex-start:從交叉軸起點開始
flex-end:從交叉軸終點開始
center:居中
baseline:基線對齊
stretch:拉伸
-------------------------------------------------------------------------------------------------------
上述的彈性內容都是針對彈性容器（父元素）的，而不是針對彈性子元素的。
-------------------------------------------------------------------------------------------------------
flex-grow
flex-grow屬性用于指定彈性子元素的放大比例。
放大比例默認為,即如果存在剩余空間，也不放大。
如果所有子元素的flex-grow屬性都為1,則它們將等分剩余空間（如果有的話）。
如果一個子元素的flex-grow屬性為2,其他子元素的flex-grow屬性都為1,則前者占據的剩余空間將比其他子元素多一倍。
可以當成所占權重來理解。
分別為每個子元素設置flex-grow屬性,可以讓它們按照指定的比例來分配剩余空間。
box1{flex-grow:2} box2{flex-grow:1} box3{flex-grow:1} 則第一個盒子占50%,剩余兩個分別占25%。
-------------------------------------------------------------------------------------------------------
將知識點優化分離
1. CSS 選擇器
CSS 選擇器的種類有很多種，這里介紹幾種常用的選擇器：
- 標簽選擇器：最基本的選擇器，能選擇所有相同標簽的元素。例如?
p { color: red; }?可以選擇所有的?p?標簽，其優先級為?1。
/* 標簽選擇器代碼示例 */
p {color: red;
}
- 類選擇器：通過?
class?屬性來選擇元素。如?.red { color: red; }?可選擇所有?class?屬性為?red?的元素，優先級為?10。調用示例：<div class = "red"><p>hello world!</p></div>。
/* 類選擇器代碼示例 */
.red {color: red;
}
- id 選擇器：依據?
id?屬性選擇元素。像?#red { color: red; }?會選擇所有?id?屬性為?red?的元素，優先級為?100，且?id?選擇器只能被調用一次。調用示例：<div id = "red"><p>hello world!</p></div>。
/* id選擇器代碼示例 */
#red {color: red;
}
- 通配符選擇器：使用?
*?來選擇所有元素。例如?* { color: red; }，優先級為?0，只能被調用一次。調用示例：<div><p>hello world!</p></div>。
/* 通配符選擇器代碼示例 */
* {color: red;
}
- 后代選擇器：通過空格來選擇元素，如?
div p { color: red; }?能選擇所有作為?div?標簽后代的?p?標簽，優先級為?10。調用示例：<div><p>hello world!</p></div><p>hello world!</p>。
/* 后代選擇器代碼示例 */
div p {color: red;
}
- 子選擇器：利用?
>?選擇元素，div > p { color: red; }?可選擇所有作為?div?標簽子元素的?p?標簽，優先級為?10。調用示例：<div><p>hello world!</p></div><p>hello world!</p>。
/* 子選擇器代碼示例 */
div > p {color: red;
}
- 相鄰選擇器：借助?
+?選擇元素，div + p { color: red; }?會選擇所有作為?div?標簽相鄰元素的?p?標簽，優先級為?10。調用示例：<div><p>hello world!</p></div><p>hello world!</p>。
/* 相鄰選擇器代碼示例 */
div + p {color: red;
}
- 屬性選擇器：通過?
[]?來選擇元素，[href] { color: red; }?能選擇所有具有?href?屬性的元素，優先級為?10。調用示例：<div href = "https://blog.csdn.net/W2799401288?type=blog"></div>。
/* 屬性選擇器代碼示例 */
[href] {color: red;
}
- 偽類選擇器：使用?
:?來選擇元素，a:hover { color: red; }?可選擇所有鼠標懸停在上面的?a?標簽，優先級為?10。調用示例：<a href = "https://blog.csdn.net/W2799401288?type=blog">hello world!</a>。
/* 偽類選擇器代碼示例 */
a:hover {color: red;
}
- 偽元素選擇器：通過?
::?來選擇元素，p::first-letter { color: red; }?會選擇所有?p?標簽的第一個字母，優先級為?10。調用示例：<p>hello world!</p>。
/* 偽元素選擇器代碼示例 */
p::first-letter {color: red;
}
- 選擇器的優先級：選擇器的優先級指的是選擇器的權重，由選擇器的種類和數量決定。
/* 選擇器優先級示例，假設id選擇器覆蓋類選擇器 */
#myId {color: blue; /* id選擇器，優先級100 */
}
.myClass {color: red; /* 類選擇器，優先級10 */
}
- 選擇器的組合：即選擇器的種類和數量的組合，如?
div p { color: red; }，其優先級同樣由選擇器的種類和數量決定。調用示例：<div><p>hello world!</p></div>。
/* 選擇器組合代碼示例，后代選擇器 */
div p {color: red;
}
- 選擇器的繼承：指選擇器的種類和數量的繼承，例如?
div p { color: red; }，其優先級由選擇器的種類和數量決定。調用示例：<div><p>hello world!</p></div>。
/* 選擇器繼承代碼示例，假設p標簽繼承div的某些屬性 */
div {font-family: Arial;
}
div p {color: red;
}
2. 背景圖片的設置
以?<div></div>?為容器為例，相關屬性有：
background-image: url("圖片路徑");：設置背景圖片的路徑。background-repeat: no-repeat;：設置背景圖片的重復方式，默認是?repeat（即重復）。background-position: right top;：設置背景圖片的位置，默認是?left top（即左上角）。background-attachment: fixed;：設置背景圖片的滾動方式，默認是?scroll（即滾動）。background-color: #4682B4;：設置背景圖片的顏色，默認是?transparent（即透明）。background: #4682B4 url("圖片路徑") no-repeat right top;：可同時設置背景圖片的顏色、重復方式、位置、滾動方式。background-size: 100% 100%;：設置背景圖片的大小，默認是?auto（即自動）。還有?cover（覆蓋整個元素）、contain（包含整個元素）等取值，也可以指定具體像素值如?100px 100px?或單方向?auto?如?100% auto、auto 100%。
/* 背景圖片設置代碼示例 */
div {width: 1000px;height: 1000px;background-image: url("../image/douyin.png");background-repeat: no-repeat;background-size: 100%;background-position: center;background-color: #f0f0f0;background-attachment: fixed;
}
3. 文本屬性
- 文本的垂直對齊方式：
vertical-align: baseline;：設置文本的垂直對齊方式為基線。vertical-align: sub;：設置為下標。vertical-align: super;：設置為上標。vertical-align: text-top;：設置為文本頂部。vertical-align: text-bottom;：設置為文本底部。vertical-align: middle;：設置為中間。vertical-align: top;：設置為頂部。vertical-align: bottom;：設置為底部。vertical-align: initial;：設置為初始值。vertical-align: inherit;：設置為繼承。
/* 文本垂直對齊方式代碼示例 */
p {vertical-align: middle;display: inline-block; /* 為了顯示垂直對齊效果，設置為行內塊元素 */height: 50px;
}
- 文本對齊方式：
text-align: center;：設置文本的對齊方式為居中。text-align: left;：設置為左對齊。text-align: right;：設置為右對齊。text-align: justify;：設置為兩端對齊。
/* 文本對齊方式代碼示例 */
p {text-align: center;
}
- 文本首行縮進：
text-indent: 2em;：設置文本的縮進為 2 個字符的縮進。text-indent: 20px;：設置為 20 像素的縮進。text-indent: 20%;：設置為 20% 的縮進。
/* 文本首行縮進代碼示例 */
p {text-indent: 2em;
}
- 文本劃線：
text-decoration: underline;：設置文本的下劃線。text-decoration: overline;：設置文本的上劃線。text-decoration: line-through;：設置文本的刪除線。text-decoration: none;：無劃線。
/* 文本劃線代碼示例 */
p {text-decoration: underline;
}
- 文本大小寫：
text-transform: uppercase;：設置文本為大寫。text-transform: lowercase;：設置為小寫。text-transform: capitalize;：設置文本的首字母大寫。text-transform: none;：無變換。
/* 文本大小寫代碼示例 */
p {text-transform: capitalize;
}
- 文本行高：
line-height: 1.5;：設置行高為 1.5 倍。line-height: 1.5em;：設置行高為 1.5 倍（相對于字體大小）。line-height: 1.5px;：設置行高為 1.5 像素。line-height: 1.5%;：設置行高為 1.5%（相對于父元素高度）。
/* 文本行高代碼示例 */
p {line-height: 1.5;
}
4. 字體屬性
font-family: Arial, Helvetica, sans-serif;：設置字體為?Arial，若不可用則依次嘗試?Helvetica、sans-serif。font-size: 16px;：設置字體大小為 16 像素。font-size: 16em;：設置字體大小為 16 倍（相對于父元素字體大小）。font-size: 16%;：設置字體大小為父元素字體大小的 16%。font-weight: bold;：設置字體粗細為加粗。font-weight: normal;：設置字體粗細為正常。font-weight: 100;：設置字體粗細為 100（取值范圍 100-900）。
/* 字體屬性代碼示例 */
p {font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;
}
5. 邊框樣式
border: 1px solid black;：設置邊框為 1 像素實線黑色。border: 1px dotted black;：設置為 1 像素點線黑色。border: 1px dashed black;：設置為 1 像素虛線黑色。border: 1px double black;：設置為 1 像素雙實線黑色。border: 1px groove black;：設置為 1 像素溝槽黑色。border: 1px ridge black;：設置為 1 像素脊線黑色。border: 1px inset black;：設置為 1 像素內凹黑色。border: 1px outset black;：設置為 1 像素外凸黑色。border: 1px none black;：設置為無邊框。border: 1px hidden black;：設置為隱藏邊框。
/* 邊框樣式代碼示例 */
div {border: 1px solid black;
}
6. 將雙邊框折疊成一條邊框
border-collapse : collapse;：設置邊框折疊（即折疊）。border-collapse : separate;：設置邊框不折疊。border-collapse : initial;：設置為初始值。border-collapse : inherit;：設置為繼承。
/* 邊框折疊代碼示例 */
table {border-collapse: collapse;border: 1px solid black;
}
th,
td {border: 1px solid black;
}
7. 邊框顏色
border-color: red;：設置邊框顏色為紅色。border-color: #FF0000;：設置為紅色（十六進制表示）。border-color: rgb(255, 0, 0);：設置為紅色（RGB 表示）。border-color: rgba(255, 0, 0, 0.5);：設置為紅色（帶透明度的 RGBA 表示）。
也可針對某個方向設置：border-top-color: red;：設置上邊邊框顏色為紅色。border-right-color: red;：設置右邊邊框顏色為紅色。border-bottom-color: red;：設置下邊邊框顏色為紅色。border-left-color: red;：設置左邊邊框顏色為紅色。
或者省略寫法：border-color: red red red red;：設置上邊、右邊、下邊、左邊邊框顏色為紅色。border-color: red red red;：設置上邊、右邊、下邊邊框顏色為紅色（左邊同右邊）。border-color: red red;：設置上邊、下邊邊框顏色為紅色（左邊同右邊，右邊同下邊）。border-color: red;：設置上邊、右邊、下邊、左邊邊框顏色為紅色。
/* 邊框顏色代碼示例 */
div {border: 1px solid;border-color: blue;
}
8. 邊框寬度
border-width: 1px;：設置邊框寬度為 1 像素。border-width: 1em;：設置為 1 倍（相對于字體大小）。border-width: 1%;：設置為父元素寬度的 1%。
也可針對某個方向設置：border-top-width: 1px;：設置上邊邊框寬度為 1 像素。border-right-width: 1px;：設置右邊邊框寬度為 1 像素。border-bottom-width: 1px;：設置下邊邊框寬度為 1 像素。border-left-width: 1px;：設置左邊邊框寬度為 1 像素。
或者省略寫法：border-width: 1px 1px 1px 1px;：設置上邊、右邊、下邊、左邊邊框寬度為 1 像素。border-width: 1px 1px 1px;：設置上邊、右邊、下邊邊框寬度為 1 像素（左邊同右邊）。border-width: 1px 1px;：設置上邊、下邊邊框寬度為 1 像素（左邊同右邊，右邊同下邊）。border-width: 1px;：設置上邊、右邊、下邊、左邊邊框寬度為 1 像素。
/* 邊框寬度代碼示例 */
div {border: 1px solid black;border-width: 2px;
}
9. 邊框內邊距
/* 邊框外邊距代碼示例 */
div {margin: 10px;border: 1px solid black;
}
11. 邊框圓角
/* 邊框圓角代碼示例 */
div {width: 100px;height: 100px;border-radius: 10px;background-color: lightblue;
}
12. 邊框陰影
/* 邊框陰影代碼示例 */
div {width: 100px;height: 100px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);background-color: lightgreen;
}
13. CSS 盒子模型
CSS 盒子模型由元素的內容、內邊距、邊框和外邊距組成：
/* CSS盒子模型代碼示例 */
div {width: 200px; /* 內容寬度 */height: 150px; /* 內容高度 */padding: 10px; /* 內邊距 */border: 1px solid black; /* 邊框 */margin: 20px; /* 外邊距 */
}
14. CSS3 彈性盒子
CSS3 彈性盒子由?display?屬性和?flex?屬性組成：
/* CSS3彈性盒子基礎代碼示例 */
.container {display: flex;
}
.item {width: 100px;height: 100px;
}
15. CSS3 彈性盒子的屬性
/* flex-direction屬性代碼示例 */
.container {display: flex;flex-direction: column;
}
.item {width: 100px;height: 50px;
}
/* flex-wrap屬性代碼示例 */
.container {display: flex;flex-wrap: wrap;width: 300px;
}
.item {width: 150px;height: 100px;
}
/* justify-content屬性代碼示例 */
.container {display: flex;justify-content: space-between;width: 300px;
}
.item {width: 50px;height: 50px;
}
/* align-items屬性代碼示例 */
.container {display: flex;align-items: center;height: 200px;
}
.item {width: 80px;height: 50px;
}
/* flex-grow屬性代碼示例 */
.container {display: flex;width: 300px;
}
.item1 {flex-grow: 2;background-color: lightblue;
}
.item2 {flex-grow: 1;background-color: lightgreen;
}
.item3 {flex-grow: 1;background-color: lightcoral;
}padding: 10px;：設置內邊距為 10 像素。padding: 10em;：設置為 10 倍（相對于字體大小）。padding: 10%;：設置為父元素寬度的 10%。
也可針對某個方向設置：padding-top: 10px;：設置上邊距為 10 像素。padding-right: 10px;：設置右邊距為 10 像素。padding-bottom: 10px;：設置下邊距為 10 像素。padding-left: 10px;：設置左邊距為 10 像素。
或者省略寫法：padding: 10px 10px 10px 10px;：設置上邊距、右邊距、下邊距、左邊距為 10 像素。padding: 10px 10px 10px;：設置上邊距、右邊距、下邊距為 10 像素（左邊同右邊）。padding: 10px 10px;：設置上邊距、下邊距為 10 像素（左邊同右邊，右邊同下邊）。padding: 10px;：設置上邊距、右邊距、下邊距、左邊距為 10 像素-
10. 邊框外邊距
margin: 10px;：設置外邊距為 10 像素。margin: 10em;：設置為 10 倍（相對于字體大小）。margin: 10%;：設置為父元素寬度的 10%。
也可針對某個方向設置：margin-top: 10px;：設置上邊距為 10 像素。margin-right: 10px;：設置右邊距為 10 像素。margin-bottom: 10px;：設置下邊距為 10 像素。margin-left: 10px;：設置左邊距為 10 像素。
或者省略寫法：margin: 10px 10px 10px 10px;：設置上、右、下、左邊距為 10 像素。margin: 10px 10px 10px;：設置上、右、下邊距為 10 像素（左邊同右邊）。margin: 10px 10px;：設置上、下邊距為 10 像素（左、右邊距相同）。margin: 10px;：設置四個方向邊距均為 10 像素。border-radius: 10px;：設置圓角為 10 像素。border-radius: 10em;：設置為 10 倍（相對于字體大小）。border-radius: 10%;：設置為父元素寬度的 10%。
也可針對某個方向設置：border-top-left-radius: 10px;：設置左上圓角為 10 像素。border-top-right-radius: 10px;：設置右上圓角為 10 像素。border-bottom-left-radius: 10px;：設置左下圓角為 10 像素。border-bottom-right-radius: 10px;：設置右下圓角為 10 像素。
或者省略寫法：border-radius: 10px 10px 10px 10px;：設置四個圓角均為 10 像素。border-radius: 10px 10px 10px;：設置左上、右上、右下圓角為 10 像素（左下同右下）。border-radius: 10px 10px;：設置左上、右下圓角為 10 像素（右上同左上，左下同右下）。border-radius: 10px;：四個圓角均設為 10 像素。box-shadow: 10px 10px 5px #888888;：設置陰影，依次為水平偏移、垂直偏移、模糊距離、陰影顏色。box-shadow: 10px 10px 5px #888888 inset;：設置內陰影。box-shadow: 10px 10px 5px #888888 outset;：設置外陰影（默認值，可省略?outset）。- 還可添加擴展半徑參數，例如?
box-shadow: 10px 10px 5px 10px #888888; - 內容：元素的文本或圖像。
- 內邊距：內容與邊框之間的空間。
- 邊框：內邊距與外邊距之間的空間。
- 外邊距：元素與其他元素之間的空間。
- 寬度和高度：通過?
width?和?height?屬性設置，指內容、內邊距和邊框的寬度 / 高度之和。 display?屬性：用于指定元素的顯示方式，設置為?display: flex;?后元素變為彈性容器。flex?屬性：用于指定元素的彈性布局方式，彈性容器內包含一個或多個彈性子元素。彈性盒子只改變布局，不改變渲染方式。flex-direction屬性：指定彈性子元素的排列方向，有四種取值：row：從左到右排列row-reverse：從右到左排列column：從上到下排列column-reverse：從下到上排列（垂直方向常用）
flex-wrap屬性：指定彈性子元素的換行方式，有兩種取值：nowrap：不換行wrap：換行
justify-content屬性：指定彈性子元素在主軸上的對齊方式，有五種取值：flex-start：從主軸起點開始flex-end：從主軸終點開始center：居中space-between：兩端對齊space-around：每個子元素兩側的間隔相等
align-items屬性：指定彈性子元素在交叉軸上的對齊方式，有五種取值：flex-start：從交叉軸起點開始flex-end：從交叉軸終點開始center：居中baseline：基線對齊stretch：拉伸（默認值，子元素占滿交叉軸）
flex-grow屬性：指定彈性子元素的放大比例：- 默認值為?
0，即存在剩余空間也不放大。 - 若所有子元素?
flex-grow?都為?1，則等分剩余空間。 - 若某子元素?
flex-grow?為?2，其他為?1，則該元素占據剩余空間比其他元素多一倍。
- 默認值為?
 -part8)
)
_49)
