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

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

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

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

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

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

把元素放到正确的位置上

1）文档流

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

Html 中全部元素都是盒模型，盒子会占用一定的空间，依次排放在HTML中，形成了文档流。

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

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

示例：

效果：

 

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

效果：

 

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

float还有一些其他用法，但float一般不常用，这里不多做讨论。

1.2）使用定位脱离文档流

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

脱离前的代码示例：

效果：

脱离后：

效果：

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

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>。

举个栗子：

效果为：

 

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

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

2.2）inline 元素

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

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

举个栗子：

效果为：

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

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

2.3）inline-block 行内块

行内块元素既可以设置高宽，又可以像行内元素一样并排排列。

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

示例：

效果为：

 

2.4）display小结

各个元素都有自己默认的 display 属性，但我们可以给元素设置 display 属性覆盖默认的属性。

比如给 div 设置 display: inline-block，就可以让块儿并排排列了。给 span 设置 display:inline-block，就可以设置高宽了。

示例：

 

效果：

3）position 样式

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

设置定位后，可以通过设置 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% - (两个块的内外边距边框之和+左侧宽度))

示例：

效果：

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

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

示例：

效果：

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

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

 

效果：

transition 增加用户体验

transition 能够让不同状态之前的样式变化有个渐变的过程。也是常用的优化手段。

常与 hover 同时使用。

示例：

效果

border-radius 的高级用法

border-radius 除了可以设置简单的圆角外，还可以单独为不同的角设置不同的弧度；所有角设置 50% 还能实现椭圆（或者圆形）。

示例：

效果：

最后

文章分享就到这里了，更多干货可以关注一下小编。