学习笔记

孜孜不倦，蒸蒸日上

0%

前端面试题-css(补充中...)

发表于 分类于 阅读次数： Valine：

css3新特性

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
1、选择器
    伪类选择器(有时候同一个元素在不同动作下有不同的样式)
        
    伪类主要有两方面的用处，
        一方面是标记一些特殊的状态；
            a:{
                text-decoration: none;
            }
            a:link{ ... }
            a:visited{ ... }
            a:hover{
                text-decoration: underline;
            }
            a:active{ ... }
        另外还有一类伪类是有筛选的功能
            li:first-child {} //选取当前选择器下第一个元素
            li:last-child{}

            li:nth-child(5) {} //选取指定位置的元素

            li:first-of-type {}
            li:last-of-type {}

            li:nth-of-type(n) {}

    伪元素选择器(伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并不是真实的 DOM 元素，所以叫伪元素选择器。伪元素选择器构造的元素是虚拟的，所以不能用 JS 去操作它)
    ::first-line // 为某个元素的第一行文字使用样式。
    
    ::first-letter // 为某个元素中的文字的首字母或第一个字使用样式。
    
    ::selection // 对光标选中的元素添加样式

    p::before { // 在某个元素之前插入一些内容
        content: "前面插入的内容";
        color: red;
    }

    p::after { // 在某个元素之后插入一些内容
        content:"后面插入的内容";
        color: purple;
    }  

2、圆角边框
    border-radius:25px;

3、阴影效果
    语法(box-shadow: x-shadow y-shadow blur spread color inset;)

    box-shadow: 10px 10px 5px #888888;

    text-shadow: 5px 5px 5px #FF0000; 文本阴影

4、transform 变换效果

5、animation 动画效果

6、transition 过渡效果

等

HTML5新特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1、语义化标签
    header/footer/nav/dialog

2、视频和音频
    audio和video

3、Canvas绘图

4、svg绘图(可伸缩的矢量图形)
    区别：svg使用xml描述2d图形，canvas使用js来描绘

5、拖放api(drag,任何元素都能够进行缩放)

6、web worker

7、web storage
    客户端存储数据的两个对象为
    localStorage
    sessionStorage

8、webSocket


ES6新特性

1
2
3
4
5
6
7
8
9
10
11
1、变量声明(let和const)

2、解构

3、拓展运算符(...)

4、箭头函数

5、类的概念


css布局方式

flex布局

float布局

响应式布局

标准盒模型和IE盒模型

1
2
3
box-sizing: content-box; /* 标准盒模型 */

盒子实际宽/高 = content(宽/高)  
1
2
3
box-sizing: border-box; /* IE盒模型 */

盒子实际宽/高 = content(宽/高) + padding*2 + border*2

BFC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于普通流，即：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
只要元素满足下面任一条件即可触发 BFC 特性

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
表格单元格，table-cell
弹性布局，flex

解决问题：
1、外边距margin的塌陷问题(两个盒子设置margin,相邻的margin会重叠)

2、BFC来清除浮动(overflow:hidden,解决父级高度塌陷)

浏览器运行机制(渲染过程),重绘和重排在渲染过程中的哪一部分？

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
基本流程：
解析 HTML Source，生成 DOM 树。

解析 CSS，生成 CSSOM 树。

将 DOM 树和 CSSOM 树结合，去除不可见元素(很重要)，生成渲染树( Render Tree )。

Layout (布局)：根据生成的渲染树，进行布局( Layout )，得到节点的几何信息(宽度、高度和位置等)。

Painting (重绘)：根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上

重绘：元素的视觉表现属性被改变即触发重绘，如visibility、opacity ，不会影响到 dom 结构。改变某个元素的背景色、文字颜色、边框颜色等等
不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

重排/回流：就是渲染树的一部分必须要更新，并且节点的尺寸发生了变化。重排也会触发重绘。常见情况：
1) DOM 操作,添加或者删除可见的DOM元素等
2) 元素位置改变
3) 修改 width、display 等 CSS 属性
4) 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变
5) 浏览器窗口变化（滚动或缩放）
6) 页面渲染初始化
注意：重排(回流)必将引起重绘，而重绘不一定会引起回流。 display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

减少回流：
减少dom的操作
读写分离（获取元素放一块， 修改元素的宽度高度放一块）
样式集中修改： divStyle.cssText = ‘width:100px;height:100px;border:1px solid black’
元素批量修改：使用文档碎片，createDocumentFragment 将需要创建的元素一次性创建再一次性拼接到dom上
动画效果应用到position 属性为absolute或fixed的元素上（脱离文档流）
减少table布局

在地址栏里输入一个地址回车会发生那些事情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(1)将域名进行DNS解析
- 浏览器DNS缓存
- 系统DNS缓存
- 路由器DNS缓存
- 网络运营商的DNS缓存

(2)Tcp 三次握手
- 客户端发送一个带有SYN（synchronize）标志的数据包给服务端
- 服务端接收成功后，回传一个带有SYN/ACK标志的数据包传递确认信息，表示我收到了
- 客户端再回传一个带有ACK标志的数据包，表示我知道了，握手结束

(3)发送响应

(4)接受响应

(5)浏览器解析渲染页面（也就是浏览器的运行机制）

(6)Tcp 四次挥手
- 客户端发送一个FIN，用来关闭客户端到服务端的数据传送，客户端进入FIN_WAIT_1状态
- 服务端收到FIN后，发送一个ACK给客户端，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），服务端进入CLOSE_WAIT状态
- 服务端发送一个FIN，用来关闭服务端到客户端的数据传送，服务端进入LAST_ACK状态
- 客户端收到FIN后，客户端t进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，服务端进入CLOSED状态，完成四次挥手

rem、em、vh、px各自代表的含义？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
px：绝对单位，像素

em：相对单位，
em根据自身，如果自身没有设置字体大小，那么就会寻找最近具有字体大小的父盒子(基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值)
比如父元素font-size:12px;
　　自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;
　　但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算

rem：相对单位, 相对根节点html的字体大小来计算
比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；

rem布局的本质是等比缩放，一般是基于宽度

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
比rem更好的方案
vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100

vw和百分比有什么区别？
百分比有继承关系，继承至父级；vw只和设备的宽度有关系；

什么是响应式设计？

1
2
3
4
5
6
7
8
9
响应式设计就是 在不同屏幕分辨率的终端上浏览网页的不同展示方式


实现响应式布局的方式有如下：

媒体查询（设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表）
百分比
vw/vh
rem

css选择器有哪些？优先级？

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
优先级  内联 > ID选择器 > 类选择器 > 标签选择器

关于css属性选择器常用的有：

id选择器（#box），选择id为box的元素
类选择器（.box），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
属性选择器
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下：

层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器
:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 <selector> 元素的所有元素
属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

清除浮动的方法

为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

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
方法一：使用带 clear 属性的空元素

在浮动元素后使用一个空元素,并在 CSS 中赋 予.clear{clear:both;}属性即可清理浮动。

方法二：使用 CSS 的 overflow 属性

给浮动元素的父级容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还 需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。 在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动 的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影 响布局，不推荐使用。

方法四：使用 CSS 的:after 伪元素

给浮动元素的父级容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实 现元素末尾添加一个看不见的块元素清除浮动
.clearfix:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1; //IE6清除浮动的方式， *号只有IE6-IE7执行，其他浏览器不执行
}

方法五： 还有一种更为简单的方式，给父元素定义好height高度，就解决了父级元素无法获取到高度的问题

常见的行内元素、块级元素、空(void)元素

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）

1
2
3
4
5
6
7
8
9
10
11
12
块级元素（div,p,h1...h6,ol,ul,table）

每个块级元素都是独自占一行、元素的高度宽度都是可以设置的

行内元素（span,a,img,input,strong）

可以和其他元素处于一行上，元素的高度宽度顶部和底部边距不可设置

空元素：
即没有内容的html元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签；
常见的有：br hr img input link meta
鲜见的有：area base col colgroup param

如何让谷歌浏览器支持小字体

1
2
3
4
5
//利用缩放来让字体变小，字体为12px的时候就小不了了。
.small-font{
	transform:scale(0.5);
	-webkit-transform:scale(0.5);
}

画一条0.5px的直线

1
2
3
//考查的是css3的transform
height: 1px;
transform: scale(0.5);

画一个三角形

1
2
3
4
5
6
7
8
9
10
11
//这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css
border-color: red green blue pink; 可以把物体分为四个三角形区域，
               上   右    下   左，每个区域有一种颜色，如果把其他三个区域设定成透明色，就制作出来一个三角形
.a {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent #0099CC transparent; //transparent透明
}
<div class="a"></div>

垂直居中的方式

几种垂直居中的方法

垂直居中主要分为了两种类型：居中元素宽高已知 和 居中元素宽高未知

以下的方法都围绕着该HTML展开

1
2
3
<div  class="wrap">
    <div  class="box">123</div>
</div>

居中元素宽高元素未知

（常用）：display：flex （①）
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    /* 核心代码 */
    display:flex;
    justify-content:center;
    align-items:center;
}

.box{//子元素宽高可设可不设

}
常用）：display：flex + margin auto（②）
1
2
3
4
5
6
7
8
9
10
11
12
.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    /* 核心代码 */
    display:flex;
}

.box{//子元素宽高可设可不设
    /* 核心代码 */
    margin: auto;
}
absolute + transform
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box {//子元素宽高可设可不设
    /* 核心代码 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
table-cell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    /* 核心代码 */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.box{ //在子元素里加上display: inline-block;
    /* 核心代码 */
    display: inline-block;
}
grid 网格布局
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
    width: 300px;
    height: 300px;
    background-color: plum;
    /* 核心代码 */
    display: grid;
    align-items: center;
    justify-content: center;
    
}
.box {//子元素宽高可设可不设
    
}

居中元素宽高元素已知

absolute + margin:auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box{//子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: powderblue;
    /* 核心代码 */
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin:auto; 
}
absolute + 负margin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box{//子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: powderblue;
    /* 核心代码 */
    position: absolute;
    left: 50%;
    top: 50%;
    /*宽高的一半*/
    margin-left: -50px;
    margin-top: -50px; 
}
margin，transform配合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrap{
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 核心代码 */
    /*防止外边距塌陷。解决外边距塌陷的方法：
    父元素加overflow:hidden或加上边框*/
    overflow: hidden;
}
.box{ //子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: plum;
    /* 核心代码 */
    margin:50% auto;
    transform: translateY(-50%); 
}

实现两栏布局(左侧固定 + 右侧自适应布局)

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
//html
<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

1、左边元素宽度固定 ，设置向左浮动。将右边元素的 margin-left 设为固定宽度 。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素
.outer {
    height: 100px;
}
 
.left {
    background-color: lightblue;
    height: 100px;
    //核心
    width: 300px;
    float: left;
}
 
.right {
    height: 100px;
    background-color: saddlebrown;
    //核心
    margin-left: 300px;
}

2、同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠

.outer {
    height: 100px;
}
 
.left {
    background-color: lightblue;
    height: 100px;
    //核心
    width: 300px;
    float: left;
}
 
.right {
    height: 100px;
    background-color: saddlebrown;
    //核心
    overflow: hidden;
}

3、利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1

.outer {
    height: 100px;
    //核心
    display: flex;
}
 
.left {
    background-color: lightblue;
    height: 100px;
    //核心
    width: 300px;
}
 
.right {
    height: 100px;
    background-color: saddlebrown;
    //核心
    flex: 1;
}

实现三栏布局(左右侧固定 + 中间自适应布局)

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
//html
<div class="father">
    {/* center在哪个位置都可以 */}
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

1、利用position ,左右盒子分别设置绝对定位，给固定宽高，中间宽度自适应，设置高度，margin左右盒子的宽度

.left,
.right {
    height: 300px;
    width: 200px;
    top: 0;
    //核心
     position: absolute;
}
.left {
    left: 0;
    background-color: bisque;
}
.right {
    right: 0;
    background-color: blueviolet;
}
.center {
    height: 300px;
    background-color: aqua;
    //核心
    margin: 0 200px;
} 

2、利用浮动，左右设置固定宽高，并设置左右浮动，中间一栏设置高度并margin左右栏的宽度 

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
    {/* 注意：中间一栏center必须放在必须放在最后,不然右边div会掉下来 */}
    <div class="center"></div>
</div>

.left,
.right {
    height: 300px;
    width: 200px;
}
.left{  
    background-color: bisque;
    //核心
    float: left;
}
.right{
    background-color: blueviolet;
    //核心
    float: right;
}
.center {
    height: 300px;
    background-color: aqua;
    //核心
    margin: 0 200px;
}  

3、利用flex，左右栏设置固定宽高，中间设为flex:1
<div class="father">
    <div class="left"></div>
    {/* center在中间 */}
    <div class="center"></div>
    <div class="right"></div>
</div>

.father{
     //核心
    display: flex;
}
.left,
.right {
    height: 300px;
    width: 200px;
}
.left{
    background-color: bisque;
}
.right{
    background-color: blueviolet;
}
.center {
    height: 300px;
    background-color: aqua;

     //核心
    flex: 1;
}  

4、圣杯布局，利用浮动和负边距实现

将三列都放在同一个父元素里，父元素设置左右的padding,然后中间的盒子放在最前面，

三个盒子都设置左浮动，中间盒子宽度100%，左右盒子固定宽高，然后会把左右盒子挤下去,

通过设置负值回到上一行,左盒子负值100%，右盒子负值自身宽度

再利用相对定位，定位到两边，左盒子设置左边距-100%，右盒子设置右边距-自身宽度

最后父盒子设置清除浮动 

注：圣杯布局中间盒子宽度不能小于左盒子宽度，不然左盒子上不去

<div class="father">
    {/* center放在最前面 */}
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.left,
.right {
    height: 300px;
    //核心
    position: relative;
    float: left;
    width: 200px;
}

.father{
    //核心
    overflow: hidden;
    padding: 0 200px;
}

.left {
    background-color: bisque;
    //核心
    left: -200px;
    margin-left: -100%;  
}

.right {
    background-color: blueviolet;
    //核心
    right: -200px;
    margin-left: -200px;   
}

.center {
    height: 300px;
    background-color: aqua;
    //核心
    float: left;
    width: 100%;
}

5、双飞翼布局，同圣杯布局，利用浮动和负边距实现，不同的是左右盒子位置的保留不是通过父盒子的padding，而是中间盒子内部元素的margin，且此布局无需用到相对定位
<div class="father">
    <div class="center">
        <div class="incenter"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.left,
.right {
    float: left;
    height: 300px;
    width: 200px;
}

.father {
    overflow: hidden;
}

.left {
    margin-left: -100%;
    background-color: bisque;
}

.right {
    margin-left: -200px;
    background-color: blueviolet;
}

.center {
    float: left;
    width: 100%;
    height: 300px;
    background-color: aqua;

}

.incenter {
    margin: 0 200px;
}

Less、scss、stylus 对比

都有变量、混入、函数、嵌套、继承、颜色函数等的概念

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
1、关于声明变量

Less使用@变量名：值  
例如：
    @maincolor : #092873;
    body {
        color: @maincolor;
    }

Scss使用$变量名：值  
例如：
    $maincolor : #092873;
    body {
        color: $maincolor;
    }

Stylus使用 变量名=值，$可加可不加  
例如：
    maincolor = #092873;
    body //不加大括号，有点费眼
        color mainColor

2、关于作用域
Scss没有全局作用域的概念，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

Less和Styuls中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

3、关于混合——Mixins

1）Scss的混合：

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号：分开。

调用时使用“@include”，然后在其后紧跟你要调用的Mixins名
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){	
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

2）Less的混合：

在Less中可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号：分隔开。

调用时直接.mixinName()。

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

3）Stylus的混合：

可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号=来连接。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

4、关于嵌套

嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。

使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号｛｝里写这些元素。同时可以使用“&”符号来引用父选择器

Scss、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

5、关于继承

1）Sass和Stylus的继承

Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}	

编译为CSS后代码如下：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}	

2）Less的继承

LESS支持的继承和Scss与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。
这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

编译为CSS后代码如下：


.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}	

6、关于运算符

Less可以对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。

Scss在数字运算上要比LESS更专业，他可以直接换算单位了。Scss可以处理无法识别的度量单位，并将其输出。

Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}


7、关于颜色函数

Scss、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值

8、关于导入

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。

但是，如果你是通过“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。

注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突

9、关于判断语句 if 和 循环语句 for

Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层

1
2

...补充中
------ The End ------
您的认可是我不断进步的动力！