一、記單詞、複習前一天的學習內容、講解練習作業。
二、轉義字元
**義字元的鏈結）
三、文字樣式設定
1、text-indent 用於段落首行縮排。如果用於中文布局，一般會使用2em作為單位，段落縮排的首行字元。
2、text-decoration 文字裝飾線它的屬性值有（none、line-through、overline、underli）
3、text-transform英文本母大小小轉換 它的屬性值為（capitalize將每個英文單詞首字母變為大寫字母。 none預設、uppercase將所有英文本母轉為大寫字母、lowercase、將所有因為字母轉為小寫字母。）
4、text-shadow 文字的影陰
該屬性的作用是給文字新增陰影效果。
該屬性最初是在css2.0中被定義的，但在css 2.1被刪除了，不知道是出於什麼考慮，在css3.0中又重新被寫進了規範。
目前除了ie9及之前版本不支援該屬性外，其它主流瀏覽器鈞支援該屬性。
該屬性有4個值，具體如下：
水平方向陰影偏移（h-shadow）
「0」表示維持原位，正數為向右偏移，負數為向左偏移。單位為畫素「px」。
垂直方向陰影偏移（v-shadow）
「0」表示維持原位，正數為向上偏移，負數為向下偏移。單位為畫素「px」。
陰影模糊距離（blur）
用正數表示陰影模糊的單位距離，距離越大模糊程度越高，單位為畫素「px」。
陰影的顏色（color）
支援web技術中的常用顏色模式：「顏色英文單詞」、「hex」、「rgba」、「hsla」。「行內塊元素」和「塊元素」所用的「box-shadow」（以後會學習）有所不同，文字陰影的屬性值裡沒有「inset」（設定為內陰影）和「spread」（陰影的擴充套件，單位畫素「px」），以後在使用中需要加以區分。
5、line-height 行高
該屬性是用於設定「行內元素」中文字元素在一行中所佔據的高度，（可實現單行文字垂直居中的效果）
使用場景如：**、導航按鈕、自定義樣式按鈕、標題欄等
6、單詞之間的間距（word-spacing）
7、單詞的間距「word-spacing」
該屬性用於設定英文單詞之間的間距。
注意他區分單詞時是按照單詞兩邊是否含有空格來判斷的，所有如果你的內容是中文，
當你的文字間沒有空格時，整體就會被當做乙個單詞。
當你的每個漢字兩邊都有空格時，每個漢字才會被當做是乙個單詞。
其值可以為負數，距離會減小
8、字元的間距「letter-spacing」
和「word-spacing」有所不同，該屬性是用於控制字元間的間距。
乙個字母，乙個漢字，甚至乙個空格都是乙個字元。
注意：在html中，多個空格最終會變為乙個空格的。
其值可以為負數，距離會減小
9、空格換行處理「white-space」
該屬性設定如何處理元素內的空格符和換行符，它主要有以下值：
normal（預設）
由瀏覽器處理空格和換行
pre段落裡所有的空格符和換行符都會被保留（類似於標籤）
nowrap
段落內的文字不會換行（類似於沒有設定過換行的「notepad」）
pre-wrap
段落裡所有的空格符序列和換行符序列都會被保留（除了在某些編碼格式下和「pre」有所差距，大多數時候可以說它和「pre」這個值是等價的）這點類似於pre但他不會更改瀏覽器的預設值。當內容小於窗體寬度時會出現滾動條。
pre-line
多空格會合併成乙個，但換行符會保留
注意：如果當前的內容是無空格的一連串的英文那麼它會被瀏覽器當做是乙個單詞不會換行，只會出現滾動條去適應它。
9、decoration 設定文字的方向（rtl從右到左 ltf 從左到右）
10、overflow（它的值 hidden auto scroll ）文字溢位時的處理。
11、text-overflow
文字的裁切「text-overflow」
該屬性規定當文字溢位所在標籤時進行的處理。
該屬性主要包含兩個值：
clip 裁剪文字（從屬性意義不大，通過overflow：hidden可實現此效果）
ellipsis顯示省略符號來代表被裁剪的文字
不過該屬性不能單獨使用，必須要配合文字換行處理屬性「white-space」和內容溢位處理屬性「overflow」來使用，否則會達不到所期望的效果。
顯示省略號的流程
文字長度需要超出邊界
不允許內容換行
設定超出就隱藏
設定文字末尾顯示省略號
div
css盒子模型
1、 什麼是盒子模型
所謂盒子模型，即是將網頁布局中的元素（能設定寬高的元素）進行擬物化的比喻，乙個盒子是由「內容–content」（盒子內的物件）、「內間距–padding」（物件和盒子的距離）、「邊框–border」（盒子壁）、「外間距–margin」（盒子和其它物體的距離）組成，如下示例圖：
ie盒子模型與w3c盒子模型
(1) 由於一些「客觀」的原因，ie瀏覽器和標準的盒子模型有一定的差異。
(2) 標準的盒子模型
「width」和「height」== conent、padding和border；
ie瀏覽器盒子模型
「width」和「height == content
(3) 盒子模型的選擇與轉換
一方面為為了相容ie瀏覽器，另一方面是ie的盒子模型在實際的布局中的確更容易控制。所以我們在實際的開發工作中，都是將標準的盒子模型轉換為ie的盒子模型。轉換方式如下：
是將css的樣式屬性樣式：
「box-sizing」的值設為「border-box」ie盒子模型。
box-sizing」的值設為「border-conten」w3c盒子模型。
當然，如果我們要將ie的盒子模型轉化為標準的盒子模型也是可行的，即將「box-sizing」的值設定為「cotent-box」，不過業界並不推崇這樣做。
2、盒子寬度，盒子高度，內間距，邊框，外邊距
基本含義
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」屬性的各個分支屬性也能單獨地對某個方向上的值進行設定
圓角的盒子「border-radius」
元素的輪廓「outline」
該屬性用於設定乙個元素的輪廓線，和「border」不一樣，「outline」無論在什麼「盒子模型」下，都不會佔據頁面的空間，並且它不能分別去設定各個方向的值，即不能對「top」、「right」、「bottom」和「left」方向的「outline」進行分別設定，只能進行統一設定。
在使用「webkit（老版本chrome瀏覽器、safari瀏覽器以及ios和android系統自帶瀏覽器）」核心或「blink（以新版的chrome瀏覽器和opera瀏覽器為代表）」核心的瀏覽器中，該屬性會在表單元素在獲得焦點後自動出現，本意是讓使用者獲得更好的互動體驗，但該設定很多時候反而會影響我們對「web」頁面的風格設定，這個時候我們都是將它的值設定為「none」。
另外，「outline」屬性並不受圓角屬性「border-radius」的影響。和「border」屬性大體一致，
「outline」有以下分支屬性：
outline-width
設定輪廓線的寬度，能為web技術中常用的度量單位，最常用的為畫素「px」。
outline-style
設定輪廓線的樣式，和「border-style」一致，這裡就不在贅述。
outline-color
設定輪廓線的顏色，和「border-color」一樣支援web的四種「顏色模式」。
outline-offset
設定輪廓線相對元素邊界的距離，通常以畫素「px」為單位。
文字樣式設定 盒子模型
1，文字樣式設定 段落首行縮排text indent 該屬性是用於設定每個段落首行縮排數量值的屬性，如果是用於中文布局，一般會使用 2em 的數值和單位來為每個段落的首行縮排 兩個字元 例如 文字裝飾性 下劃線 text decoration 文字字母大小寫轉text transform 該屬性有以...
盒子模型及其樣式
分類 ie盒子模型 標準w3c盒子模型 盒子模型 content 內容 padding border margin padding 外邊距 border 邊框 margin 外邊距 box width 200px height 200px div的內容的寬高width，height 內容區域 bor...
盒子模型 筆記
images cssbase.css layout.css index.css 脫離文件流 寬度不夠會掉下來 行內元素支援寬高 塊元素會根據內容撐開寬高 文字環繞 用到浮動必須清浮動 不要用inline block，用浮動 相對定位 根據自己定位 不會脫離文件流 絕對定位 脫離文件流 根據父級定位 ...