<( < ) / >( > )
1，文字樣式設定：
段落首行縮排text-indent
該屬性是用於設定每個段落首行縮排數量值的屬性，如果是用於中文佈局，一般會使用“2em”的數值和單位來為每個段落的首行縮排“兩個字元”。例如：

文字裝飾性(下劃線)text-decoration
文字字母大小寫轉text-transform
該屬性有以下屬性值：
none（預設）：保持文字中英文單詞的預設大小寫
Capitalize：每個英文單詞首字母為大寫字母，其它為小寫字母（大駝峰寫法）
注意：除了首字母發生改變外，其他的字母原本是大寫就是大寫，原本是小寫就是小寫
Uppercase：將所有英文單詞轉換為大寫字母
Lowercase：將所有英文單詞轉換為小寫字母
文字的陰影text-shadow
該屬性有4個值，具體如下：
水平方向陰影偏移（h-shadow）：“0”表示維持原位，正數為向右偏移，負數為向左偏移。單位為畫素“px”。
垂直方向陰影偏移（v-shadow）：“0”表示維持原位，正數為向上偏移，負數為向下偏移。單位為畫素“px”。
陰影模糊距離（blur）：用正數表示陰影模糊的單位距離，距離越大模糊程度越高，單位為畫素“px”。
陰影的顏色（color）：支援Web技術中的常用顏色模式：“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。

段落文字的行高line-height
單詞的間距word-spacing
字元的間距letter-spacing
空格換行處理white-space
該屬性設定如何處理元素內的空格符和換行符，它主要有以下值：
normal（預設）：由瀏覽器處理空格和換行
Pre：段落裡所有的空格符和換行符都會被保留（類似於

標籤）

Nowrap：段落內的文字不會換行（類似於沒有設定過換行的“notepad”）

pre-wrap：段落裡所有的空格符序列和換行符序列都會被保留（除了在某些編碼格式下和“pre”有所差距，大多數時候可以說它和“pre”這個值是等價的）,這點類似於pre，但是它不會去更改瀏覽器的預設行為–當內容的寬度小於窗體的寬度時會出現滾動條的行為。

pre-line：多空格會合併成一個（瀏覽器的預設處理方式），但換行符會保留

如果你當前的內容是是沒有空格分割的一連串英文，那麼它會被瀏覽器當作是一個單詞，不會讓其換行，只會出現水平滾動條去適應它。

設定文字方向direction

ltr從左往右 （預設） /  rtl 從右往左

文字的剪裁text-overflow

overflow常用值： auto / hidden / scroll…見下圖：

Text-overfolw屬性包含的常用值：
clip 裁剪文字（從屬性意義不大，通過overflow：hidden可實現此效果）
ellipsis顯示省略符號來代表被裁剪的文字
不過該屬性不能單獨使用，必須要配合文字換行處理屬性“white-space”和內容溢位處理屬性“overflow”來使用，否則會達不到所期望的效果。
顯示省略號的流程見下圖：
文字長度需要超出邊界/不允許內容換行/設定超出就隱藏/設定文字末尾顯示省略號

2，css盒子模型：
A,什麼是盒子模型？就是將網頁佈局中的元素（能設定寬高的元素）進行擬物化的比喻，而一個盒子是由–內容indent（盒子內的物件）/ 內間距padding（物件與盒子之間的距離） / 邊框border（盒子壁） / 外邊距margin（盒子和其他物體之間的距離）等四個部分組成。

如下圖所示：

B, IE盒子模型和W3C盒子模型
由於一些“客觀”的原因，IE瀏覽器和標準的盒子模型有一定的差異。
標準的盒子模型
“width”和“height”== conent、padding和border；
IE瀏覽器盒子模型
“width”和“height == content
盒子模型的選擇與轉換
一方面為為了相容IE瀏覽器，另一方面是IE的盒子模型在實際的佈局中的確更容易控制。所以我們在實際的開發工作中，都是將標準的盒子模型轉換為IE的盒子模型。
轉換方式如下：
將CSS的樣式屬性“box-sizing”的值設為“border-box”轉換成IE的 /“content-box”轉換成W3C的。
當然，如果我們要將IE的盒子模型轉化為標準的盒子模型也是可行的，即將“box-sizing”的值設定為“cotent-box”，不過業界並不推崇這樣做。
C, 盒子的寬度 / 高度 / 內間距 / 邊框 / 外邊距
基本含義
width: 盒子寬度
Height： 盒子高度
Padding：內邊距：盒子內容與盒子邊框的距離
Border： 盒子邊框
margin: 外邊距：盒子邊框與其他標籤的邊框的距離
具體設定：padding/margin 一個值: 上右下左 / 兩個值：上下，左右 / 三個值：上，左右，下
Border
border-width 設定邊框的寬度。

border-style 設定邊框的型別，主要有以下可以設定的值
none，無邊框/solid，實現邊框/dotted，點線邊框/dashed，虛線邊框/double，雙線邊框/groove，3D凹槽邊框/ridge，3D凸槽邊框/inset，內浮雕邊框outset，外浮雕邊框
border-color設定邊框的顏色，
當然“border”屬性的各個分支屬性也能單獨地對某個方向上的值進行設定。
padding/margin設定
四個方向單獨進行控制
div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
組合值控制
div {
margin: 1rem;
padding: 1rem;
}
當為組合值時的含義：
一個值: 上右下左同時設定
兩個值：上下，左右
三個值：上，左右，下
四個值：上右下左分別設定

Border設定
邊框的三大屬性
①　border-width 設定邊框的寬度。
②　border-style 設定邊框的型別，主要有以下可以設定的值
③　border-color 設定邊框的顏色，
單獨設定各屬性（所有方向）
div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}
只設置某個方向上的border，單獨控制
div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}

邊框可選型別如下：
①　none，無邊框
②　solid，實現邊框
③　dotted，點線邊框
④　dashed，虛線邊框
⑤　double，雙線邊框
⑥　groove，3D凹槽邊框
⑦　ridge，3D凸槽邊框
⑧　inset，內浮雕邊框
⑨　outset，外浮雕邊框

組合值

用組合值設定各屬性（所有方向）

div {
border: 0.05rem red solid;
}

各個屬性的位置可以調整改變
只設置某個方向上的border，組合值控制
div {
border-right:1rem solid red;
}
1.圓角的盒子“border-radius”
給每個角進行設定圓角
div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
給所有角進行設定圓角
div {
border-radius: 5px;
}
2.元素的輪廓“outline”
概述
①　該屬性用於設定一個元素的輪廓線.(input點下會有藍色邊線，那就是輪廓)
②　和“border”不一樣，“outline”無論在什麼“盒子模型”下，都不會佔據頁面的空間
③　並且它不能分別去設定各個方向的值，即不能對“top”、“right”、“bottom”和“left”方向的“outline”進行分別設定，只能進行統一給所有方向設定。（可以對某個分支屬性進行設定）
④　在使用“webkit核心或“blink核心的瀏覽器中，該屬性會在表單元素在獲得焦點後自動出現，本意是讓使用者獲得更好的互動體驗。
但該設定很多時候反而會影響我們對“Web”頁面的風格設定，這個時候我們都是將它的值設定為“none”。
Webkit :
老版本Chrome瀏覽器、Safari瀏覽器以及iOS和Android系統自帶瀏覽器
Blink :
以新版的Chrome瀏覽器和Opera瀏覽器為代表
⑤　另外，“outline”屬性並不受圓角屬性“border-radius”的影響。和“border”屬性大體一致
outline的分支屬性
outline-width 設定輪廓線的寬度
outline-style 設定輪廓線的樣式
outline-color 設定輪廓線的顏色
outline-offset設定輪廓線相對元素邊框的距離
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 組合值寫法 */
outline-offset: 20px;
}