为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

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

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

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


webp

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

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

.

webp

把元素放到正确的位置上

1)文档流

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

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

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

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

示例:


webp

效果:


webp

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


webp

效果:


webp

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

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

1.2)使用定位脱离文档流

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

脱离前的代码示例:


webp

效果:


webp

脱离后:


webp

效果:


webp

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

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

举个栗子:


webp

效果为:


webp

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

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

2.2)inline 元素

行内(inline)元素会在一行内从左向右排布,如果一行排满了,会往下一行堆叠。

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

举个栗子:


webp

效果为:


webp

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

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

2.3)inline-block 行内块

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

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

示例:

webp

效果为:


webp

2.4)display小结

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

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

示例:


webp

效果:

webp

3)position 样式

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

webp

设置定位后,可以通过设置 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>

效果:


webp

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

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

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

示例:


webp

效果:


webp

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

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

示例:


webp


效果:


webp


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

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


webp

效果:


webp

transition 增加用户体验

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

常与 hover 同时使用。

示例:


webp

效果


webp

webp

border-radius 的高级用法

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

示例:



webp

效果:


webp



作者:IT智云编程
链接:https://www.jianshu.com/p/dae6589ff23e


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消