1.對齊方式

1.1 文本對齊水平方式

text-align 控制容器里面文本的水平對齊方式
值：

• left 文本左對齊 默認值
• center 文本居中對齊
• right 文本右對齊

1.2 塊級元素水平對齊方式

語法：margin:0 auto;

1.3 垂直對齊方式

語法：vertical-align 垂直對齊方式（行內塊級元素默認跟文本的基線對齊）
垂直對齊方式能解決的問題：
（1）文本和圖片居中對齊
（2）輸入框和按鈕對齊的效果
（3）圖片默認跟底部div是由底部的間歇，可以解決這個問題，也可以使用display：block；去除間隙

2.字體

• 默認字體大小
  win10 默認字體是微軟雅黑
  win7 默認字體是宋體
  在瀏覽器中字體的默認大小是 16px

• 字體屬性
  設置字體屬性時不建議直接給中文--因為中文的兼容性是比較差的，一般建議使用英文或者是unicode編碼

• 獲取unicode編碼的方式
  在瀏覽器控制臺通過輸入escape()來得到

  例子：escape("宋體") ==> %u5B8B%u4F53 改成 \u5B8B\u4F53即可

3.去掉下劃線

語法：text-decoration 控制文本是否帶有線
值：

• none 沒有線（去掉a標簽的下劃線）
• underline 下劃線
• line-through 刪除線
• overline 上劃線

4.文本的縮進效果

• text-indent 控制文本的首行縮進效果（數字+單位 一般推薦使用em作為單位）
• text-indent：2em； 首行縮進兩個字符
• text-indent：-9999em； 一般是設置大標題的位置，使它看不見，可用于優化引擎

5.行高屬性

line-height 控制一行文字占據多高的位置
行高 = 字體大小 + 上間距 + 下間距

6.font的合寫

font: 字體風格 是否加粗 字體大小/行高 字體;
注意點：字體風格和是否加粗沒有順序且可以省略，但是字體大小和字體的順序不能亂，還有無法省略

7.選擇器的優先級

• 優先級的順序：!important > 行內樣式 > id > 類 > 標簽 > 繼承
• 優先級的計算方法：
  4個n原則：（越是前面的數字越大，權重越大）
  （1） 第一個n表示有多少個important
  （2） 第二個n表示有多少個id選擇器
  （3） 第三個n表示有多少個類選擇器
  （4） 第四個n表示有多少個標簽選擇器
  !important 的作用是把某個css的權重提升到最高

8.可以被繼承的屬性

color ， font- ， text- ，line-，cursor
繼承有些特例：a標簽無法繼承父元素的顏色，設置color：inherit；才會繼承父元素的顏色

9.css的三大特性

• 繼承性
• 層疊性
• 優先級

10.元素

• 塊級元素
  div、p、h標簽等
  特點：
  （1）獨占一行
  （2）默認寬度和父元素一樣寬
  （3）css設定的寬高有效

• 行內元素
  ** span、a、em、strong標簽等**
  特點：
  （1）不會獨占一行
  （2）寬度由內容決定
  （3）在css設定寬度不起作用

• 行內塊級元素
  img標簽等
  特點：
  （1）不會獨占一行
  （2）可以設置寬高且有效

• 元素的模式轉換
  display：block；
  把某個元素的顯示模式修改為塊級模式，在img標簽設置這個屬性值可以去除圖片默認的3px間隙

• display：inline；
  把某個元素的顯示模式修改為行內模式

• display：inline-block；
  把某個元素的顯示模式修改為行內塊級模式

• 元素的顯示和隱藏
  元素的可見性
  display：none；沒有顯示模式 既看不見也不會占據位置
  visibility：hidden； 隱藏 雖然看不見，但是還是占據位置
  visibility:visible; 可見（visibility的默認值）

11.偽類

• :link 控制a標簽的地址沒有被訪問過的樣式
• :visited 控制a標簽的地址已經被訪問過的樣式
• :hover 控制a標簽鼠標移動到之上的時候的樣式，而且hover不僅僅是a可以使用，其他的元素也可以使用
• :active 控制a標簽，在按下沒有松開的時候的樣式
  記憶方式：love hate l：link v:visited h:hover a:active

12. border-collapse: collapse的作用

讓表格的單元格之間的間距變沒有，并且把表格的邊框重疊在一起

13. 包含塌陷

如果直接給子元素設置margin-top，這個時候，子元素位置改變了，但是有可能會把父元素的也一起帶跑了
解決方案：
（1）給父元素加上border
（2）給父元素加上 overflow:hidden;

14. 浮動

• 特性
  （1） 浮動元素不會占據標準流的位置（脫標）
  （2） 浮動的元素默認會以行內塊級元素的形式展示
  （3） 浮動的元素在元素的頂端對齊

• 浮動帶來的影響
  所有的子元素浮動起來之后，因為脫離標準流，不占據位置，導致父元素的高度變成0，是布局變亂。

• 解決方案（清除浮動）-- 4種方法
  （1）給父元素直接設置高度
  （2）給父元素設值 overflow：hidden；
  （3）使用單偽元素清除浮動

    父元素::after {
        content:"";
        display:block;
        clear:both; 
       }
  

  （4）使用雙偽元素清除浮動（重點掌握這種）

    父元素::after,父元素::before {
        content:"";
        display:block;
        clear:both;
       }
  

15. overflow屬性

• visible 默認值 不管
• auto 如果超出了，就隱藏起來，然后出現滾動條讓內容可以隨著滾動條滾動
• hidden 如果超出了，把內容剪掉隱藏起來（常用：使用overflow：hidden；控制包含塌陷和清除浮動）
• scroll 不管有沒有超出，都顯示滾動條

16. 定位

如果定位了，沒有設置top、left等這些控制位置的屬性，默認會按照他原本在標準流的位置呈現

四種定位方式

• 靜態定位 static（默認值）

• 固定定位 fixed
  特點
  （1）脫離標準流不占據位置
  （2）改變原有的顯示模式
  （3）每次設置位置，相對于整個瀏覽器來說 -- 定位基準：瀏覽器定位就是讓某個元素固定到某個位置

• 相對定位 relative
  特點
  （1）沒有脫離標準流，還是會占據在標準流中的位置
  （2）沒有改變顯示模式
  （3）定位基準是他自己原來的位置

• 絕對定位 absolute
  特點
  （1）脫離標準流，不占據原來的位置
  （2）改變了元素的顯示模式
  （3）定位的基準是：
  - 如果前代沒有定位，絕對定位的基準是瀏覽器（body）

• 如果前代定位了，絕對定位的基準就是離最近的定位的前代元素
  子絕父相 -- 絕對定位和相對定位一起使用

17. 層級屬性

z-index:數字；

18. 盒子居中的方式

• 先跑父元素高度的50%，再往回跑自己寬高的一半。
• 定位 先跑父元素高度的50%，然后translate(-50%,-50%)

19. 控制鼠標的樣式

常用樣式：cursor：pointer； 小手

20. 外輪廓線

一般來說，輸入框在可以輸入的狀態下，會在外部出現一圈藍色類似邊框的東西，其實不是邊框，時外輪廓線。
跟邊框的區別在于：外輪廓線不會增加元素的寬高
一般是不希望輸入框在輸入的時候有外輪廓線的，因為外輪廓線在一些低版本的瀏覽器（ie）是沒有的，為了保證在所有的瀏覽器里面看起來的效果一樣，所以把外輪廓線去除。
去除外輪廓線：outline：0 none；
輪廓（鏈接有虛線和文本框 有藍色的邊框）：outline-style：none；

21.去掉圖片的邊框的寫法

在某些老的瀏覽器中圖片是默認有邊框的
border：0 none；去掉默認的邊框，兼容性最好的寫法

22.表單的邊框通常改為0

border： 0 none； 兼容所有的瀏覽器

23.文本拖拽

一般在頁面效果中如果用到文本域，一般是不允許用戶隨意改變大小的，容易導致布局混亂，一般都會禁用文本域的隨意拖拽
resize：重新修改大小
resize的值有：

• none 不允許用戶隨意修改大小
• both 可以改寬度和高度
• horizontal 運行修改寬度
• vertical 運行修改高度

24.文本超出控制

• white-space: 控制是否換行顯示
  值：
  -nirmal 普通的顯示模式，默認值
  -nowrap 不換行，在一行上顯示所有的內容
• text-overflow：控制超出的文字是直接裁切還是顯示省略號
  值：
  -clip 直接裁切，不顯示省略號（默認值）
  -ellipsis 顯示省略號
• 顯示省略號的效果：
  （1）必須設置一行顯示 white-space：nowrap；
  （2）必須設置超出隱藏 overflow：hidden；
  （3）設置省略號 text-overflow：ellipsis；

25.精靈圖

• 目的
  提高頁面的加載速度，減少服務器的壓力
• 制作
  （1）一定要是小圖片（最好是不太會發生變化）
  （2）精靈圖在制作的時候寬度一定要大于最大的那張圖片的寬度
  （3）圖片與圖片之間必須要有空隙
  （4）在精靈圖制作完成之后一定要將精靈圖下方留出足夠的位置，方便將來進行擴展

26. 滑動門

• 原理
  （1）把一張背景圖片拆分成兩個元素顯示
  （2）第二部分，需要讓背景圖片右對齊
  （3）右邊的容器需要使用padding擠出右邊一點，用于顯示右邊的圓角
  （4）利用內容自動把右邊容器的寬度變寬
• 滑動門的限制
  用于撐開右邊容器的寬度的內容不能太多

27.用border屬性繪制一個三角形

<div class="box"></div>

.box {   
   width:0px;
   height:0px;
   border:100px solid transparent; //transparent 透明度
   border-top-color:green;
   border-bottom:0 none;
       background-color:blue;
}