Day19. 後端工程师需要具备的前端常识

请问你只会<br /> 跟  吗 ? 如果你只会这些的话，这篇会对你的帮助很大

後端写样式，要有後端的样子。我们虽然没办法像前端那麽专业，但我们的自由度相对前端还要自由很多。首先我们先来介绍，後端工程师应该具备的一些工具

!important

由於後台画面并不会太复杂，不会有太多对冲的问题，因此後端工程师用!important绝对是没问题的。

後端都能用

前端工程师在使用某种CSS方法时，习惯会先询问Can I use，看支援度，也就是看目前哪些浏览器支援哪些语法。後端工程师不用，因为毕竟使用後台管理工具的人为少数，只要後勤人员使用上没有问题，基本上後端能够使用的CSS自由度便很大

像我就在 grid_div 使用了最新的css属性

def grid_div(left = 1, right = 2)
    tag.div(style: "display:grid; grid-template-columns: #{left}fr #{right}fr; 
                    grid-auto-rows: 
                    minmax(50px, auto);") { yield if block_given? }
end

Styled Component

没写过Styled Component吗？Rails 可以帮你达成梦想。这是某一次我在写寄信画面的，偶然觉得跟过往写Styled Component的感觉十分相像！而且写在helper的好处是可以拿来重复使用。

# 分隔线
def division_line(array, element)
  return if array.last == element

  tag.div style: "
			width: 100%;
				height: 1px;
				margin: 12px auto;
				background-color: rgba(20, 20, 20, 0.1);
			"
end

接着，我们要进入正题了 ?

基本习得

如果读者只会br跟&nbsp的话，以下的文章一定可以让你们大幅进度，这是写给後端读者们的文章。今天不会提太多细节，比如说css的单位px, rem, %, vw, vh等，或是before, after, hover等伪元素的用法，但我们今天会将一些比较常用的地方列出来

行内元素 && 区块元素

⭐️ 以下为常用的行内元素

span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup...

⭐️ 以下为常用的区块元素

div、p、h1~h6、
ul、ol、li、
dl、dt、dd、
form、table、hr、
blockquote 、
address、menu、pre

後面几天有机会的话，会用实例来带着大家认识行内跟区块元素

区块元素 & margin & padding & border

margin, padding 分别为区块元素的外距和内距。我们看上方人像这块，白色框框是我们给该元素的border，我们使用padding来调整内距；margin 为外距，我们使用margin调整对外的距离

下方的元素是以margin排列，可以看到使用margin排列会造成间隔，因为margin为外距。

假设我们用padding调整距离，假定红色框代表整个区块的大小的话，我们使用padding调整，示意图就会像下方的图片一样。

我们可以执行以下的脚本，对自己感兴趣的网站进行观察

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

这里是使用自己的instagram拿来示范。我将上方的程序码贴到後台人员开发工具的console，浏览器画面就会被框出来。可以很清楚的看到网站的排列方式，包括哪边使用padding, margin等。

margin with auto

刚接触margin搭配auto的写法，是在使用导览列的时候。导览列许多左右并排的方式，就是使用margin-left: auto，或者margin-right: auto来达到效果。

以下整理几种用法

外框元素宽於内框元素，内框元素使用margin-left: auto，内框元素就会自动靠向最右排列
外框元素宽於内框元素，内框元素使用margin-right: auto，内框元素就会自动靠向最左排列
外框元素宽於内框元素，内框元素使用margin-right: auto; margin-right: auto，内框元素就会自动水平置中
外框元素高於内框元素，内框元素使用margin-top: auto，内框元素就会自动靠向最下排列
外框元素高於内框元素，内框元素使用margin-bottom: auto，内框元素就会自动靠向最上排列
外框元素高於内框元素，内框元素使用margin-top: auto; margin-bottom: auto，内框元素就会自动垂直置中

display: block

预设的排列方式即为重上到下的方式，这种方式称为block。前面我们提到的区块元素，才会遵照区块元素的排列规则。如果对span, strong 等元素进行排列是无效的。

element {
  /* 通常省略不写 */
  display: block
}

display: flex

我们用以下实际的例子来讲解 flex

以下两个框框的排列，为使用flex的一个范例，这边使用了bootstrap 的d-flex justify-content-between，而转成css的意思属性即为下面的意思。

element {
  display: flex;
  justify-content: 'space-between'
}

我将讲解flex部分交给卡斯伯，每次忘记语法都是靠卡斯伯的文章想起来的

另外一个例子也是使用bootstrap

上面的写法等同於下列的css

element {
  display: flex;
  justify-content: 'flex-end'
}

display: grid

grid是後来比较新出来的排列方式，目前不是所有的浏览器都看得懂grid。大多数的前端都还是会选择使用框架如bootstrap来取代grid。然而目前在後端的经验，是没有因为使用grid属性而被调整过，各位读者若有空的话，grid是值得了解的属性，加上这个属性将来一定会被大量使用，所以只会使用 row col-6的朋友们，这绝对是你们绝佳的另一种选择。

我们举一个一个使用grid排列画面：

element.style {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: minmax(50px, auto);
}

使用以上的css，由於grid搭配grid-template-columns的关系，DOM元素会是以下方式排列，且左右宽度比会自动排列成1: 2

如果改写成以下形式

element.style {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-auto-rows: minmax(50px, auto);
}

则元素会依照以下的方式排列，并且宽度比为1:1:2

应用 - 404 画面

这是简单的找不到画面，各位後端的读者们，可以找简单的找不到网页画面，试着自己刻画看看。在rails的专案里面，404, 500的画面在static folder，除非用CDN的方式挂载 bootstrap，否则的话所有的画面都得自己刻画，刚好是一个很好当练习的机会。

以下是从我的个人页面撷取的找不到画面。虽然简单，但读者做的过程中就会发现，在完成一个前端画面，需要使用多少css

该画面有两个看点

如何刻划出按钮的样式 ➡️ 如何做没有圆角的按钮，以及字如何摆等等
如何让样式置中 ➡️ 善用margin: auto

<!DOCTYPE html>
<html>
<head>
  <title>404 找不到页面</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <style>
    .center {
      margin-left: auto;
      margin-right: auto;
      margin-top: 30vh;
      width: 50%;
      padding: 10px;
    }

    .btn {
      border: 2px solid black;
      background-color: white;
      color: black;
      padding: 14px 28px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body class="rails-default-error-page">
  <div class="center">
    <div>
      <h1 style="text-align: center;">404 Not Found.</h1>
    </div>
    <p style="text-align: center;">很抱歉，本页面已不存在<br />请返回浏览其他页面。</p>
    <div style="display: flex; justify-content: center; margin-top: 20px">
      <a href="https://ec.tun-grp.com/admin">
        <button class="btn success">返回首页</button>
      </a>
    </div>
  </div>
</body>
</html>

结语

以下为今天提到的内容的总整理：

行内元素、区块元素
Margin & Padding & Border
Block & flex & Grid
找不到画面应用

将以上的基本技巧学会後，基本上就可以应付很多地方。

CSS的应用技还有表单/Table，在Day20以後会用实例带入，并且会在实例中提到相关的html, css语法

参考资料

卡斯伯

<<: Day 5 学习前人的隐私条款设计

>>: 乐观锁 vs. 悲观锁

Day19. 後端工程师需要具备的前端常识

!important

後端都能用

Styled Component

基本习得

行内元素 && 区块元素

区块元素 & margin & padding & border

margin with auto

display: block

display: flex

display: grid

应用 - 404 画面

结语

参考资料

灵异现象 - Windows SMB 用 Domain name 能通，用 IP 不能通

[ Day 18 ] 条件 Render - Conditional Rendering

More About Textures

[Day2] 断词介绍

DAY28 - 工程师一定会用到的GIT懒人包

如何修复“硬碟仅显示一半容量”

Arduino 扩充版 W5100 - EEPROM 烧录

[Day29]程序菜鸟自学C++资料结构演算法 – 桶排序法(Bucket sort)

javascript基础功能1

DAY10 资料室--Vuex模组化