CSS
选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
基本类型分为如下几种：
| 类型 | 例子 | 解释 |
|---|---|---|
| 元素选择器 | 通配合选择符（*） 类选择符（.） id选择符（#id） ... |
对标签的选择 |
| 关系选择器 | 包含选择符（E F） 子选择符（E>F） 相邻选择符（E+F） ... |
标签与标签之间的关系是否满足 |
| 属性选择器 | E[att] E[att="val" E[att~="val"] ... |
标签的属性值是否等于待定值 |
| 伪类选择器 | E:link E:hover E:active .. |
标签的的当前状态，选中，悬浮等 |
| 伪对象选择器 | E:befor E:after ... |
作用于块级对象，在元素前后，或者开始结束定义特殊样式 |
基础知识
div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
像“span”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
| 类型|解释 | 例子 |区别|
| --- | --- | --- |---|---|
| 块元素(block element) |一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P。"form"这个块元素比较特殊，它只能用来容纳其他块元素。 | div、dl、form、p、...|block表现出来的特点是折行的.|
| 内联元素(inline element)| 一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。|a、em、img、input、span、...|inline表现出来是不换行的|
| 可变元素| 需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。可变元素为根据上下文语境决定该元素为块元素或者内联元素。|map、button、del、...|给一个元素加入了浮动(float)的话.不管是block还是inline定义了浮动之后,可以定义高度,宽度.|
常忘的
常常弄不清的布局几个概念
-
position:检索对象的定位方式:列
- 例子：position详解
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
如果希望对象为可视，其父对象也必须是可视的。
- box-sizing:属性可以为三个值之一：content-box（default），border-box，padding-box。
- content-box，border和padding不计算入width之内
- padding-box，padding计算入width内
- border-box，border和padding计算入width之内
- overflow:复合属性。**检索或设置对象处理溢出内容的方式。**overflow的效果等同于overflow-x + overflow-y。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
- visibility:设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
- **对float的理解**：float在绝对定位和display为none时不生效。感觉对于布局还是有点蒙蔽。这里有篇[CSS float 浮动属性](http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html)。值得看看！
- 页面布局方式，主要包含：文档流、浮动层、float属性。
- 1.1 文档流
- HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。
- 1.2 浮动层
- 浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
- 1.3 float 属性介绍
- left ：元素向左浮动。
- right ：元素向右浮动。
- none ：默认值。
- inherit ：从父元素继承float属性。
对比图如下：
| 样式 | 图片| |
| --- | --- | --- |
| 正常情况 | | |
||||
### 基本元素
- <input>标签：主要用于收集用户信息，可根据不同的type属性值，拥有多种形式。
- <select>标签：可创建单选或多选菜单，类似于winform的combox或listbox。
- <textarea>标签：多行文本区域。
- <label>标签：相当于一个展示文本框。
- <fieldset>标签：类似于winform中的groupBox控件。
- 列表标签：介绍ul、ol、li。
|标签 | 说明 |实例 |
| --- | --- | --- |
| input标签 |input 标签用于搜集用户信息。 |  |
|select|可创建单选或多选菜单，类似于winform的combox或listbox。||
|textarea|多行文本区域，可以通过 cols 和 rows 属性来设定 textarea 的尺寸。||
|label|相当于一个展示文本框。||
|fieldset|类似于winform中的groupBox控件。||
|ul、ol、li|ul ：unordered list （无序列表）<br>ol ：ordered list （有序列表））<br>li ：list item （列表项目），基于上面2个列表子项目。<br>||
### HTML iframe 和 frameset 的区别
| 标签 |说明 |实例 |属性|
| --- | --- | --- | --- |
| iframe |iframe 是个内联框架，是在页面里生成个内部框架。 | |frameborder {int}：是否显示框架的边框；<br> src {URL}：指定一个资源(如网页、图片)的uri；<br>scrolling {boolean}：是否显示框架的滚动条；<br>width {int}：定义iframe的宽度；<br>height {int}：定义iframe的高度；|
|frameset |frameset 定义一个框架集，包含多个框架，每个框架都有独立的文档。|||
### HTML name、id、class 的区别
| 类型 | 格式 |应用场景 |
| --- | --- | --- |
| name |` <input type="text" name="username" /> `| ①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。<br>②input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。<br>快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等<br>|
|id|`<input type=password id="userpwd" />`|①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)<br>|
|class|指定标签的类名`<input type=button class="btnsubmit" />`|CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。|
### 框架类型
和iOS一样（学习前端完全可以对比客户端开发进行学习）分为UI框架和代码框架。而服务端的框架更多的是代码级别的框架。
界面框架：Bootstrap、Foundation、Semantic UI
代码框架：React、Angulerjs、Backbone、vuejs