html css一些基礎知識點的整理

1. 淺顯的名詞解釋
   html：即HyperText Markup Language，超文本標記語言。
   css：即Cascading Style Sheets，層疊樣式表。
   JavaScript：也稱爲ECMAScript，廣義上包括ECMAScript，DOM，BOM。
   jQuery：JavaScript框架，write Less，Do More，封裝JavaScript代碼，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
   Ajax：即Asynchronous Javascript And XML，異步 JavaScript 和 XML，創建交互式網頁應用的網頁開發技術。
   Bootstrap：基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架。
   less： CSS 預處理器，讓 CSS 具有動態性。

2. SEO：搜索引擎優化技術：告訴搜索引擎爬蟲，我們的網站是關於什麼的

3. 空格符 &nbsp
   < 字符 &lt
   >字符 &gt
   targrt=_blank 新標籤跳轉

4. css 的引入：行間樣式，頁面級css，外部css文件

5. css選擇器與權重
   ！important： Infinity
   行間樣式： 1000
   id選擇器：100
   class選擇器|屬性|僞類：10
   標籤選擇器|僞元素：1
   通配符選擇器：0
   進制：256

6. 父子選擇器： a b
   直接子元素選擇器 ： a>b
   並列選擇器： ab
   分組選擇器： a，b，c
   瀏覽器底層原理：遍歷選擇器自右向左。

7. 顏色寫法：純英文單詞（測試用），顏色代碼，顏色函數。
   透明色：transparent。

8. 簡單的三角形畫法：利用border。

9. 實現文本水平垂直居中

10. 首行縮進兩字符：text-indent：2em ；

11. 像素：px，相對單位。1em=1 font-size。

12. text-decoration：文本修飾；

13. cursor：光標

14. 僞類選擇器：hover

15. 行級元素，內聯元素（inline）：內容決定元素所佔位置，不可以通過css改變寬高。 span strong em a del

16. 塊級元素（block）：獨佔一行，可以通過css改變寬高。div p ul li ol form address。

17. 行級塊元素（inline-block）：內容決定大小，可以改變寬高。

18. 凡是帶有inline的元素，都有文字特性。用於解決圖片之間的空隙。改變元素屬性。

19. 盒子的三大部分
    盒子壁： border
    內邊距：padding
    盒子內容：width+heigth
    
    外邊距：margin
    盒子模型：margin+border+padding+（content=width+heigth）

20. body有默認的margin：8px；

21. 層模型：position定位
    absolute：脫離原來位置進行定位，最近有定位的父級進行定位，如果沒有有定位的父級，相對於文檔進行定位
    relative：保留原來位置進行定位，相對於自己原來的位置進行定位。
    fixed：相對於頁面位置進行定位

22. 兩欄佈局

23. 兩個經典bug：
    margin塌陷
    BFC：block format context，改變語法規則。
    觸發盒子的BFC：
    1設置position：absolute
    2.display：inline-block
    3float：left/right
    4overflow：hidden
    
    margin合併：兄弟元素垂直方向的margin會合並。
    解決：在一個元素上多加上另一個的距離

24. 浮動模型：float：left/right
    浮動元素產生了浮動流，所有產生了浮動流的元素，塊級元素看不到他們，產生了BFC的塊級元素和文本類元素以及文本可以看到浮動元素。

25. 僞元素：bofore，after
    span：：before，span：：after{
    content："";
    clrea:both;
    displat:block;
    }

26. 文字環繞圖片：float的最原始用法。

27. 文字溢出
    單行文本打點顯示：css{
    white-space：nowrap；
    overflor：overhidden；
    text-overflow：ellipsis；
    }
    多行文本截斷處理：css{
    文本高度和div高度處理；
    overflow：hidden；
    }

28. 背景圖片的引入和處理
    background-image：
    background-size：100%；
    background-repeat：no-repeat（repeat-x，repeat-y）；
    background-position：100px ，100px；(或者top left right bottom center=50% 50%)

29. 行級元素只能嵌套行級元素
    塊級元素可以嵌套任何元素，但是p標籤不可以嵌套塊級元素，會被斬斷成兩段。
    a標籤裏不可以嵌套a標籤。

30. inline 和inline-block都是文本類元素

31. position：absolute/float：left，right設置時，會把元素轉變成inline-block元素。

32. 行級塊元素裏面有文本類內容的時候，外面的文字與其內部文本底部對齊。vertical屬性可以設置對齊方式和距離。

33. 文字前後小圖片的插入：利用僞元素。