重新入门前端(2)

我对CSS一无所知

Posted by Donggu Ho on 2017-03-14

在CSS课上写这个真应景啊hhhhh

JavaScript早已画风根本不认识的今天,CSS也并不是当初那个纯靠手打完全静态的CSS了。通过LESS/SASSCSS预处理器,可以构建出有变量、可嵌套、可运算的样式表;同时CSS3标准提供了大量更为方便的CSS属性,解放人类。

此处记录一些相对新的CSS相关的使用与方法。记录比较零散,各大标题并无并列关系。

CSS3:更加动态与现代的CSS属性

CSS3中有许多有趣有用的属性,依靠这些可以方便地实现一些之前需要较多JS代码才能完成的效果。

Flex布局:更加清晰简明的布局控制

CSS之前的布局基于传统的盒状模型(box-model),需要调整displaypaddingmarginfloat等一系列属性;而且text-alignvertical-align属性也是各种限制,当想要做出常见的垂直居中等布局时就会非常不方便。Flex布局由W3C联盟于2009年提出,Flex 意指 Flexible(弹性的),它可以轻松地实现各种对齐、分布布局,而且现已获得各大浏览器支持,放心用~ 妈妈再也不用担心我没有bootstrap:)

假如有 Ai/Ps 等一系列设计软件使用经验的话就能非常轻松地理解 Flex 布局的各项属性的内涵:对齐和分布。

基础概念

当一个元素使用 Flex 布局,则称该元素为 Flex容器(flex container),而元素的子元素成为 Flex项目(flex item)。

1
2
3
4
5
6
7
8
9
10
.box{
display : flex;
display: -webkit-flex; /* Safari */
}

/*行内元素也可以应用Flex布局*/
.box{
display: inline-flex;
display: -webkit-inline-flex; /* Safari */
}

注意: Flex布局决定的是元素内部的子元素的显示布局方式,它并不改变元素本身与其它元素之间的布局关系。

Flex定义容器内有主轴main axis交叉轴cross axis,默认主轴水平,交叉轴竖直。其开始端分别为main startcross start,结束端为main endcross end。默认水平以左开始,竖直方向以上开始,但可以通过设置相应属性改变。

Flex项目默认按主轴方向排列,也就意味着某种程度上只要设定了 Flex 布局就可以轻松拥有水平方向行内布局了~

容器属性

容器可以应用的属性包括:

属性 控制
flex-direction 主轴方向
flex-wrap 自动换行
flex-flow 上述两属性的合并
justify-content 项目在主轴方向上的对齐/分布
align-items 项目在交叉轴方向的对齐/分布
align-content 多根轴线/多行时的对齐分布

项目属性

项目可以应用的属性包括:

属性 控制
order 出现的顺序;越小越靠前。默认为0
flex-grow 有多鱼空间时的项目的放大比例,默认为1
flex-shrink 空间不足时项目的缩小比例,默认为1
flex-basis 分配多余空间时项目默认尺寸,默认为auto
flex 以上三项的合并属性
align-self 覆盖align-items,定制对齐方式

实例

使用Flex布局来实现骰子的六个面~

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
<div class="box box1">
<div class="item"></div>
</div>

<div class="box box2">
<div class="item"></div>
<div class="item"></div>
</div>

<div class="box box3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="box box4">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="box box5">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>

<div class="box box6">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
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
body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
}
.box {
background: #eee;
border-radius: 5px;
padding: 10px;
height: 80px;
width: 80px;
margin: 20px;
}
.box .item {
background: #222;
border-radius: 999em;
height: 20px;
width: 20px;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.box3 {
display: flex;
justify-content: space-around;
}
.box3 .item:nth-child(2) {
align-self: center;
}
.box3 .item:nth-child(3) {
align-self: flex-end;
}
.box4 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box4 .item:nth-child(1) {
margin-right: 20px;
}
.box4 .item:nth-child(3) {
margin-right: 20px;
}
.box4 .item:nth-child(1) {
align-self: flex-start;
margin-top: 4px;
}
.box4 .item:nth-child(3) {
align-self: flex-end;
margin-bottom: 4px;
}
.box4 .item:nth-child(2) {
align-self: flex-start;
margin-top: 4px;
}
.box4 .item:nth-child(4) {
align-self: flex-end;
margin-bottom: 4px;
}
.box5 {
display: flex;
flex-direction: column;
align-content: space-between;
justify-content: space-between;
}
.box5 .column {
display: flex;
justify-content: space-between;
}
.box5 .column:nth-child(2) {
justify-content: center;
}
.box6 {
display: flex;
flex-direction: column;
align-content: space-between;
justify-content: space-between;
}
.box6 .column {
display: flex;
justify-content: space-around;
}

参考链接

Stylus: 可嵌套可编程的样式语言

stylus 大法好!stylus解放全人类!

CSS虽然只是个无脑的智障语言(大概并不是语言)吧,但是写多了看着重重叠叠的选择器也是很烦的……这时抬头一看stylus简直可以说是务必清爽了:分号可选,大括号可选,冒号可选,支持嵌套。可以说是眼清目明了。
不能感受到的话,请看一下例子:

这是上文中对1号骰子的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
body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
}
.box {
background: #eee;
border-radius: 5px;
padding: 10px;
height: 80px;
width: 80px;
margin: 20px;
}
.box .item {
background: #222;
border-radius: 999em;
height: 20px;
width: 20px;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
}

而它其实来自这样的stylus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body
display flex
flex-direction row
flex-wrap wrap
width 500px

.box
background #eee
border-radius 5px
padding 10px
height 80px
width 80px
margin 20px
.item
background #222
border-radius 999em
height 20px
width 20px

.box1
display flex
justify-content center
align-items center

……Wow

这么看来好像只是单纯地去掉了分号大括号冒号,然后可以嵌套而已;但其实stylus的特性远不止此。它还支持定义变量函数运算,甚至是循环语句等一系列特性。由于来自Node.js,它未来应该还能支持更多更复杂的特性。

Stylus的安装与使用

  • 安装 Node.js 并配置环境变量
  • 全局安装 Stylus
1
npm install -g stylus
  • 在IDE中使用和调试
    JetBrain WebStorm中使用stylus时,IDE会自动检测到该格式并提供File Watcher进行自动编译与热更新。需要注意的是,一定要先在 Node.js 中全局安装 stylus,否则可能无法正确编译;如果不能自动找到相应的编译模块,可能需要检查 Settings | Languages&Frameworks | Node.js and NPM 的配置。

附:骰子的stylus源码戳这里