前端面试（三）

一、图片整合

用background-position来实现背景图片的定位技术，又称为css精灵图。

用法：

将一些小图片有规则的合成一张图片，即多张图片合为一张整图，再使用background-position属性进行背景定位，用数字精确地定位出背景图图片再布局盒子中的位置。

优点：

• 通过图片整合减少了对服务器的请求次数，从而提高页面的加载速度。
• 通过图片整合减小图片的体积

二、position定位

absolute 生成绝对定位的元素，相对于 static 定位以外的直接父元素进行定位。

fixed 生成固定定位的元素，相对于浏览器窗口进行定位（旧版本IE不支持）。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中（忽略 top，bottom，left，right ，z-index 声明）。

inherit 规定从父元素继承 position 属性的值。

三、颜色表示方式

1、color:blue;

调用颜色属性，将颜色的英文输入在冒号后，以分号结束。
这种方法直接了当，但是能表示的颜色的种类很少。

2、color:#000000;

十六进制 表示法。‘#’号开头，每位数字可为：0、1、2、3、4、5、6、7、8、
9、a、b、c、d、e、f。前1，2位表示红色，3，4位表示绿色，5，6
位表示蓝色。与RGB颜色表示法的思路类似，用红绿蓝三原色组合为各种颜色，种类繁多。

3、color:rgb(0,0,0);

RGB 表示法。有两种值：数值，所有值都是0-255；百分值，所有值为0%-100%。他们的共同特点是第一个值表示红色，第二个值表示绿色，第三个值表示蓝色。通过组合，能够表示各种颜色。

4、color:rgba(0,0,0,0.5);

RGBA 表示法。它是RGB表示法的升级版,新添了透明属性。前三个属性值和RGB表示法相同，第四个属性值的值域为0-1可以精确到小数点后两位。

5、color:hsl（0，100%，100%);

HSL 表示法。H表示色调，该值的值域为0-360，0和360表示红色，120表示绿色，240表示蓝色。S表示饱和度，值域0%-100%。L表示亮度，值域为0%-100%。

6、color:hsla(0,100%,100%,0.5);

HSLA 表示法。是HSL表示法的加强版，增加了透明度的属性值，值域为０-１。

四、Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

采用 Flex 布局的元素，称为 Flex 容器 ，简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目 ，简称"项目"。容器默认存在两根轴：水平的主轴和垂直的交叉轴 。

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器的属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 属性定义，如果一条轴线排不下，如何换行。

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

justify-content 属性定义了项目在主轴上的对齐方式。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性定义项目在交叉轴上如何对齐。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间 。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

五、git常用命令

新建代码库

• 在当前目录新建一个Git代码库 git init
• 下载一个项目和它的整个代码历史 git clone [url]

增加文件

添加当前目录的所有文件到暂存区 add .

代码提交

提交暂存区到仓库区 git commit -m [message]

分支

• 列出所有本地分支 git branch
• 列出所有远程分支 git branch -r
• 新建一个分支，但依然停留在当前分支 git branch [branch-name]
• 新建一个分支，并切换到该分支 git checkout -b [branch]
• 合并指定分支到当前分支 git merge [branch]
• 删除分支 git branch -d [branch-name]

查看信息

• 显示有变更的文件 git status
• 显示commit历史，以及每次commit发生变更的文件 git log --stat

远程同步

• 取回远程仓库的变化，并与本地分支合并 git pull
• 推送分支到远程仓库 git push

六、 css3新特性

关于文本的属性

• 文本阴影: text-shadow: h-shadow(水平阴影) v-shadow(垂直阴影) blur(模糊的距离) color
• 是否允许长单词换行:word-warp: normal/break-word
• 是否允许长单词换行:word-break: normal/break-all(单词不会另起一行显示)
• 服务器端字体: @font-face
  可将字体文件放到web服务器上,在需要的时候自动加载到用户的计算机上

关于背景的属性

background-clip: 用于确定背景画区

• background-clip: border-box; 背景从border开始显示
• background-clip: padding-box; 背景从padding开始显示
• background-clip: content-box; 背景显content区域开始显示
• background-clip: no-clip; 默认属性，等同于border-box

background-origin: 用来规定background-position属性相对于什么位置来定位

• background-origin: border-box; 从border开始计算background-position
• background-origin: padding-box; 从padding开始计算background-position
• background-origin: content-box; 从content开始计算background-position

background-size: 常用来调整背景图片的大小，主要用于设定图片本身。

• background-size: contain; 缩小图片以适合元素（维持像素长宽比）
• background-size: cover; 扩展元素以填补元素（维持像素长宽比）
• background-size: 100px 100px; 缩小图片至指定的大小
• background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸

多背景属性: 多个背景使用逗号隔开
背景颜色表示: rgba()

关于边框的属性

• boder-radius ------圆角边框
• box-shadow: h-shadow(水平阴影) v-shadow(垂直阴影) blur(模糊的距离) color ------盒子阴影
• border-image ------使用图片绘制边框

多列布局

• column-count-------控制栏数
• column-width -------每栏的宽度
• column-gap -------两栏之间的距离
• column-rule:宽度 线型 颜色 -------栏与栏之间的间隔线

七、如何获取对象的属性名

方法一 for...in循环

var obj = { A: 'a', B: 'b', C: 'c' };
for(var key in obj){
    console.log(key); //A B C
}

方法二 Object.keys(obj)

该方法返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用[for...in] 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

var obj = { A: 'a', B: 'b', C: 'c' };
console.log(Object.keys(obj)); // console:["A", "B", "C"]

八、表单<input/>类型与属性

类型

text：单行字段；换行会将自动从输入的值中移除。(默认)

button：无缺省行为按钮。

checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。

file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。

hidden：不显示在页面上的控件，但它的值会被提交到服务器。

image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

password：一个值被遮盖的单行文本字段。

radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组同一时间只有一个单选按钮可以被选择。

range： 用于输入不精确值控件。(数字滑动条)

reset：重置: 用于将表单所内容设置为缺省值的按钮。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

submit：用于提交表单的按钮。

color：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。

datetime-local：用于输入日期时间控件，不包含时区。

email： 用于编辑 e-mail 的字段。

number: 用于输入浮点数的控件。

tel： 用于输入电话号码的控件；换行会被自动从输入的值中移除。 可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。

time： 用于输入不含时区的时间控件。

url： 用于编辑URL的字段。换行会被自动从输入值中移出。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。

week：用于输入一个由星期-年组成的日期，日期不包括时区。

属性

type:表示<input/>元素按照不同的类型呈现出来

value:元素当前的值

readonly:布尔值，如果为真，表示此<input/>元素不能被编辑（比如输入、点选等）

name:<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值

required:布尔值，如果为真，表示只有当此<input>元素有值时，整个表单才能提交

pattern:用来设置某个格式的正则表达式,在提交时会检查其内容是否符合给定格式

placeholder:提示用户内容的输入格式

autofocus:一个布尔值，如果<input>元素的标签里存在此属性，当表单被呈现在网页上时，焦点会自动落在此<input>元素上

autocomplete: 规定输入字段是否启动自动完成功能

multiple:指示用户能否输入多个值,每个值使用逗号分开。这个属性仅在type属性为email或file的时候生效 ,否则被忽视

novalidate:取消验证,即使<input>中添加了requierd,也不进行验证

disabled:如果想禁用某<input>元素时，将此属性放在元素的标签里，此时元素不能被用户手动输入、点选或拖动等。