前端学习——CSS
在过去的几天里，一个是出于个人兴趣爱好（这个前端学了3、4遍，都没有坚持下去彻底学会）决定痛定思痛，一定要学会起码一种前端框架，一个是出于实验室里的一个项目急需一个界面原型，所以我踏上了漫漫的前端学习之路，这里就先稍微提及一些CSS方面坑的地方，或者常常容易混淆的地方吧。
CSS属性——position
首先来说一说position，说实话这是我为数不多的在我几年前学那本关于CSS的Head First的书中记住的一个CSS属性，这个属性主要是用来控制元素在文档流中的位置以及表现的，常用的也就四个，分别是static（默认值）, relative, absolute, fixed， 其中前两个值都会使得元素在文档流中正常排列，而后两个则会使得元素从文档流中移除，这里需要注意的是top,bottom,left,right或者z-index只有在元素不在文档流中才会生效，
接下来详细地讲一下各个值的区别：
-
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
-
relative
生成相对定位的元素，相对于其正常位置进行定位，它在文档流中原有的位置会被保留。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
-
absolute
脱离文档流，文档流中不会保留它原有的位置，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
-
fixed
与absolute的作用差不多，fixed是相对于浏览器定位，也就是说不管你页面怎么上下滚动，你都能看见这个元素，但是absolute就不行
除了postion之外，另外还有float这个属性可以修改元素在文档流中的表现，然后使用clear，来清除后续的元素的float状态。
总的来说，position、float这些属性可以给你提供花里胡哨的界面排布，但是我个人还是建议除非必要也不需要用这个属性，平时页面布局的时候尽量使用像Grid这样的CSS框架提供的页面排布工具即可，相较于自己写，它们有更好的响应性。
CSS属性——display
一开始看到display这个属性的时候，我还疑惑了一下，这个display和position有什么区别，然后专门去查了一下，然后发现display是用来控制元素的表现以及布局的，比如：block， inline, ineline-block等等，也就是说你可以通过display这个属性，强行把一些内联的元素变成块级的元素，或者反过来，另外需要注意的一点是对于那些inline(不是inline-block)的元素，例如span等元素，height和width属性对于它们是没有效果的，常用的display的值有：none， inline， blcok， inline-block，别的那些华丽呼哨都没什么用
接下来详细解释一下各个值的区别：
-
none
此元素不会被显示
-
inline
此元素会被显示为内联元素，元素前后没有换行符
-
block
此元素将显示为块级元素，此元素前后会带有换行符
-
inline-block
行内块元素
总的来说，还是之前的那句话，能用框架的Grid就用框架的Grid，尽量少自己用这些花里胡哨的东西
CSS属性——transform
transform属性主要是使元素相对于原来的位置发生一些偏移、旋转或者缩放，从而为后面提到的animation以及transition做出铺垫以及一些视觉上的动作，常用的属性值有translate（偏移），rotate（旋转）。
CSS属性——animation
在之前的blog中提到过通过js+canvas的方式来实现动画的功能，但是实际上css本身也通过animation属性提供了动画的功能。
目前 animation 有下面 9 种属性，其中第一个是后面属性的简写形式
| 属性 | 描述 |
|---|---|
| animation | 下面各属性的简写（除了 animation-play-state） |
| animation-name | 指定 @keyframes 动画的名称 |
| animation-duration | 动画完成一个周期的时间，默认为 0s |
| animation-timing-function | 动画运行的’节奏’，默认是 ease |
| animation-delay | 动画开始播放的延迟时间，默认是 0 |
| animation-iteration-count | 动画播放的次数，默认是 1 |
| animation-direction | 规定动画是否在下一个周期逆向播放 |
| animation-fill-mode | 规定动画的填充模式 |
| animation-play-state | 控制动画的运行或暂停，默认是 running |
这里举一个背景颜色逐渐变化的例子
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
z-index: -1;
position: absolute;
margin: 0;
height: 100%;
width: 100%;
background: linear-gradient(#1FA2FF, #12D8FA, #A6FFCB);
overflow: hidden;
}
.filter {
z-index: -1;
position: absolute;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: pink;
animation: change-color 30s ease-in-out infinite both;
}
@keyframes change-color {
0%, 100% {
opacity: 0;
}
50% {
opacity: 0.8;
}
}
</style>
</head>
<body>
<div class="filter"></div>
</body>
</html>
在这段代码中，其实主要是通过一个有颜色filter元素，放在背景的前面，然后通过动画的效果不断地改变它的透明值，从而达到了背景颜色逐渐消失的效果，其中@keyframes就是指定了对应的动画需要做些什么，其中%代表的就是动画的进展到某个百分比之后需要做些什么，这里往往要么是修改透明度，要么是通过transform属性来做出一些动态效果，反正只要你的脑洞够大就能整出好看的动画，除了%，动画也可以通过step的方式来运行，像雪碧图就是通过这种方式来运作的，一些具体细节可以访问CSS Animation具体介绍
CSS属性——transition
transition的作用和animation其实都差不多，都是为了让元素的状态变化导致的视觉上的变化不至于过于突兀，所以transition采用了过渡的方式来衔接一个元素前后的变化，比如一个元素在某个操作之后放大了两倍，那么默认的话浏览器就会很突兀地直接放大两倍，但是加了transition属性之后，浏览器就会通过前后状态的对比再加上过度时间从而计算出一些中间态，从而平滑地发生元素的修改，可能先放大1.1倍再1.2倍最后逐渐到2倍，一般transition也主要和transform和opacity等属性混合使用从而产生一些简单的动画效果，目前transition有下面5种属性，其中第一种是后面4种的简写
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。 |
| transition-timing-function | 规定过渡效果的时间曲线。 |
| transition-delay | 规定过渡效果何时开始。 |
CSS小技巧——文本垂直居中
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中
对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可
代码如下：
<div id="div1">
这是单行文本垂直居中
</div>
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*设置line-height与父级元素的height相等*/
text-align: center; /*设置文本水平居中*/
overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
对于子div块，设定水平和垂直偏移父元素的50%，再使用tranform属性设置translate的值
代码如下：
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
CSS小技巧——设置背景
之前提到了可以通过animation的方式将背景设计为颜色可以随着时间渐变的，但是该如何把filter这个div元素变为背景的一部分，并同时把html和body也变成背景呢，其实很简单，只要将它们的position都设置成absolute，同时设置z-index为-1即可，这里需要注意的是html和body的背景有可能会随着滚动条的滚动而变成空白，所以这里要将它们的height设置为100%，同是为了防止背景没有填满一整个屏幕，我们需要设置min-height为100vh（vh为根据用户浏览器自动适配的1/100的高度，wh则是对应的宽度），并设置flow为auto，background为no-repeat即可
代码如下：
html, body{
position: absolute;
z-index: -1;
margin: 0;
padding-bottom: 50px;
min-height: 100vh;
width: 100%;
background: linear-gradient(#FFFFFF, #6DD5FA, #2980B9) no-repeat;
}
#filter {
width: 100%;
height: 100%;
position: absolute;
background: antiquewhite;
z-index: -1;
animation: filter 10s infinite ease-in-out both;
}
SCSS
注：该片段主要来自阮一峰的SASS用法指南
CSS不是一种编程语言，我们可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
SCSS就是是一种CSS的预编译器，它给CSS增加了更多编程方面的特性，方便了CSS的编写，但是它不能直接用，一定需要对应的转换器将它转换成CSS才可以，至于转换器是什么，怎么用，我会在以后的有关Webpack的blog中给出，说了那么多SCSS增加了哪些特性呢，让我们来看一下吧：
变量
SCSS允许使用变量，所有变量以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$blue : #1875e7;
div {
color : $blue;
}
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
计算功能
SASS允许在代码中使用算式
嵌套
SCSS允许选择器嵌套，例如：
div {
hi {
color:red;
}
}
mixin
使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
条件语句
@if可以用来判断，配套的还有@else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
循环语句
SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
