CSS
選擇器
在 CSS 中，選擇器是一種模式因苹，用于選擇需要添加樣式的元素。
基本類型分為如下幾種：
| 類型 | 例子 | 解釋 |
|---|---|---|
| 元素選擇器 | 通配合選擇符（*） 類選擇符（.） id選擇符（#id） ... |
對標(biāo)簽的選擇 |
| 關(guān)系選擇器 | 包含選擇符（E F） 子選擇符（E>F） 相鄰選擇符（E+F） ... |
標(biāo)簽與標(biāo)簽之間的關(guān)系是否滿足 |
| 屬性選擇器 | E[att] E[att="val" E[att~="val"] ... |
標(biāo)簽的屬性值是否等于待定值 |
| 偽類選擇器 | E:link E:hover E:active .. |
標(biāo)簽的的當(dāng)前狀態(tài)励饵，選中托修，懸浮等 |
| 偽對象選擇器 | E:befor E:after ... |
作用于塊級對象，在元素前后饶米，或者開始結(jié)束定義特殊樣式 |
基礎(chǔ)知識
block（塊級元素）和 inline（內(nèi)聯(lián)元素） 的區(qū)別
div這樣的塊級元素，就會自動占據(jù)一定矩形空間车胡，可以通過設(shè)置高度檬输、寬度、內(nèi)外邊距等屬性匈棘，來調(diào)整的這個矩形的樣子丧慈；
像“span”這樣的行內(nèi)元素，則沒有自己的獨立空間主卫，它是依附于其他塊級元素存在的逃默，因此，對行內(nèi)元素設(shè)置高度簇搅、寬度完域、內(nèi)外邊距等屬性，都是無效的瘩将。
| 類型|解釋 | 例子 |區(qū)別|
| --- | --- | --- |---|---|
| 塊元素(block element) |一般是其他元素的容器元素吟税，塊元素一般都從新行開始凹耙，它可以容納內(nèi)聯(lián)元素和其他塊元素,常見塊元素是段落標(biāo)簽'P。"form"這個塊元素比較特殊肠仪，它只能用來容納其他塊元素肖抱。 | div、dl异旧、form意述、p、...|block表現(xiàn)出來的特點是折行的.|
| 內(nèi)聯(lián)元素(inline element)| 一般都是基于語義級(semantic)的基本元素吮蛹。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素荤崇，常見內(nèi)聯(lián)元素"a"。|a匹涮、em天试、img、input然低、span喜每、...|inline表現(xiàn)出來是不換行的|
| 可變元素| 需要根據(jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素■ㄈ粒可變元素還是屬于上述兩種元素類別带兜，一旦上下文關(guān)系確定了他的類別，他就要遵循塊元素或者內(nèi)聯(lián)元素的規(guī)則限制吨灭。可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素刚照。|map、button喧兄、del无畔、...|給一個元素加入了浮動(float)的話.不管是block還是inline定義了浮動之后,可以定義高度,寬度.|
常忘的
常常弄不清的布局幾個概念
-
position:檢索對象的定位方式:列
- 例子：position詳解
absolute
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位吠冤。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定浑彰。
fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位拯辙。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定郭变。
relative
生成相對定位的元素，相對于其正常位置進行定位涯保。
因此诉濒，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static 默認(rèn)值夕春。沒有定位未荒，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值及志。
如果希望對象為可視茄猫，其父對象也必須是可視的狈蚤。
- box-sizing:屬性可以為三個值之一：content-box（default），border-box划纽，padding-box脆侮。
- content-box，border和padding不計算入width之內(nèi)
- padding-box勇劣，padding計算入width內(nèi)
- border-box靖避，border和padding計算入width之內(nèi)
- overflow:復(fù)合屬性。**檢索或設(shè)置對象處理溢出內(nèi)容的方式比默。**overflow的效果等同于overflow-x + overflow-y幻捏。
對于table來說，假如table-layout屬性設(shè)置為fixed命咐，則td對象支持帶有默認(rèn)值為hidden的overflow屬性篡九。如果設(shè)為hidden，scroll或者auto醋奠，那么超出td尺寸的內(nèi)容將被剪切榛臼。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到右邊或左邊（視direction屬性設(shè)置而定）的單元格窜司。
- visibility:設(shè)置或檢索是否顯示對象沛善。與display屬性不同，此屬性為隱藏的對象保留其占據(jù)的物理空間
- **對float的理解**：float在絕對定位和display為none時不生效塞祈。感覺對于布局還是有點蒙蔽金刁。這里有篇[CSS float 浮動屬性](http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html)。值得看看议薪！
- 頁面布局方式尤蛮，主要包含：文檔流、浮動層斯议、float屬性抵屿。
- 1.1 文檔流
- HTML頁面的標(biāo)準(zhǔn)文檔流(默認(rèn)布局)是：從上到下，從左到右捅位，遇塊(塊級元素)換行。
- 1.2 浮動層
- 浮動層：給元素的float屬性賦值后搂抒，就是脫離文檔流艇搀，進行左右浮動，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框求晶。而此浮動元素在文檔流空出的位置焰雕，由后續(xù)的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的范圍發(fā)生重疊芳杏，浮動元素覆蓋塊級元素矩屁。內(nèi)聯(lián)元素：有空隙就插入辟宗。
- 1.3 float 屬性介紹
- left ：元素向左浮動。
- right ：元素向右浮動吝秕。
- none ：默認(rèn)值泊脐。
- inherit ：從父元素繼承float屬性。
對比圖如下：
| 樣式 | 圖片| |
| --- | --- | --- |
| 正常情況 | | |
||||
### 基本元素
- <input>標(biāo)簽：主要用于收集用戶信息烁峭，可根據(jù)不同的type屬性值容客，擁有多種形式。
- <select>標(biāo)簽：可創(chuàng)建單選或多選菜單约郁，類似于winform的combox或listbox缩挑。
- <textarea>標(biāo)簽：多行文本區(qū)域。
- <label>標(biāo)簽：相當(dāng)于一個展示文本框鬓梅。
- <fieldset>標(biāo)簽：類似于winform中的groupBox控件供置。
- 列表標(biāo)簽：介紹ul、ol绽快、li芥丧。
|標(biāo)簽 | 說明 |實例 |
| --- | --- | --- |
| input標(biāo)簽 |input 標(biāo)簽用于搜集用戶信息。 |  |
|select|可創(chuàng)建單選或多選菜單谎僻，類似于winform的combox或listbox娄柳。||
|textarea|多行文本區(qū)域，可以通過 cols 和 rows 屬性來設(shè)定 textarea 的尺寸艘绍。||
|label|相當(dāng)于一個展示文本框赤拒。||
|fieldset|類似于winform中的groupBox控件。||
|ul诱鞠、ol挎挖、li|ul ：unordered list （無序列表）<br>ol ：ordered list （有序列表））<br>li ：list item （列表項目），基于上面2個列表子項目航夺。<br>||
### HTML iframe 和 frameset 的區(qū)別
| 標(biāo)簽 |說明 |實例 |屬性|
| --- | --- | --- | --- |
| iframe |iframe 是個內(nèi)聯(lián)框架蕉朵，是在頁面里生成個內(nèi)部框架。 | |frameborder {int}：是否顯示框架的邊框阳掐；<br> src {URL}：指定一個資源(如網(wǎng)頁始衅、圖片)的uri；<br>scrolling {boolean}：是否顯示框架的滾動條缭保；<br>width {int}：定義iframe的寬度汛闸；<br>height {int}：定義iframe的高度；|
|frameset |frameset 定義一個框架集艺骂，包含多個框架诸老，每個框架都有獨立的文檔。|||
### HTML name钳恕、id别伏、class 的區(qū)別
| 類型 | 格式 |應(yīng)用場景 |
| --- | --- | --- |
| name |` <input type="text" name="username" /> `| ①form表單：name可作為轉(zhuǎn)遞給服務(wù)器表單列表的變量名蹄衷；如上面的傳到服務(wù)器的名稱為：username='text的值'。<br>②input type='radio'單選標(biāo)簽：把幾個單選標(biāo)簽的 name設(shè)為一個相同值時厘肮，將會進行單選操作愧口。<br>快速獲取一組name相同的標(biāo)簽：獲取擁有相同name的標(biāo)簽，一起進行操作轴脐，如:更改屬性调卑、注冊事件等<br>|
|id|`<input type=password id="userpwd" />`|①根據(jù)提供的唯一id號，快速獲取標(biāo)簽對象大咱。如：document.getElementById(id)<br>|
|class|指定標(biāo)簽的類名`<input type=button class="btnsubmit" />`|CSS操作恬涧，把一些特定樣式放到一個class類中，需要此樣式的標(biāo)簽碴巾，可以在添加此類溯捆。|
### 框架類型
和iOS一樣（學(xué)習(xí)前端完全可以對比客戶端開發(fā)進行學(xué)習(xí)）分為UI框架和代碼框架。而服務(wù)端的框架更多的是代碼級別的框架厦瓢。
界面框架：Bootstrap提揍、Foundation、Semantic UI
代碼框架：React煮仇、Angulerjs劳跃、Backbone、vuejs