自己整理的面试复习资料|起步

CSS3+H5

[CSS3.0 帮助文档.chm](CSS3.0 帮助文档.chm)

注意：CSS3 不支持 IE6，7，8。兼容性

单位相关：px em rem

相对长度单位

px像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是 16px。所有未经调整的浏览器都符合: 1em=16px。
那么 12px=0.75em,10px=0.625em。

为了简化 font-size 的换算，可以在 css 中的 body 选择器中声明 Font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。

EM 特点

  1. em 的值并不是固定的；

  2. em 会继承父级元素的字体大小。

所以我们在写 CSS 的时候，需要注意两点：

  1. body 选择器中声明 Font-size=62.5%；

  2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位；

  3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明

也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大小为 1.2em，那么在声明 p 的字体大小时就只能是 1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。

rem 特点

​ rem 是 CSS3 新增的一个相对单位（root em，根 em），这个单位引起了广泛关注。这个单位与 em 有什么区别呢？区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。下面就是

一个例子：

p {font-size:14px; font-size:.875rem;}

注意：

​ 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用 rem，如果要考虑兼容性，那就使用 px,或者两者同时使用。

在这里为大家提供一个 px,em,rem 单位转换工具

地址：http://pxtoem.com/

flex 弹性布局：

<参考资料：http://www.runoob.com/w3cnote/flex-grammar.html>

**兼容性问题:**Webkit 内核的浏览器，必须加上-webkit 前缀。

1
2
3
4
.box {
    display: -webkit-flex; /* Safari */
    display: flex;
}

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

1.基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

主轴：橫 交叉轴：竖

2.容器具有的属性
flex-direction

决定主轴的方向（项目的排列方向）

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

定义如果一条轴线排不下，如何换行。

  • nowrap（默认值） ：不换行（会把项目压缩）
  • wrap ：换行
  • wrap-reverse： 换行，第一行在下面
flex-flow

属性和 flex-wrap 属性的简写形式

1
2
3
.box {
    flex-flow: flex-direction flex-wrap;
}
justify-content

项目在主轴上的对齐方式。

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

定义项目在交叉轴上如何对齐

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

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

3.项目具有的属性****

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

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

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

  4. flex-basis：

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

    设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。

  5. flex：flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

  6. align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretc

    该属性可取 6 个值，除了 auto，其他都与 align-items 属性完全一致。

    1
    2
    3
    .item {
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

transtion：过渡

语法格式:

1
transition: 要过渡的属性  花费时间  运动曲线  何时开始;
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3 
1
2
3
4
5
6
7
8
9
10
img {
    width: 80px;
    height: 80px;
    border: 8px solid #ccc;
    border-radius: 50%;
    transition: transform 0.5s ease-in 0s;
}
img:hover {
    transform: rotate(180deg);
}

响应式开发相关

布局方式：固定宽度布局 流式布局栅 格化布局 响应式布局（主流）

响应式布局：缺点。代码冗余，性能拥挤，但是开发效率高

适用于官网博客，新闻资讯等内容性网站

@media 媒体查询

针对不同媒体类型（或者说屏幕宽度）自适应采用不同的样式规则。当你重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。

用于响应式布局，根据设备屏幕不同

常用区间值

超小屏幕 (移动设备)xs w<768px
小屏设备（平板）sm 768px-992px 768<=w<992
中等屏幕（电脑 1024）md 992px-1200px 992=<w<1200
宽屏设备lg 1200px 以上 w>=1200

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

向上兼容：如果设置了小的，小的会传递到大的

向下覆盖：宽度大的覆盖前面宽度更小的

书写顺序建议

如果判断最小值：从小到大写

如果判断最大值：从大到小写

  1. 媒体查询的基本实现方式：常用属性设置: http://www.runoob.com/cssref/css3-pr-mediaquery.html

a) CSS 语法

1
2
3
@media mediatype and|not|only (media feature) {
   CSS-Code;
}

1、and 可以将多个媒体特性连接到一起，相当于“且”的意思。

2、not 排除某个媒体类型，相当于“非”的意思，可以省略。

3、only 指定某个特定的媒体类型，可以省略。

1
2
3
4
5
6
<!--你也可以针对不同的媒体使用不同 stylesheets :  -->
<link
    rel="stylesheet"
    media="mediatype and|not|only (media feature)"
    href="mystylesheet.css"
/>

b) 媒体类型

值 描述
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备

c) 媒体功能

值 描述
device-width 定义输出设备的屏幕可见宽度。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
max-height 定义输出设备中的页面最大可见区域高度。
max-width 定义输出设备中的页面最大可见区域宽度。
min-height 定义输出设备中的页面最小可见区域高度。
min-width 定义输出设备中的页面最小可见区域宽度。
device-height 描述定义输出设备的屏幕可见高度。

bootstrap 框架（针对 bootstrap3）

  • col- 针对所有设备
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
  • .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

boostrap 是 向上兼容的

栅格原理（col-xs-12）：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

栅格原理是本质是设置百分比，即流式布局

offset：通过 margin，因此会影响其他元素导致换行

列排序

push：通过定位，可能会重叠

pull：通过定位，可能会出现

hidden-xs：在某一屏幕隐藏

less

LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，本质上，LESS 包含一套自定义的语法及一个解析器。

安装

1、安装 Nodejs 环境 Node Package Manager (验证 node -v npm -v) npm:node packge manager

2、打开控制台（cmd），执行 npm install -g less (验证 lessc -v) node packet manager

3、命令行编译 lessc path/xxx.less path/xxx.css

编译

浏览器只能识别 CSS，LESS 只是用来提升 CSS 可维护性的一个工具，所最终需要将 LESS 编译成 CSS，然而通过命令行编译效率比较低下，一般都会借助于编辑器来完成编译，以 sublime_text 为例，sublime_text 默认并不支持 LESS 的编译操作，需要安装插件实现。

1、执行 npm install -g less-plugin-clean-css（使用 sublime_text 才用）

2、ctrl+shit+p 打开命令面板

3、输入 install package 然后回车

4、安装 LESS、lessc、Less2Css 三个插件

5、alt+s 快捷键即可实现编译

less 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//语法修改
//变量定义 @变量名:值;
@baseColor: #e92322;
div {
    color: @baseColor;
}
//混入：可以将一个定义好的样式引入另一个样式中 类似函数的调用

.addRadius(@r:10px) {
    border-radius: @r;
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
}
div {
    width: 200px;
    height: 200px;
    //引入已经写好的圆角样式
    .addRadius();
}
//嵌套:实现选择器的继承，减少代码量，同时使代码结构更加清晰
.jd_header {
    width: 200px;
    height: 200px;
    .addRadius();
    > div {
        &::before {
            content: '';
        }
        width: 100%;
        > h3 {
            height: 20px;
            &:hover {
                height: 50px;
            }
        }
    }
}

垂直水平居中

1.水平居中

脱离文档流

  • margin：o auto；
  • 负 margin 法：先 left：50%，然后在给一个负 margin-left 居中元素宽度的一半
  • transform： translateX：-50%
  • 给父容器设置 text-align :center, 然后给子容器加上 display：inline-block;

2.垂直居中

脱离文档流

  • margin： auto 0；
  • 负 margin 法：先 top：50%，然后在给一个负 margin-top 居中元素宽度的一半
  • transform： translateY：-50%

3.table-cell 法 和 flex 弹性盒子法

table-cell 法（对低版本 IE 兼容比较良好）

1
2
3
4
5
6
7
div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}

flex 法：

1
2
3
4
5
6
7
8
9
10
.container {
    width: 300px;
    height: 200px;
    display: -webkit-flex; //兼容weikit
    display: flex;
    -webkit-align-items: center; //兼容weikit
    align-items: center;
    -webkit-justify-content: center; //兼容weikit
    justify-content: center;
}

三角形画法

从底向上

1
2
3
4
5
6
7
8
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom：100px solid red;
}

transparent 属性相当于 rgba（0,0,0,0,）全透明的颜色

清除浮动的方法

  • BFC 消除浮动法：给父盒子加上 overflow：hidden；

    优点： 代码简洁

​ 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

  • 额外标签法：在浮动元素末尾添加一个空的标签例如
    ，或则其他标签 br 等亦可。

​ 优点： 通俗易懂，书写方便

​ 缺点： 添加许多无意义的标签，结构化较差。

  • 使用 after 伪元素清除浮动（推荐）

  • ```css
    .clearfix:after {

      content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;

    }

    .clearfix {

      *zoom: 1;

    } /* IE6、7 专有 */

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    -   优点： 符合闭合浮动思想 **结构语义化正确**

        缺点： 由于 IE6-7 不支持:after，使用 zoom:1 触发 hasLayout。

    ### background 属性详解

    -   background-color 背景颜色

    -   **background-position 背景图片位置（精灵图常用）**

    -   background-size ：规定背景图像的尺寸

    -   **background-repeat：属性设置是否及如何重复背景图像。（精灵图常用）**

    -   background-origin：相对于内容框来定位背景图像（目前不常用）![background-origin](C:\Users\92530\Desktop\面试复习\images\background-origin.png)

    -   background-clip：规定背景的绘制区域（目前我不常用）

    background-clip: border-box|padding-box|content-box;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    -   **background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动（可以用来视差滚动的效果）**

    -   **background-image：设置背景图片（精灵图常用）**

    -   缩写方式（更简洁明了，且对低版本的兼容性更高）

    ```css
    div {
        //   缩写必须按顺序来
        //（<颜色> <background-image背景图片> <background-repeat重复背景图片>
                  <background-attachment 背景固定方式>  <背景图片位置>）
    	background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
    }


兼容性问题

​ 靠积累了这个，常见的要知道，比如 CSS3 新添加的动画和 transition，IE6.7.8 都不支持，以及一些 H5 标签的兼容性问题，JS 的原生方法如 getElementByClassName，IE 低版本不支持，可以采用兼容性写法等等，这个要靠平时多积累

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//1 getElementsByClassName方法在IE8以下版本不支持，因此采用这种写法
/////////////////////////////////////////////////////////////////////
eg.getElementsByClassName = function (className, element) {
    //如果支持则直接返回该方法
    if (document.getElementsByClassName) {
        return (element || document).getElementsByClassName(className)
    }
    //如果不支持则采用兼容性写法
    var children = (element || document).getElementByTagName('*')
    var elements = new Array()

    for (var i = 0; i < children.length; ++i) {
        var child = children[i]
        var classNames = child.className.split(' ')
        //将class样式分割
        for (var j = 0; j < classNames.length; ++j) {
            if (classNames[j] == className) {
                elements.push(child)
                break
            }
        }
    }
    return elements
}
///////////////////////////////////////////////////////////////////

浏览器前缀

浏览器前缀 浏览器
-webkit- Google Chrome, Safari, Android Browser
-moz- Firefox
-o- Opera
-ms- Internet Explorer, Edge
-khtml- Konqueror

H5 相关

块级元素和行内元素的区别

块级

1.块级元素独占一行，当没有设置宽高时，它默认设置为 100%

2.块级元素允许设置宽高，width、height、margin、padding、border 都可控制

3.块级元素可以包行内元素、块级元素

（有些特殊的块级元素不能包含块级元素,只能包含行内元素：h1~h6、p、dt）

行内

1.行内元素不能独占一行，与其他行内元素排成一行

2.行内元素不能设置 width、height、margin、padding

3.行内元素默认宽度为其 content 宽度

4.行内元素只能包括文字或行内元素、行内块元素，不能包括块级元素

5.display：inline-block：行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置 width 及 height

（2）有一些特别的行内元素可以设置宽高

替换元素：、、