<( < ) / >( > )
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
組合值控制
div
當為組合值時的含義：
乙個值: 上右下左同時設定
兩個值：上下，左右
三個值：上，左右，下
四個值：上右下左分別設定
border設定
邊框的三大屬性
① border-width 設定邊框的寬度。
② border-style 設定邊框的型別，主要有以下可以設定的值
③ border-color 設定邊框的顏色，
單獨設定各屬性（所有方向）
div
只設定某個方向上的border，單獨控制
div
邊框可選型別如下：
① none，無邊框
② solid，實現邊框
③ dotted，點線邊框
④ dashed，虛線邊框
⑤ double，雙線邊框
⑥ groove，3d凹槽邊框
⑦ ridge，3d凸槽邊框
⑧ inset，內浮雕邊框
⑨ outset，外浮雕邊框
組合值用組合值設定各屬性（所有方向）
div
各個屬性的位置可以調整改變
只設定某個方向上的border，組合值控制
div
1.圓角的盒子「border-radius」
給每個角進行設定圓角
div
給所有角進行設定圓角
div
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
文字樣式設定 盒子模型學習筆記
一 記單詞 複習前一天的學習內容 講解練習作業。二 轉義字元 義字元的鏈結 三 文字樣式設定 1 text indent 用於段落首行縮排。如果用於中文布局，一般會使用2em作為單位，段落縮排的首行字元。2 text decoration 文字裝飾線它的屬性值有 none line through ...
盒子模型及其樣式
分類 ie盒子模型 標準w3c盒子模型 盒子模型 content 內容 padding border margin padding 外邊距 border 邊框 margin 外邊距 box width 200px height 200px div的內容的寬高width，height 內容區域 bor...
css盒子模型 CSS盒子模型寬高設定須知
元素空間大小 element空間高度 height padding margin border element空間寬度 width padding margin border 元素實際大小 element實際高度 height padding margin elenment實際寬度 width pa...