纸简书生
纸简书生

前端基础知识复习（一）

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
...		 作用于块级对象，在元素前后，或者开始结束定义特殊样式

详细文档

基础知识

block（块级元素）和 inline（内联元素） 的区别

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属性。
        对比图如下：
        
        
| 样式 |  图片|  |
| --- | --- | --- |
| 正常情况 |  ![](http://upload-images.jianshu.io/upload_images/664334-c06dea2b374e9a70.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)|  |
||||

### 基本元素
  1. 标签：主要用于收集用户信息，可根据不同的type属性值，拥有多种形式。