后端工程师必知必会的前端 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">大