前端工程·入门

前言

从"C#"程序员转行做前端已经一年了，从之前的对前端一窍不通到现在能独立开发一个前端应用（网站），积累了一些学习
的方法，最近突然想记录下来，因此有了这篇博客。

如何踏入前端的门

　　相比后台开发，其实前端相对来说入门会很简单。因为前端工作如果分下来的话，入门时应该只是做视觉还原（也就是将UI部门的设计图还原为HTML+CSS）。最开始，我们可能不会思考过多的东西，不会想到前段工程的整体架构是怎样？页面需不需要优化？
　　我们需要注意的就是如何把设计图原封不动的还原为HTML页面。这个时候，我们需要做的就是打实我们的页面结构（html）和样式（css）的基础。

一.HTML（页面结构）

　　html的所有标签，都有他们自己的意思，也就是说html标签是"表意"的。

1.对于文字

　　"span" 表示一般表示文字，它可以在<p>标签内表示强调的文字，也可以在<label>中表示文字部分。

(示例部分为了显示用法，因此写了内联样式，在此不推荐。)
<span>文字</span>
<p><span style="color: red">提示：</span>请查看书中注释</p>
<label><input type="checkbox"><span>全选</span></label>

　　　　文字
　　　　

提示：请查看书中注释


　　　　

　　"strong" 表示强调的文字，默认样式是加粗 font-weight: bold;。

（默认样式是指浏览器直接对标签进行渲染后得到的样式，一般都会对一些默认样式进行修改，e.g. body默认会带有8px的margin）
<span>我叫<strong>Jason Ning</strong></span>

　　　　我叫Jason Ning

　　"em" 和 "i" 同样表示强调的文字，默认样式是斜体 font-style: italic; 。
　　

<span>我叫<em>Jason Ning</em></span>
<span>我叫<i>Jason Ning</i></span>

　　　　我叫Jason Ning
　　　　我叫Jason Ning

　　"sup" 和 "sub" 分别表示上标和下标，默认样式是靠 vertical-align: super; 和 vertical-align: sub; 来控制的。
　　

<span>我是2的平方：<i>2</i><sup>2</sup></span>

　　　　我是2的平方：22

<i>x</i><sub>1</sub>+<i>x</i><sub>2</sub>

　　　　x1+x2

　　在此只列出了常用的文字标签，其他可能用到的可能还有 "big" 、 "small" 等，但是一般我们会规定一个css来表示不同字体大小。
　　

2.对于表格

　　对于表格，我不建议将它用于页面布局，因为表格很不灵活，它被浏览器内置了过多的样式，因此可能会发生很多不方便之后修改的问题。
　　下面是一个表格完整的代码：

3.对于列表

4.对于网页

二.样式与结构的魔法（简单布局）

　　我这里总结一些在显示情境中遇到的一些问题，其中可能从一个属性名切入、也可能从一个页面布局或者一个动画。

1.伸缩盒子FlexBox

　　CSS3带给了我们一个新的display的选择—— flex & inline-flex。为一些之前很头大的布局问题提供了一种全新的解决办法。

情景一

　　『一列固定宽度，另一列（或几列）填充满负div的其他位置。』
　　
　　固定宽度使用 position: absolute 将它放出瀑布流的束缚，固定在一个位置，其他的div使用 padding 将这个固定宽的div的位置让出来。　　

.father
    position: relative
    > .leftChild
        position: absolute
        left: 0
        top: 0
        width: 300px
    > .rightChild
        width: calc(100% - 300px)
        padding-left: 300px

　　这样的缺点是，固定宽div（leftchild）的宽度不能讲父div撑开，因为它脱离了瀑布流。
　　
　　那么现在，如果我们使用flexbox就能很简单的实现这个效果。

.father
    display: flex
    > .leftChild    
        width: 300px
        flex: none
    > .rightChild
        flex: 1
leftChild
rightChild

　　这么做可以实现，无论有几个rightChild，他们都将平均分剩余的宽度。
　　

情景二

　　『所有子元素在一行，每个元素等宽，并均匀分布在父元素中。』
　　
　　之前我们这么做，可能需要用数学来算出每一个元素距离左右的距离。　　

.father
    height: 50px
    > children
        height: 100%
        width: 10%
        margin: 0 5%
        float: left
1
2
3
4
5

　　如果我们需要将每个元素等分开，那么就需要再计算 margin 的距离。这样会导致我们必须知道我们拥有几个子元素，并且数学还要好。
　　
　　那么现在，我们使用 flexbox 来实现这个情景。　　

.father
    height: 50px
    display: flex
    justify-content: space-around
    > div
        width: 10%
        height: 100%
1
2
3
4
5

　　使用 flexbox 就可以简单的实现刚才的布局需求。其中justify-content: space-around是 flexbox 的一个独特的属性。　　

名称 样式
flex-start
1
2
3
4
5
flex-end
1
2
3
4
5
center
1
2
3
4
5
space-between
1
2
3
4
5
space-around
1
2
3
4
5
情景三

　　『元素A宽度固定100px，元素B和元素C按照1:3的比例瓜分剩余的宽度』
　　
　　要实现这个场景，我们可能需要写不止2层结构。

.father
    height: 50px
    position: relative
    > .left
        height: 100%
        position: absolute
        left: 0
        top: 0
        width: 100px
    > .right
        height: 100%
        padding-left: 100px
        > *
            height: 100%
            float: left
        > .b
            width: 25%
        > .c
            width: 75%

<div class="father">
    <div class="left a">A</div>
    <div class="right">
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
</div>
A
B
C

　　首先，我们需要西安区分出左右两个区域，这样在右侧区域我们才可以用百分比设置宽度。这样做会造成是3层的结构，使得页面看起来并不『爽』。
　　
　　那么现在，我们使用 flexbox 来实现这个情景。　

.father
    height: 50px
    display: flex
    > .a
        width: 100px
        flex: none
    > .b
        flex-grow: 1
    > .c
        flex-grow: 3

<div class="father">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
A
B
C

　　这样我们就只用了2层结构就实现了这样的效果。而且也十分契合情景的描述。

2.我们来翻牌吧

　　对于一个单一页面，能展现信息的地方其实并不多，为了达到更多的信息展示，我们有时会对一个列表中的元素添加一层遮罩，来达到显示更多信息的效果，如下图：

信息
更多信息
更多信息
更多信息
　

.one
    width: 200px
    height: 125+30px
    position: relative
    border: 3px solid $font_gray
    cursor: pointer
    > div
        &.front
            > .img
                height: 125px
                > img
                    border-radius: 0
                    border: none
            > .info
                height: 30px
                > span
                    line-height: 30px
                    padding: 0 10px
        &.back
            width: calc(100% - 18px)
            height: calc(100% - 18px)
            display: none
            position: absolute
            top: 0
            left: 0
            padding: 9px
            background-color: #fcfcfc
            > .line
                height: 33%
                width: 100%
                text-align: center
                line-height: 48px
    &:hover
        border: 3px solid $btn_light_blue
        > .back
            display: block

<div class="one">
    <div class="front">
        <div class="img"><img src="./img/冰龙.png"></div>
        <div class="info"><span>信息</span></div>
    </div>
    <div class="back">
        <div class="line"><span>更多信息</span></div>
        <div class="line"><span>更多信息</span></div>
        <div class="line"><span>更多信息</span></div>
    </div>
</div>

　　这个效果是不是很 low，那么我们下面给这个结构加一下有意思的效果吧。

效果一：渐隐
信息
更多信息
更多信息
更多信息

　　要实现这个效果，需要了解一个 animation 属性。
　　
animation: fadeIn .2s 1 ease-in-out;
fadeIn：定义关键帧的名字，如果做过 flash 的同学应该对关键帧很了解，关键帧就是图像的突变点。
.2s：这个动画持续2s的时间。
1：这个动画循环播放1次。
ease-in-out：动画实现的函数曲线。

函数名 描述
linear 动画从头到尾的速度是相同的。
ease 动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。

　　下面我们来介绍一下关键帧的定义方法：

（这里引用了一个_easy-animation.sass的文件，来实现自动添加 keyframes 的浏览器前缀）

　　对于 fadeIn 在动画的 0%(动画开始) 时，透明度是0；在 100%(动画开始) 时，透明度是1。 而 fadeOut则是正好相反。

@include ea-keyframes(fadeIn)
    0%
        @include opacity(0)
    100%
        @include opacity(1)
@include ea-keyframes(fadeOut)
    0%
        @include opacity(1)
    100%
        @include opacity(0)

　　之后我们需要做的就是将这个动画加到刚刚的样式表中，替换掉display: none的效果。
下面是完整的sass文件：

.one
    width: 200px
    height: 125+30px
    position: relative
    border: 3px solid $font_gray
    cursor: pointer
    margin: 0 auto
    > div
        &.front
            > .img
                height: 125px
                > img
                    border-radius: 0
                    border: none
            > .info
                height: 30px
                > span
                line-height: 30px
                padding: 0 10px
        &.back
            width: calc(100% - 18px)
            height: calc(100% - 18px)
            @include opacity(0)
            @include animation(fadeOut .2s 1 ease-in-out)
            position: absolute
            top: 0
            left: 0
            padding: 9px
            background-color: #fcfcfc
            > .line
                height: 33%
                width: 100%
                text-align: center
                line-height: 48px
    &:hover
        border: 3px solid $btn_light_blue
        > .back
            @include opacity(1)
            @include animation(fadeIn .2s 1 ease-in-out)
效果二：翻转

　　我们来看一下如何想要实现翻转的效果。

信息
更多信息
更多信息
更多信息

　　这就是反转的效果，也是通过 animation 属性来实现的，只是关键帧的写法不同。
　　

@include ea-keyframes(front)
    0%
        @include transform(rotateX(0deg))
    60%
        @include transform(rotateX(225deg))
    100%
        @include transform(rotateX(180deg))
@include ea-keyframes(back)
    0%
        @include transform(rotateX(180deg))
    60%
        @include transform(rotateX(405deg))
    100%
        @include transform(rotateX(360deg))

　　其中的back关键帧要实现一个惯性效果，因此对于X轴的翻转度数超过了360°。
　　下面举例解释一下元素分别按照 X、Y、Z 轴旋转的效果：
　　
rotateX

信息
更多信息
更多信息
更多信息

rotateY
信息
更多信息
更多信息
更多信息

rotateZ
信息