02 前端篇（選擇器和屬性）
http 協議：
超文本傳輸協議，基於請求/響應模式
無狀態協議（短連接，無記憶）
url：統一資源定位符
post 有請求體， get 沒有請求體
referer：請求來自那個頁面。放在請求頭部
Content-Type：url編碼方式，放在請求體裏面的
css：Cascoding Style Sheets，層疊樣式表
四種引入方式:
行內式
嵌入式
鏈接式（推薦）
導入式
css 的選擇器（selector）：
基礎選擇器：
* 通用元素選擇器
E 標簽選擇器
.info 和 E.info ：class選擇器。匹配所有class
#info ：id 選擇器
組合選擇器：
E,F ：多元素選擇器，同時匹配所有E元素或F元素，用逗號分隔
E F：後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔
E>F：子元素選擇器，匹配所有E元素的子元素F
E+F：毗鄰元素選擇器。匹配所有緊隨E元素之後的同級元素F
屬性選擇器：E[att]：匹配所有具有att屬性的元素，不考慮它的值
E[att=val]：匹配所有
E[att~=val]：匹配所有att屬性具有多個空格分隔的值，其中一個值等於val的元素
E[att^=val]：匹配屬性值以指定值開頭的每個元素
E[att$=val]：匹配屬性值以指定值結尾的每個元素
E[att*=val]：匹配屬性值中包含某個特定值的每個元素
偽類選擇器： ：before
：after
嵌套規則：
- 塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，他只能包含其他內聯元素；
- 塊級元素不能放在p裏面
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如：h1、p、dt
- li 內可以包含div
- 塊級元素與塊級元素並列，內聯元素與內聯元素並列
id 用 #， class 用 . 。
id 和 class 的區別是 ：id是唯一的，class 可以給多個標簽
css 常用屬性：
顏色屬性：1. 顏色單詞 2. #cc3399 3. rgb（0,0,0）4. rgba(155,200,40,0.8)
字體屬性：font-size 、font-style、 font-family、font-weight
背景屬性：background-color、background-img：url（12.jpg）；
background-repeat：no-repeat/repeat-x/repeat-y（y軸重復）/repeat；
background-size：300px 300px；
background-position：top center；
綜之：background：url（“12.jpg”）no-repeat 100px 100px red;
文本屬性：text-align：center；
line-height：100px；
letter-spacing：5px；
word-spacing：10px；
text-transform：capitalize
邊框屬性：border-style：solid；
border-color：chartreuse；
border-width：20px；
簡寫：border：30px rebeccapurple solid；
列表屬性：ul，ol{
list-style：decimal-leading-zero；
list-style：none/circle/upper-alpha/disc；
}
display屬性：none、block、inline
盒子模型（外邊距和內邊距）：
border：圍繞在內邊距和內容外的邊框
padding：控制內容與邊框的距離
margin：用於控制元素與元素之間的距離
content：內容，顯示文本和圖像
總結：
塊級標簽：<div> <p> <h1-6> <ul> <ol> <dl>
內聯標簽：<a> <img> <input> <span> <select> <textarea>
正常文檔流：將元素（標簽）在進行排版布局的時候按著 從上到下 從左到右的順序進行排版的布局流。
脫離文檔流：將元素從文檔流中取出，進行覆蓋，其他元素會按照文檔流中不存在該元素重新布局。
float：浮動（非完全脫離）
如果上一個標簽也是浮動標簽，就會緊隨在上一個標簽後面
如果上一個標簽不是浮動標簽，就會保持垂直距離不變，一直頂在最左面
position： absolute| fixed 定位（完全脫離） relative|static（不脫離文檔流）
static：默認值static，無特殊定位，對象遵循正常文檔流
relative：對象遵循正常文檔流，但將依據 top、bottom、left、right等屬性在正常文檔流中偏移位置（以原來的位置為基準）
absolute：對象脫離正常文檔流，以最近的非 static屬性的父親位置為基準進行移動
fixed：固定在某個位置，不論窗口是否滾動
clear：none|left|right|both
none：默認值，允許兩邊都有浮動對象
left：不允許左邊有浮動對象。如果有了，我下去
right：不允許右邊有浮動對象
both：不允許有浮動對象
知識點回顧：
- maigin：0 auto； 實現塊級標簽水平居中
- 塊級標簽與內聯標簽的轉換：display：inline-block | inline|block
- block：獨占一行；可以設置width、height屬性；可以設置margin 和 padding屬性
- inline：不會獨占一行，多個相鄰的行內元素會排列在同一行；設置 width、height屬性無效；margin 和 padding 屬性只在水平方向有效果，豎直方向不會產生邊距效果。
- inline-block：將對象呈現為 inline 對象，但對象內容作為block對象呈現。之後的內聯對象會被排列在同一行內。有block的寬度高度特性又有inline的同行特性
02 前端篇（選擇器和屬性）