后端工程师必知必会的前端 css 知识

后端工程师虽然大部分工做都是跟服务器缓存数据库打交道，但有时也须要写一些前端代码。

有些公司的OAM后台基本是由后端工程师承包的，因此前端基础知识是必需要掌握的；就算开发中不直接写前段代码，了解前端知识能让咱们跟前端小伙伴更愉快的交流。

Js对于后端小伙伴来讲不算难点，可以顺手的使用（固然十分依赖 jQuery），涉及到 css 就会有点懵逼了。

后台开发通常不会用到太难的前端技巧，可以在完成正确布局的基础上，再稍微作一些美化，就已经够用了。

下面的内容有一些代码样例，这是一部分前置的 css 样式。

.green {
    background-color: lightseagreen;
}
.red {
    background-color: orangered;
}
.container {
    border: 1px solid #0000f1;
}
.w100 {
    width: 100px;
    height: 100px;
}
.w50 {
    width: 50px;
    height: 50px;
}

把元素放到正确的位置上

1）文档流

浏览器会把 html 元素按照从上到下，从左到右依次排放。

Html 中所有元素都是盒模型，盒子会占用必定的空间，依次排放在HTML中，造成了文档流。

某些特殊的 css 样式会把元素脱离文档流。某个元素脱离文档流后，在文档流中的其余元素将忽略该元素并填补其原先的空间。

1.1）float 浮动方式脱离文档流

示例：

<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

给中间的红色块添加浮动：

<style>
    .float {
        float: left;
    }
</style>
<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 float">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

红色块在原来的行内向左浮动并脱离了文档流，下面的绿色块顶上来了。

float还有一些其余用法，但float通常不经常使用，这里很少作讨论。

1.2）使用定位脱离文档流

若是给元素设置了 position 属性，且该属性的值是 absolute 或者 fixed，则元素也会脱离文档文档流。

脱离前的代码示例：

<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 ">

    </div>
    <div class="green w100">

    </div>
    <div class="red w50 ">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

脱离后：

<style>
    .fixed {
        position: fixed;
    }
    .absolute {
        position: absolute;
    }
</style>
<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 fixed">

    </div>
    <div class="green w100">

    </div>
    <div class="red w50 absolute">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

虽然两个红色块还在原来的坑上，但实际上它们已经不占文档流了，因此下面的两个绿色块都上来了。

1.3）display: none

设置 display 属性为 none，脱离文档流，并不在页面展现了。

2）display 样式

display 样式决定了元素的展示形式。

display 有不少取值，好比上面提到的 none 值表示不在页面展现。

对于后端小伙伴来讲，除了 none 外，只须要再了解三个值就足够用了，它们分别是 block，inline-block，inline。

2.1）block 块元素

块元素在浏览器中展现时，一般会以新行来开始（和结束）。

常见的（display 默认为 block）块元素有 <h1>...<h6>, <p>, <ul>, <table>, <div>, <pre>。

举个栗子：

<div class="container">
    <div class="green">
        哈哈
    </div>
    <h1 class="red w100">呵呵</h1>
    <p class="green">
        嘿嘿
    </p>
</div>

效果为：

三个块级元素各占一行。同时你可能会发现这三个元素上下之间有间距，这是由于 p h1-h6 标签默认是有 margin-top margin-bottom 的。

同时能够给块级元素设置高宽，宽度未设置时默认是 100%。

2.2）inline 元素

行内（inline）元素会在一行内从左向右排布，若是一行排满了，会往下一行堆叠。

常见的行内元素有 span label b i sub sup，等文本格式化标签。

举个栗子：

<div class="container">
    <p>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub><sup class="red w100">呵呵</sup>
    </p>
</div>

效果为：

细心的话，你会发现上面这些元素都设置了 w100 这个类，可是高宽都没有变化。这是由于行内元素不能设置高宽，只会根据内容的高宽自适应。

ps:每一个行内元素之间的空格是由于在编辑前里两个标签之间有个回车以及多个 tab（空格），这些不可见字符被当成一个空格展现了。最后两个元素没有间隔，因此中间没有空格。

2.3）inline-block 行内块

行内块元素既能够设置高宽，又能够像行内元素同样并排排列。

常见的行内块元素有 img input button select等。

示例：

<p>
    <img src="init.png" class="red w100">
    <input class="green w50">
    <button class="red w100">哈哈</button>
    <select class="green w100">
        <option>1</option>
    </select>
</p>

效果为：

2.4）display小结

各个元素都有本身默认的 display 属性，但咱们能够给元素设置 display 属性覆盖默认的属性。
好比给 div 设置 display: inline-block，就可让块儿并排排列了。给 span 设置 display:inline-block，就能够设置高宽了。

示例：

<span style="display: block" class="red">我看起来像是p标签了</span>

<div>
    <p style="display: inline">香蕉</p>
    <p style="display: inline">橙子</p>
    <p style="display: inline">大🍊</p>
</div>

效果：

3）position 样式

position 决定了元素的定位方式。

position	描述
static	默认值，元素框正常生成。块级元素生成一个矩形框，做为文档流的一部分，行内元素则会建立一个或多个行框，置于其父元素中。
relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它本来所占的空间仍保留。
absolute	元素框从文档流彻底删除，并相对于其包含块（离它最近的已经定位--非static定位的祖先元素）定位。包含块多是文档中的另外一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
fixed	元素框的表现相似于将 position 设置为 absolute，不过其包含块是视窗自己。（网站的“联系客服”按钮通常是 fixed 定位）

设置定位后，能够经过设置 top right left bottom 样式来设置元素的位置。

其中，relative 定位的 top right left bottom 值是相对于其原来位置的偏移。
absolute fixed 定位的 top right left bottom 值是距离其包含块内边框的距离。

代码示例：

<div class="container relative">
    <div class="red" style="height: 200px">
        <div class="green absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
    <div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
        <div class="red absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
</div>

效果：

把页面调整的好看一些

使用 calc 与百分比自适应宽度

在作后台页面时，常常会有这样的场景：左侧菜单宽度不变，右侧面板跟随浏览器宽度变化。

解决方案：父元素宽度 100%，左侧菜单宽度固定，右侧面板宽度为 calc(100% - (两个块的内外边距边框之和+左侧宽度))

示例：

<div class="container relative" style="width: 100%">
    <div style="display: inline-block; width: 100px; height: 200px" class="red">

    </div>
    <div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">

    </div>
</div>

效果：

vertical-align:top 行内块经常使用的上下对齐

在写表单或者某些特殊布局时，多个并列的行内块可能高度不一，一般来讲，把他们顶部对齐是比较好看的。

示例：

<div class="container relative" style="width: 100%">
    <div style="display: inline-block; width: 100px; height: 100px; vertical-align: top" class="red">

    </div>
    <div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">

    </div>
</div>

效果：

box-shadow 让块变得更有立体感

在使用面板、按钮、输入框等可交互内容或大块内容时，设置适当的盒阴影效果可以增长页面立体感。

<style>
.panel {
    width: 180px;
    height: 100px;
    box-shadow: 0px 0px 8px red;
}
</style>
<div class="container relative" style="width: 100%; border: none; padding: 10px">

    <div class="panel" style="padding: 10px">
        <h3>内容介绍</h3>
    </div>

</div>

效果：

transition 增长用户体验

transition 可以让不一样状态以前的样式变化有个渐变的过程。也是经常使用的优化手段。

常与 hover 同时使用。

示例：

<style>
.button{
    background-color: red;
    color: white;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;

    transition: background-color .3s;
}

.button:hover {
    background-color: darkolivegreen;
}
</style>
<div class="container relative" style="width: 100%">
    <button class="button">点我</button>
</div>

效果（原谅这里没有 gif）：

border-radius 的高级用法

border-radius 除了能够设置简单的圆角外，还能够单独为不一样的角设置不一样的弧度；全部角设置 50% 还能实现椭圆（或者圆形）。

示例：

<h6 class="inline">小圆点</h6>
<div class="inline" style="width: 6px; height: 6px; border-radius: 50%; background-color: red">
</div>

<div class="red" style="border-top-left-radius: 50px; border-bottom-right-radius: 50px; width: 100px; height: 50px">
</div>

效果：

抛弃jQuery，拥抱 vue

至少能提升一倍的工做效率和N倍的可维护性。

---