后端工程师必知必会的前端 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倍的可维护性。

---