后台工程师必学的前台 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% 还能实现椭圆（或者者圆形）。

示例：

效果：

最后

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

自己是一个五年的全栈工程师，这里推荐一下我的前台学习交流群：731771211，里面都是学习前台的，群里会不定期升级最新的教程和学习方法，有想学习web前台的，或者是转行，或者是大学生，还有工作中想提升自己能力的web前台党欢迎加入，

点击：前台